https://7nohe.dev 7noheの技術ブログ ja https://7nohe.dev/post/guren-why-hono/ https://7nohe.dev/post/guren-why-hono/ Why Guren, a Laravel-inspired TypeScript framework, is built on Hono — and what it stacks on top: type safety from the database schema to React props, plus AI-agent tooling built on framework conventions. Sat, 22 Aug 2026 00:00:00 GMT https://7nohe.dev/post/adonisjs-github-login/ https://7nohe.dev/post/adonisjs-github-login/ AdonisJSで`@adonisjs/ally`を利用してGitHubログインを実装してみます。 Thu, 19 Sep 2024 13:00:00 GMT https://7nohe.dev/post/adonisjs-inertia-starter-kit-tailwindcss-shadcn-ui/ https://7nohe.dev/post/adonisjs-inertia-starter-kit-tailwindcss-shadcn-ui/ AdonisJSのInertia starter kitでプロジェクトを作成して、フロントエンドにtailwindcssとshadcn/uiを導入する手順を紹介します。 Sun, 08 Sep 2024 11:00:00 GMT https://7nohe.dev/post/nestjs-mvc/ https://7nohe.dev/post/nestjs-mvc/ NestJSのMVCパターンでアプリ構築してみました。 ORMはPrisma、テンプレートエンジンはhbsの構成にしました。 Sat, 07 Sep 2024 15:00:00 GMT https://7nohe.dev/post/redwoodjs-v7-7-tutorial-chapter-4/ https://7nohe.dev/post/redwoodjs-v7-7-tutorial-chapter-4/ フルスタックWebフレームワークであるRedwoodJSのTutorialをやってみた記事です。 Chapter 4は認証機能の実装です。 Thu, 15 Aug 2024 15:00:00 GMT https://7nohe.dev/post/redwoodjs-v7-7-tutorial-chapter-3/ https://7nohe.dev/post/redwoodjs-v7-7-tutorial-chapter-3/ フルスタックWebフレームワークであるRedwoodJSのTutorialをやってみた記事です。 Chapter 3はフォームの作成、データベースへの書き込み処理まで行う内容となります。 Wed, 14 Aug 2024 15:00:00 GMT https://7nohe.dev/post/redwoodjs-v7-7-tutorial-chapter-2/ https://7nohe.dev/post/redwoodjs-v7-7-tutorial-chapter-2/ フルスタックWebフレームワークであるRedwoodJSのTutorialをやってみた記事です。 Chapter 2ではCRUD処理を自動生成するscaffoldやデータの取得表示を行うセルについて主に学んでいきます。 Tue, 13 Aug 2024 15:00:00 GMT https://7nohe.dev/post/redwoodjs-v7-7-tutorial-chapter-1/ https://7nohe.dev/post/redwoodjs-v7-7-tutorial-chapter-1/ フルスタックWebフレームワークであるRedwoodJSのTutorialをやってみた記事です。 Chapter 1はプロジェクト作成からページ作成、ルーティング設定、レイアウト作成まで実装してみるという内容でした。 Mon, 12 Aug 2024 15:00:00 GMT https://7nohe.dev/post/adonisjs-v6-authentication/ https://7nohe.dev/post/adonisjs-v6-authentication/ TypeScriptのフルスタックWebアプリケーションのAdonisJSに入門してみました。 認証機能を実装してみました。 Mon, 12 Aug 2024 03:00:00 GMT https://7nohe.dev/post/adonisjs-v6-crud/ https://7nohe.dev/post/adonisjs-v6-crud/ TypeScriptのフルスタックWebアプリケーションのAdonisJSに入門してみました。 簡単なCRUD（TODOアプリ）を実装してみました。 Sun, 11 Aug 2024 08:30:00 GMT https://7nohe.dev/post/openapi-hono-openapi-react-query-codegen-infinite-scroll/ https://7nohe.dev/post/openapi-hono-openapi-react-query-codegen-infinite-scroll/ OpenAPI Honoでバックエンド処理とOpenAPIスキーマを自動生成、そこからOpenAPI React Query CodegenでカスタムuseInfiniteQueryを自動生成して簡単に無限スクロールを実現します。 Thu, 08 Aug 2024 14:00:00 GMT https://7nohe.dev/post/openapi-tanstack-query-next-js-app-router-dehydrate-hydrate/ https://7nohe.dev/post/openapi-tanstack-query-next-js-app-router-dehydrate-hydrate/ この記事では、Next.jsのApp RouterでTanStack Queryを使用してデータを取得する方法について詳しく解説します。特に、Server ComponentでのデータプリフェッチとHydrationの仕組みを活用し、クライアントサイドで即座にデータを利用可能にする手法を紹介します。 また、OpenAPIスキーマからTanStack Queryコードを自動生成するOpenAPI React Query Codegenツールの使用方法についても取り上げ、手動でのコード記述を省くことで実装の効率化と一貫性を保つ方法を具体的な例を交えて説明します。 Sat, 08 Jun 2024 14:00:00 GMT https://7nohe.dev/post/astro-rehype-shikiji-markdown-html/ https://7nohe.dev/post/astro-rehype-shikiji-markdown-html/ Astro + rehype-shikijiでMarkdownからシンタックスハイライト付きHTMLを生成する方法を ご紹介します。 Fri, 22 Dec 2023 15:00:00 GMT https://7nohe.dev/post/astro-api-markdown/ https://7nohe.dev/post/astro-api-markdown/ ContentfulなどヘッドレスCMSを利用してMarkdownで記事本文を管理してる場合のMarkedとShikiを使ったコードハイライティングの方法を紹介します。 Sun, 06 Aug 2023 15:00:00 GMT https://7nohe.dev/post/laravel-typegen/ https://7nohe.dev/post/laravel-typegen/ Laravel TypegenというLaravelのModelやEnumなどからTypeScriptの型ファイル生成ができるNode.jsライブラリを作成しました。 このライブラリの特徴や使用方法、仕組みについて書いていきます。 Wed, 21 Dec 2022 15:00:00 GMT https://7nohe.dev/post/openapi-typescript-vite/ https://7nohe.dev/post/openapi-typescript-vite/ OpenAPIスキーマの変更を検知してTypeScriptクライアントコードを自動生成してくれるViteプラグイン(vite-plugin-openapi-typescript-codegen)を作ってみたので、導入方法を紹介します。 このプラグインを使うことにより、スキーマファイル変更によるTSコードを最新化するための生成コマンドを毎回叩かなくてもよくなります。 Viteの開発サーバーを起動しているだけで常にスキーマファイルと同期したTSクライアントを得ることができます。 Tue, 06 Sep 2022 15:00:00 GMT https://7nohe.dev/post/openapi-react-query-codegen/ https://7nohe.dev/post/openapi-react-query-codegen/ openapi-react-query-codegenを使って、OpenAPIスキーマからReact Query(TanStack Query)のカスタムHooksコードを自動生成する方法を紹介します。 これを使うことでReact QueryのuseQueryやuseMutationをラップしたカスタムHooksが作成され、APIリクエスト処理を簡単に書くことができます。 Tue, 09 Aug 2022 16:00:00 GMT https://7nohe.dev/post/vite-plugin-vue-marked/ https://7nohe.dev/post/vite-plugin-vue-marked/ Vite + Vue3のアプリにvite-plugin-vue-markedを導入して、SFC内のカスタムブロックでMarkdownを記述できるようにします。 記述したMarkdownはVueコンポーネントに変換され、そのままtemplateタグ内で利用することができ便利です。 Sun, 19 Jun 2022 13:30:00 GMT https://7nohe.dev/post/flutter-linter/ https://7nohe.dev/post/flutter-linter/ flutter_lintsを導入してFlutterアプリにLinterを導入する方法を紹介します。 Sun, 22 Aug 2021 15:00:00 GMT https://7nohe.dev/post/node-js-google-analytics-4-ga4-contentful-google-analytics-data-api/ https://7nohe.dev/post/node-js-google-analytics-4-ga4-contentful-google-analytics-data-api/ 新バージョンGoogle Analytics 4(GA4)からGoogle Analytics Data APIを使ってページビュー数を取得、そこからContentfulの記事情報を取得して人気記事一覧を表示します。 この記事ではNode.jsクライアントを利用しての実装方法を紹介します。 Thu, 12 Aug 2021 15:00:00 GMT https://7nohe.dev/post/flutter-firebase-ocr/ https://7nohe.dev/post/flutter-firebase-ocr/ FlutterとFirebaseを使って日本語を読み取るOCRアプリを作ってみます。 非推奨となったFirebase ML Vision SDKを使わず推奨されている方法のCloud Vision APIをCloud Functions経由で呼び出す方法で実現します。 Mon, 24 May 2021 15:00:00 GMT https://7nohe.dev/post/nextjs-vercel-contentful-preview-mode/ https://7nohe.dev/post/nextjs-vercel-contentful-preview-mode/ Next.js+Vercel+Contentful環境で構築したブログシステムにNext.jsのPreview Modeを利用してContentfulから記事プレビューを表示させる方法を解説します。 Sun, 16 May 2021 15:00:00 GMT