Daiki Urata's Tech Bloghttps://7nohe.dev/https://7nohe.dev/post/adonisjs-github-login/https://7nohe.dev/post/adonisjs-github-login/AdonisJSで`@adonisjs/ally`を利用してGitHubログインを実装してみます。 Thu, 19 Sep 2024 23:30:34 GMThttps://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 10:44:16 GMThttps://7nohe.dev/post/nestjs-mvc/https://7nohe.dev/post/nestjs-mvc/NestJSのMVCパターンでアプリ構築してみました。 ORMはPrisma、テンプレートエンジンはhbsの構成にしました。 Sat, 07 Sep 2024 14:08:19 GMThttps://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 14:34:53 GMThttps://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 13:59:43 GMThttps://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 14:30:49 GMThttps://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 13:46:07 GMThttps://7nohe.dev/post/adonisjs-v6-crud/https://7nohe.dev/post/adonisjs-v6-crud/TypeScriptのフルスタックWebアプリケーションのAdonisJSに入門してみました。 簡単なCRUD（TODOアプリ）を実装してみました。 Mon, 12 Aug 2024 03:09:18 GMThttps://7nohe.dev/post/adonisjs-v6-authentication/https://7nohe.dev/post/adonisjs-v6-authentication/TypeScriptのフルスタックWebアプリケーションのAdonisJSに入門してみました。 認証機能を実装してみました。 Mon, 12 Aug 2024 03:08:55 GMThttps://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:10:04 GMThttps://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:01:06 GMThttps://7nohe.dev/post/laravel-typegen/https://7nohe.dev/post/laravel-typegen/Laravel TypegenというLaravelのModelやEnumなどからTypeScriptの型ファイル生成ができるNode.jsライブラリを作成しました。 このライブラリの特徴や使用方法、仕組みについて書いていきます。 Sat, 30 Mar 2024 15:33:46 GMThttps://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:26:20 GMThttps://7nohe.dev/post/astro-api-markdown/https://7nohe.dev/post/astro-api-markdown/ContentfulなどヘッドレスCMSを利用してMarkdownで記事本文を管理してる場合のMarkedとShikiを使ったコードハイライティングの方法を紹介します。 Sun, 06 Aug 2023 15:40:38 GMThttps://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経由で呼び出す方法で実現します。 Sun, 06 Aug 2023 08:58:44 GMThttps://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 14:45:46 GMThttps://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:08:46 GMThttps://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:54:31 GMThttps://7nohe.dev/post/flutter-linter/https://7nohe.dev/post/flutter-linter/flutter_lintsを導入してFlutterアプリにLinterを導入する方法を紹介します。Sun, 19 Jun 2022 13:22:00 GMThttps://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クライアントを利用しての実装方法を紹介します。 Sat, 14 Aug 2021 02:24:47 GMThttps://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から記事プレビューを表示させる方法を解説します。 Tue, 25 May 2021 13:54:41 GMT