「Hono遍歴」と「HonoXでブログ作成」

Workers Tech Talks in Osaka #1

Transcript

1. 「Hono遍歴」と「HonoXでブログ作成」 Workers Tech Talks in Osaka #1 1
2. 自己紹介 名前: 菅原康滉 X: @yasu551_ 居住地: 岡山 仕事: ソニックガーデン Rails 2
3. 本を書いた Hotwire: 少ないコードでインタラ クティブなアプリを作るアプロー チ フロントエンドをインタラクティ ブにしたいときは、Hotwireを使っ ている 3
4. Honoとの接点 4
6. サクッと作りやすい APIが直感的でわかりやすい import { Hono } from 'hono' const app = new Hono() app.get('/', (c) => c.text('Hono!')) export default app デプロイに1分もかかってない 6
7. HonoでRAG RAG: AIに渡すプロンプトを、DB からの情報を使って、いい感じに する仕組み Cloudflare D1 Cloudflare Vectorize Cloudflare Workers AI 7
8. フロントエンドをインタラクティブにしたいけど、どうす ればいいんだろう 8
11. YAPC前夜祭でHonoXがリリース!! 11
12. YAPC本番に備えて寝よう。。。 12
13. 午前2時に目が覚めた 13
14. 寝れそうにないからHonoXで何か作ろう！ 14
15. 聞く予定のトークを記録するアプリ 画面を作るのは楽 インタラクティブにするのも楽 デプロイも当然楽 15
16. Railsといえば、15分でブログを作成する動画が有名 16
17. HonoXでブログはどんな感じで作ればいい？ 17
18. わからないなら作ってみよう！！ 18
19. <div style="display: flex;justify-content: center;"> <video src="./videos/blog-demo.mp4" controls width="600"></video> </div> 19
20. ブログの機能 記事作成 記事作成前にプレビュー 記事で使う画像をアップロード 20
21. HonoXプロジェクトを作成 必要なパッケージをインストール $ npm install hono honox HonoXプロジェクトを作成 $ npm create hono@latest create-hono version 0.5.0 Target directory … blog Which template do you want to use? › x-basic cloned honojs/starter#main to /Users/xxx/ Do you want to install project dependencies? … yes Which package manager do you want to use? › yarn Installed project dependencies Copied project files 21
22. 記事作成 D1データベースを作成 記事作成ページを作成 記事作成リクエストを受け付ける 22
23. D1データベースを作成 D1データベースを作成 $ npx wrangler d1 create blog [[d1_databases]] binding = "DB" # i.e. available in your Worker on env.DB database_name = "blog" database_id = "xxxxxxxxxxxxxxx" wrangler.tomlに、作成したデータベースの情報を追記 D1データベースに、記事のデータを記録するテーブルを作成 $ npx wrangler d1 execute blog --file=./createArticleTable.sql 23
24. D1データベースを作成 app/global.d.ts のBindingsにDBを追加して、Honoのcontextからアクセスできるように declare module 'hono' { interface Env { Bindings: { DB: D1Database } } } c.env.DB で、D1にアクセスできる 24
25. 記事作成ページを作成 app/routes/articles/create.tsx export default createRoute((c) => { return c.render(<ArticleForm />) }) GET /articles/create 25
26. 記事作成リクエストを受け付ける app/routes/articles/create.tsx export const POST = createRoute( zValidator('form', schema, (result, c) => {...}), async (c) => { const { title, content } = c.req.valid('form') await createArticle(c.env.DB, { title, content }) return c.redirect('/', 303) } ) POST /articles/create を受け付ける 26
27. 記事をプレビュー islandsディレクトリ配下のコンポ ーネントは、クライアント側でJS が使える app/islands/ContentForm.tsx export default function ContentForm() { ... } Reactと互換性があるhookが使え る 27
28. 記事をプレビュー export default function ContentForm({ initialValue = '' }: Props) { const [value, setValue] = useState(initialValue) const [preview, setPreview] = useState(false) const handleChange = (e: Event) => { const target = e.target as HTMLTextAreaElement setValue(target.value) } return ( <> <div> <label> プレビュー <input type="checkbox" id="preview" checked={preview} onChange={() => setPreview((prev) => !prev)} /> </label> </div> {preview ? ( <> <div dangerouslySetInnerHTML={{ __html: parseMarkdown(value) }} /> <input type="hidden" name="content" value={value} /> </> ) : ( <textarea id="content" name="content" onChange={handleChange} > {value} </textarea> )} </> ) } 28
29. 記事で使う画像のアップ ロード 画像アップロードREST APIを作成 アップロード後、テキストエリア にアップロードした画像を追加 29
30. 画像アップロードREST APIを作成 app/routes/images/create.tsx export const POST = createRoute( async (c) => { const { file } = c.req.valid('form') const form = new FormData() const client = CloudflareImageClient.new(c.env.CLOUDFLARE_API_TOKEN, c.env.CLOUDFLARE_ACCOUNT_ID) const res = await client.upload(file) return c.json(res) } ) POST /images/create 30
31. アップロード後、テキストエリアにアップロードした画像を追加 export default function ContentForm() { const [file, setFile] = useState<File | null>(null) const handleFileInputChange = (e: Event) => { const fileList = e.target.files as FileList setFile(fileList[0]) } const handleImageUpload = async (e: Event) => { e.preventDefault() const formData = new FormData() formData.append('file', file) const res = await fetch('/images/create', { method: 'POST', body: formData }) const json = await response.json() setValue(`${value}\n`) } return ( <> ... <input type="file" id="file" name="file" accept="image/*" onChange={handleFileInputChange} /> <button type="submit" onClick={handleImageUpload}> 画像添付</button> ... <textarea id="content" name="content">{value}</textarea> </> ) } 31
32. 最後に フロントエンド開発の経験がほとんどなくても、HonoXで簡単なサイトが作れた 簡単なサイトをサクッと作りたい人は使ってみてください！！ 32