ใƒกใ‚คใƒณใ‚ณใƒณใƒ†ใƒณใƒ„ใธใ‚นใ‚ญใƒƒใƒ—
่ฆ‹ๅ‡บใ—็”ปๅƒ

ใ€ŒNext.js ใฏใ‚‚ใ†้‡ใŸใ„โ€ฆใ€ ใใ†ๆ„Ÿใ˜ใŸๅƒ•ใŒใ€่ปฝ้‡ใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏ ใ€ŒHonoใ€ ใซๆœชๆฅใ‚’่ฆ‹ใŸ่ฉฑ

    ใ‚จใƒƒใ‚ธใง่ผใใ‚ทใƒณใƒ—ใƒซใ•ใจใ€ๅ€‹ไบบ้–‹็™บใฎ้€Ÿๅบฆใ‚’็ˆ†ไธŠใ’ใ™ใ‚‹้–‹็™บไฝ“้จ“

    Next.js ใฏ็ด ๆ™ดใ‚‰ใ—ใ„ใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใงใ™ใ€‚

    ใใ‚Œใฏ้–“้•ใ„ใ‚ใ‚Šใพใ›ใ‚“ใ€‚

    ใงใ‚‚ใ€ๅ€‹ไบบ้–‹็™บใฎๅฐใ•ใชใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใซใฏใ€ๆ™‚ใ€…ใ€Œ้ŽงใŒ้‡ใ™ใŽใ‚‹ใ€ใจๆ„Ÿใ˜ใ‚‹็žฌ้–“ใŒใ‚ใฃใŸใฎใงใ™ใ€‚

    ใ“ใ‚Œใฏใ€ๅƒ•ใŒใใ‚“ใชๅฐใ•ใช้•ๅ’Œๆ„Ÿใ‹ใ‚‰ๆ–ฐใ—ใ„ๆŠ€่ก“ใฎๆŽขๆฑ‚ใ‚’ๅง‹ใ‚ใ€ๅฝ—ๆ˜Ÿใฎใ”ใจใ็พใ‚ŒใŸ่ปฝ้‡ใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใ€ŒHonoใ€ใซใ€ๅ€‹ไบบ้–‹็™บใฎๆ–ฐใ—ใ„ๆœชๆฅใ‚’่ฆ‹ๅ‡บใ™ใพใงใฎ็‰ฉ่ชžใงใ™ใ€‚

    ็”ปๅƒ

    ๅƒ•ใŒๆ–ฐใ—ใ„ใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใ‚’ๆŽขใ—ๅง‹ใ‚ใŸใ€ไบ›็ดฐใชใใฃใ‹ใ‘

    ใฟใชใ•ใ‚“ใฏใ€ๆ„›็”จใ—ใฆใ„ใ‚‹้“ๅ…ทใซๅฏพใ—ใฆใ€ใตใจใ—ใŸ็žฌ้–“ใซใ€Œใ‚ใ‚Œ๏ผŸใ€ใจใ„ใ†ๅฐใ•ใช้•ๅ’Œๆ„Ÿใ‚’่ฆšใˆใŸใ“ใจใฏใ‚ใ‚Šใพใ›ใ‚“ใ‹๏ผŸ

    ๅƒ•ใซใจใฃใฆใ€ใใฎใ€Œ้“ๅ…ทใ€ใฏ Next.js ใงใ—ใŸใ€‚

    ่จ€ใ‚ใšใจ็Ÿฅใ‚ŒใŸใ€React ใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใฎ็Ž‹ๆง˜ใ€‚

    ๅƒ•ใ‚‚ไป•ไบ‹ใงใฏใ‚‚ใกใ‚ใ‚“ใ€ๅ€‹ไบบ้–‹็™บใงใ‚‚ใใฎๆฉๆตใ‚’ๅญ˜ๅˆ†ใซๅ—ใ‘ใฆใใพใ—ใŸใ€‚

    App Routerใ€ใ‚ตใƒผใƒใƒผใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใ€Vercel ใจใฎใ‚ทใƒผใƒ ใƒฌใ‚นใช้€ฃๆบโ€ฆใ€‚

    ใใฎใฉใ‚Œใ‚‚ใŒใ€็พไปฃใฎ Web ้–‹็™บใซใŠใ„ใฆๅผทๅŠ›ใชๆญฆๅ™จใงใ‚ใ‚‹ใ“ใจใฏ้–“้•ใ„ใ‚ใ‚Šใพใ›ใ‚“ใ€‚

    ใ—ใ‹ใ—ใ€ใ‚ใ‚‹ๆ—ฅใฎๆทฑๅคœใ€ๅƒ•ใฏใŸใฃใŸไธ€ใคใฎๅฐใ•ใช API ใ‚’ไฝœใ‚‹ใŸใ‚ใ ใ‘ใซใ€Next.js ใฎใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใ‚’็ซ‹ใกไธŠใ’ใฆใ„ใพใ—ใŸใ€‚

    create-next-app ใฎใ‚ณใƒžใƒณใƒ‰ใ‚’ๆ‰“ใกใ€ใ„ใใคใ‚‚ใฎใƒ•ใ‚กใ‚คใƒซใŒ็”Ÿๆˆใ•ใ‚Œใ€ใ‚ˆใ†ใ‚„ใ /api/hello ใซใ‚ขใ‚ฏใ‚ปใ‚นใงใใŸใจใใ€ๅƒ•ใฎๅฟƒใซๆตฎใ‹ใ‚“ใ ใฎใฏ้”ๆˆๆ„Ÿใงใฏใชใใ€ใ‚ใ‚‹็จฎใฎใ€Œใ‚‚ใฉใ‹ใ—ใ•ใ€ใงใ—ใŸใ€‚

    ใ€Œๅƒ•ใฏใŸใ ใ€ๅฐใ•ใชใƒใƒฉใƒƒใ‚ฏๅฐๅฑ‹ใ‚’ๅปบใฆใŸใ„ใ ใ‘ใชใฎใซใ€ใพใ‚‹ใงๅทจๅคงใชๅŸŽใ‚’็ฏ‰ใ„ใฆใ„ใ‚‹ใ‚ˆใ†ใชๆฐ—ๅˆ†ใ โ€ฆใ€

    ใ“ใฎไบ›็ดฐใชใ€ใ—ใ‹ใ—็„ก่ฆ–ใงใใชใ„ๆ„Ÿ่ฆšใ€‚

    ใใ‚ŒใŒใ€ๅƒ•ใ‚’ๆ–ฐใ—ใ„ใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏๆŽขใ—ใฎๆ—…ใธใจ้ง†ใ‚Š็ซ‹ใฆใ‚‹ใ€ๅ…จใฆใฎๅง‹ใพใ‚Šใ ใฃใŸใฎใงใ™ใ€‚

    ็”ปๅƒ

    ๅƒ•ใŒๆ„Ÿใ˜ใฆใ„ใŸ ใ€ŒNext.jsใ€ ใธใฎๅฐใ•ใช้•ๅ’Œๆ„Ÿ ใ€œๅทจๅคงใ™ใŽใ‚‹ใŒใ‚†ใˆใฎๆ‚ฉใฟใ€œ

    ่ชค่งฃใ—ใชใ„ใงใปใ—ใ„ใฎใงใ™ใŒใ€ๅƒ•ใฏ Next.js ใŒๅคงๅฅฝใใงใ™ใ€‚

    ใ‚ฏใƒฉใ‚คใ‚ขใƒณใƒˆใƒฏใƒผใ‚ฏใงๅคง่ฆๆจกใชใ‚ขใƒ—ใƒชใ‚ฑใƒผใ‚ทใƒงใƒณใ‚’ๆง‹็ฏ‰ใ™ใ‚‹้š›ใซใฏใ€ไปŠใงใ‚‚็ฌฌไธ€ใฎ้ธๆŠž่‚ขใงใ™ใ€‚

    ใใฎใ‚จใ‚ณใ‚ทใ‚นใƒ†ใƒ ใ€่ฑŠๅฏŒใชๆฉŸ่ƒฝใ€ใใ—ใฆใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃใฎๅŠ›ใฏใ€ไฝ•็‰ฉใซใ‚‚ไปฃใˆใŒใŸใ„ใ‚‚ใฎใŒใ‚ใ‚Šใพใ™ใ€‚

    ใ—ใ‹ใ—ใ€ใ“ใจใ€Œๅ€‹ไบบ้–‹็™บใ€ใจใ„ใ†ๅฐใ•ใช็ ‚ๅ ดใซใŠใ„ใฆใฏใ€ใใฎๅทจๅคงใ•ใŒๆ™‚ใจใ—ใฆ่ถณๆžทใซใชใ‚‹ใ“ใจใŒใ‚ใ‚Šใพใ—ใŸใ€‚

    App Router ใฎๅญฆ็ฟ’ๆ›ฒ็ทš

    App Router ใฏ็”ปๆœŸ็š„ใชๆฆ‚ๅฟตใงใ™ใŒใ€ใใฎ้žๅŒๆœŸใ‚ณใƒณใƒใƒผใƒใƒณใƒˆใฎไป•็ต„ใฟใ‚„ใ€"use client" ใจ "use server" ใฎๅขƒ็•Œ็ทšใ‚’ๅธธใซๆ„่ญ˜ใ™ใ‚‹ๅฟ…่ฆใŒใ‚ใ‚‹ใชใฉใ€ใ‚ทใƒณใƒ—ใƒซใช CRUD API ใ‚’ไฝœใ‚ŠใŸใ„ใ ใ‘ใฎใจใใซใฏใ€ๅฐ‘ใ—ๅคงใ’ใ•ใซๆ„Ÿใ˜ใ‚‰ใ‚Œใ‚‹ใ“ใจใŒใ‚ใ‚Šใพใ—ใŸใ€‚

    ใƒ‡ใ‚ฃใƒฌใ‚ฏใƒˆใƒชๆง‹้€ ใฎ่ฆ็ด„ใ‚‚ๅŽณๅฏ†ใงใ€ใ€Œใกใ‚‡ใฃใจ่ฉฆใ—ใŸใ„ใ€ใจใ„ใ†ๆฐ—่ปฝใ•ใŒใ€ๅฐ‘ใ—ใšใคๅ‰ŠใŒใ‚Œใฆใ„ใใ‚ˆใ†ใชๆ„Ÿ่ฆšใงใ™ใ€‚

    ้•ทใ„ใƒ“ใƒซใƒ‰ๆ™‚้–“ใจ่ค‡้›‘ใช่จญๅฎš

    ๅ€‹ไบบ้–‹็™บใงใฏใ€ใ‚ขใ‚คใƒ‡ใ‚ฃใ‚ขใ‚’็ด ๆ—ฉใๅฝขใซใ—ใ€ไฝ•ๅบฆใ‚‚่ฉฆ่กŒ้Œฏ่ชคใ‚’็นฐใ‚Š่ฟ”ใ™ใ‚นใƒ”ใƒผใƒ‰ๆ„ŸใŒๅ‘ฝใงใ™ใ€‚

    ใ—ใ‹ใ—ใ€Next.js ใฏๆฉŸ่ƒฝใŒ่ฑŠๅฏŒใชๅˆ†ใ€ไพๅญ˜้–ขไฟ‚ใ‚‚ๅคšใใ€ใกใ‚‡ใฃใจใ—ใŸๅค‰ๆ›ดใงใ‚‚ใƒ“ใƒซใƒ‰ใซๆ™‚้–“ใŒใ‹ใ‹ใ‚‹ใ“ใจใŒใ‚ใ‚Šใพใ™ใ€‚

    ใพใŸใ€Webpack ใ‚„ Babel ใฎ่จญๅฎšใ‚’ใ‚ซใ‚นใ‚ฟใƒžใ‚คใ‚บใ—ใ‚ˆใ†ใจใ™ใ‚‹ใจใ€ใใฎ่ค‡้›‘ใ•ใซๅœงๅ€’ใ•ใ‚Œใ‚‹ใ“ใจใ‚‚ๅฐ‘ใชใใ‚ใ‚Šใพใ›ใ‚“ใงใ—ใŸใ€‚

    ๅคšใ™ใŽใ‚‹ "ใŠไฝœๆณ•"

    Next.js ใง้–‹็™บใ‚’้€ฒใ‚ใฆใ„ใ‚‹ใจใ€ใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใŒๅฎšใ‚ใŸๅคšใใฎใ€ŒใŠไฝœๆณ•ใ€ใซๅพ“ใ†ๅฟ…่ฆใŒใ‚ใ‚Šใพใ™ใ€‚

    ใใ‚Œใฏๅ“่ณชใ‚’ไฟใคไธŠใงใฏ้‡่ฆใงใ™ใŒใ€ใ€Œใ‚‚ใฃใจ่‡ช็”ฑใซใ€ใ‚‚ใฃใจใ‚ทใƒณใƒ—ใƒซใซๆ›ธใใŸใ„ใ‚“ใ ๏ผใ€ใจใ„ใ†ใ€ใƒขใƒŽใฅใใ‚ŠใฎๅˆๆœŸ่กๅ‹•ใฎใ‚ˆใ†ใชใ‚‚ใฎใŒใ€ๅˆ†ๅŽšใ„ไฝœๆณ•ๆ›ธใฎๅ‘ใ“ใ†ๅดใซ้œžใ‚“ใง่ฆ‹ใˆใฆใ—ใพใ†็žฌ้–“ใŒใ‚ใฃใŸใฎใงใ™ใ€‚

    ใ“ใ‚Œใ‚‰ใฏๆฑบใ—ใฆ Next.js ใฎๆฌ ็‚นใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚

    ใ‚€ใ—ใ‚ใ€ๅคง่ฆๆจก้–‹็™บใ‚’ๆ”ฏใˆใ‚‹ใŸใ‚ใฎๅ …็‰ขใ•ใฎ่จผใงใ™ใ€‚

    ใ—ใ‹ใ—ใ€ๅƒ•ใŒๆฑ‚ใ‚ใฆใ„ใŸใฎใฏใ€ๅฑˆๅผทใช้Žงใงใฏใชใใ€่ปฝใ‚„ใ‹ใงๅ‹•ใใ‚„ใ™ใ„ๆ™ฎๆฎต็€ใฎใ‚ˆใ†ใชใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใ ใฃใŸใฎใงใ™ใ€‚

    ็”ปๅƒ

    ๅฝ—ๆ˜Ÿใฎใ”ใจใ็พใ‚ŒใŸ ใ€ŒHonoใ€ ใจใฎๅ‡บไผšใ„ ใ€œใใฎ่ปฝใ•ใจ้€Ÿใ•ใซๆ‹ใ‚’ใ—ใŸใ€œ

    ใใ‚“ใชใƒขใƒคใƒขใƒคใ‚’ๆŠฑใˆใชใŒใ‚‰ใ€ๅƒ•ใฏ X (ๆ—ง Twitter) ใฎใ‚ฟใ‚คใƒ ใƒฉใ‚คใƒณใ‚’็œบใ‚ใฆใ„ใพใ—ใŸใ€‚

    ใใ“ใงใ€ๅถ็„ถ็›ฎใซ้ฃ›ใณ่พผใ‚“ใงใใŸใฎใŒใ€ŒHonoใ€ใจใ„ใ†ๅๅ‰ใงใ—ใŸใ€‚

    ใ€Œ็‚Ž ๐Ÿ”ฅใ€ใ‚’ๆ„ๅ‘ณใ™ใ‚‹ๆ—ฅๆœฌ่ชžใ‹ใ‚‰ๅไป˜ใ‘ใ‚‰ใ‚ŒใŸใจใ„ใ†ใ€ใใฎใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใ€‚

    ใ‚ญใƒฃใƒƒใƒใ‚ณใƒ”ใƒผใฏ

    ใ€ŒRegretless, Fast, and Fun (ๅพŒๆ‚”ใชใใ€้€Ÿใใ€ใใ—ใฆๆฅฝใ—ใ)ใ€

    ไฝ•ใ‹ใซๅผ•ใ‹ใ‚Œใ‚‹ใ‚ˆใ†ใซๅ…ฌๅผใ‚ตใ‚คใƒˆใ‚’่จชใ‚Œใ€ๅƒ•ใฏใใฎใƒˆใƒƒใƒ—ใƒšใƒผใ‚ธใซๆ›ธใ‹ใ‚ŒใŸใ‚ณใƒผใƒ‰ใซ่กๆ’ƒใ‚’ๅ—ใ‘ใพใ—ใŸใ€‚

    import { Hono } from 'hono'
    const app = new Hono()
    
    app.get('/', (c) => c.text('Hono!'))
    
    export default app

    โ€ฆใŸใฃใŸใ“ใ‚Œใ ใ‘๏ผŸ

    Express.js ใ‚’ๅฝทๅฝฟใจใ•ใ›ใ‚‹ใ€ใ‚ทใƒณใƒ—ใƒซใง็›ดๆ„Ÿ็š„ใชใ‚ณใƒผใƒ‰ใ€‚

    ๅƒ•ใฏๅŠไฟกๅŠ็–‘ใฎใพใพใ€Cloudflare Workers ใฎ็’ฐๅขƒใงใ€ใ“ใฎใ‚ณใƒผใƒ‰ใ‚’ๅ‹•ใ‹ใ—ใฆใฟใพใ—ใŸใ€‚

    ใƒ‡ใƒ—ใƒญใ‚คใ‚ณใƒžใƒณใƒ‰ใ‚’ๅฉใ„ใฆใ‹ใ‚‰ใ€ใƒ–ใƒฉใ‚ฆใ‚ถใซใ€ŒHello Hono!ใ€ใจ่กจ็คบใ•ใ‚Œใ‚‹ใพใงใ€ไฝ“ๆ„Ÿใงๆ•ฐ็ง’ใ€‚

    Next.js ใฎใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆ็ซ‹ใกไธŠใ’ใซใ‹ใ‹ใ‚‹ๆ™‚้–“ใจๆฏ”ในใ‚‹ใจใ€ใใ‚Œใฏใพใ‚‹ใง้ญ”ๆณ•ใฎใ‚ˆใ†ใงใ—ใŸใ€‚

    ใ€Œ่ปฝใ„โ€ฆ๏ผ้€Ÿใ„โ€ฆ๏ผใใ—ใฆใ€ไฝ•ใ‚ˆใ‚Šๆฅฝใ—ใ„๏ผใ€

    ่ค‡้›‘ใชใƒ‡ใ‚ฃใƒฌใ‚ฏใƒˆใƒชๆง‹้€ ใ‚‚ใ€้›ฃ่งฃใช่จญๅฎšใƒ•ใ‚กใ‚คใƒซใ‚‚ใ‚ใ‚Šใพใ›ใ‚“ใ€‚

    ใŸใ ใ€่‡ชๅˆ†ใฎๆ›ธใใŸใ„ใƒญใ‚ธใƒƒใ‚ฏใ ใ‘ใŒใใ“ใซใ‚ใ‚Šใพใ—ใŸใ€‚

    ใ‚ใฎใจใๆ„Ÿใ˜ใŸใ€Œ้‡ใŸใ„้Žงใ‚’่„ฑใŽๆจใฆใŸใ‚ˆใ†ใชใ€้–‹ๆ”พๆ„Ÿใฏใ€ไปŠใงใ‚‚ๅฟ˜ใ‚Œใ‚‰ใ‚Œใพใ›ใ‚“ใ€‚

    ใใ‚Œใฏใ€ๅƒ•ใŒๅ€‹ไบบ้–‹็™บใซๆฑ‚ใ‚ใฆใ„ใŸใ€Œใ‚นใƒ”ใƒผใƒ‰ใ€ใจใ€Œใ‚ทใƒณใƒ—ใƒซใ•ใ€ใธใฎใ€ๅฎŒ็’งใช็ญ”ใˆใงใ—ใŸใ€‚

    ๅƒ•ใŒ Hono ใซๆ‹ใ‚’ใ—ใŸ็žฌ้–“ใงใ™ใ€‚

    ็”ปๅƒ

    ๅƒ•ใŒ Hono ใซ้ญ…ใ›ใ‚‰ใ‚ŒใŸ 3 ใคใฎ็†็”ฑ ใ€œ Next.js ใซใฏใชใ„ใ€ใƒŸใƒ‹ใƒžใƒซใช็พŽๅญฆใ€œ

    Hono ใ‚’่งฆใ‚Œใฐ่งฆใ‚‹ใปใฉใ€ๅƒ•ใฏใใฎใƒŸใƒ‹ใƒžใƒซใชๆ€ๆƒณใจใ€ใใฎๅฅฅใซ้š ใ•ใ‚ŒใŸใƒ‘ใƒฏใƒ•ใƒซใ•ใซ้ญ…ไบ†ใ•ใ‚Œใฆใ„ใใพใ—ใŸใ€‚

    ๅƒ•ใŒ็‰นใซใ€Œใ“ใ‚Œใฏใ™ใ”ใ„๏ผใ€ใจๆ„Ÿใ˜ใŸ3ใคใฎ็†็”ฑใ‚’็ดนไป‹ใ•ใ›ใฆใใ ใ•ใ„ใ€‚

    ย 
    ย 
    15ๅนดใฎใƒ•ใƒชใƒผใƒฉใƒณใ‚น / ใ‚ฝใƒ•ใƒˆใ‚ฆใ‚งใ‚ขใ‚จใƒณใ‚ธใƒ‹ใ‚ข็ตŒ้จ“ใ‚’ๅŸบใซใ€ไป•ไบ‹ใŒๅЇ็š„ใซใƒฉใ‚ฏใซใชใ‚‹ๆ€่€ƒๆณ•ใ‚’็™บไฟกใ—ใ€ใ‚ใชใŸใฎ็”Ÿ็”ฃๆ€งใจๅฟƒใฎไฝ™่ฃ•ใ‚’็”Ÿใฟๅ‡บใ—ใพใ™ใ€‚ๅƒ้Ÿณใง้ธใ‚“ใ ็‰ฉ่ชžใฎๅŠ›ใงใ€ไบบ็”Ÿใฎๆทฑใ„่‘›่—คใ‚’ไน—ใ‚Š่ถŠใˆใ‚‹ใƒ’ใƒณใƒˆใจ็™’ใ—ใ‚’ๆไพ›ใ€‚ใƒ•ใ‚ฉใƒญใƒผใงๅฐ‚้–€็Ÿฅ่ญ˜ใจๅฟƒใฎๆ‹ ใ‚Šๆ‰€ใจใชใ‚‹็‰ฉ่ชžใŒๆ‰‹ใซๅ…ฅใ‚Šใพใ™ใ€‚

    ใ‚ใชใŸใธใฎใŠใ™ใ™ใ‚