はてなブックマーク

本文書では初めてshadcn/uiを利用したい人向けの入門的な内容になっています。shadcn/uiは再利用可能なコンポーネントを一括ですべてインストールして利用していくのではなく利用したいコンポーネントを選択して個別にインストールを行い利用することができます。さらにインストールしたコンポーネントは各自の環境に合わせてカスタマイズすることを前提にしているためコードをコピー&ペーストすることでも利用することができます。 インストールして利用できるコンポーネントの中から Button, DropDownMenu, Form, Table の 4 つのコンポーネントに注目して shadcn/ui の使い方を確認しています。Next.jsの環境で動作確認を行っていますがReact用のコンポーネントライブラリなのでNext.jsに関する知識がなくても利用できます。 shadcn/ui とは shad

Next.jsは現在最も人気のあるReactベースのフルスタックのJavaScriptフレームワークです。バージョンがアップする毎に新しい機能が次々に追加されNext.js13からServer ComponentsなどReactの最新機能を利用したApp Routerが登場しました。App Routerはファイル名でルーティングを設定していた既存のPage Routerとは全く異なる機能で設定方法も一から学び直す必要があります。新たにプロジェクトを作成するのであればApp Routerを利用することが推奨されていますが同時に両方の機能を利用することも可能です。 次々に新しい機能が追加される反面、ネット上に公開されている記事もすぐにOutDatedなものになっています。この文書もすぐにOutdatedなものになってしまうと思いますが現在(2023年5月)の最新バージョン13.4のドキュメント

Node.js の Express で TypeScript 環境を構築するための手順を解説しています。TypeScript の開発環境を構築するためには複数のパッケージのインストールや設定が必要となります。一括で設定を行うのではなくそれぞれのパッケージの役割を確認しながら設定を行なっていくので Express に限定されてない TypeScript の基礎的な知識を深めることもができます。 プロジェクトの作成 Node.js の Express の開発環境を構築するためのプロジェクトの作成を行います。プロジェクトは任意の名前をつけることができますがここでは node-express-ts という名前をつけています。 % mkdir node-express-ts 作成した node-express-ts に移動して npm int -y コマンドで package.json ファイルを作

Next.js が 14 にバージョンアップされ Server Actions が Stable になりました。本書は Server Actions の 13 のアルファの時の動作確認の内容ですが Next.js のバージョン 14.0.1 でも動作することを確認しました。 Server ActionsはNext.jsのバージョン13.4で新たに追加された機能です。Sever Actionsを利用することでfetch関数などを利用したクライアント(ブラウザ)コードを記述することなくサーバ上でデータ更新(作成、更新、削除)を行うことができます。データ更新に関係するコードがクライアント側で必要なくなるためクライアントがダウンロードするJavaScriptコードの削減につながります。さらにプログレッシブエンハンスメントなフォームを作成することができるためJavaScriptが利用できない環境でも

API Tokenの基本 API Tokenは非常にシンプルな仕組みなのでわかりやすいですコードを確認する前に大まかな流れを確認しておきます。 Token保存用のテーブルの作成ユーザ毎にTokenを作成しToken保存用テーブルに保存api.phpファイルに設定したルーティングにmiddlewareでsanctumを設定作成したTokenをheaderに設定してリクエストを送信送られてきたTokenが保存されているTokenと一致するかチェック(有効期限のチェック含む)Tokenに問題なければそのまま処理へ、Tokenに問題がある場合はJSONでエラーメッセージを返却 Laravelのソースコードを読む場合、処理がいくつものファイルにまたがっているため混乱する箇所があるかもしれないので注意してください。 Laravel9での動作確認 Laravel環境の構築 Laravel Sanctum

本文書ではブラウザを利用したテスト自動化ツールを利用した経験がない人、これから Playwright を使ってみたいという人を対象に Playwright の基本的な操作方法について説明を行っています。Vue と React のプロジェクトでの Playwright の利用方法についても後半に説明しています。 Playwrightとは Playwright は WEB アプリケーションのテストを自動化するオープンソースのテストツールです。Playwright ではユーザが実際にブラウザを利用して WEB アプリケーションの操作を行う代わりにプログラムを通してブウラザ(Chromium、Firefox、WebKit)を動かすことで WEB アプリケーションのテストを行います。ツールを利用しない場合は機能を追加/更新する度に開発者がブラウザでページを開き動作確認を行う必要があります。Playw

最新版のLaravel11でも利用することができ、Next.jsの最新版のバージョン14のapp Routerにも対応しています。 公開当時はLaravel9で動作確認を行いましたが最新版のLaravel11で動作確認を行い文書のリライトを行っています。 バックエンドの設定(Laravel) LaravelはAPIを提供するバックエンドサーバとして設定します。 Laravelプロジェクトの作成 Laravelをインストールを行う前にNext.jsをインストールするフロントエンド用のディレクトリとバックエンド用のLaravelのディレクトリをわけるために任意の場所にlaravel-nexjsディレクトリを作成します。 laravel-nextjsディレクトリを作成後にlaravel-nextjsディレクトリに移動してcomposerコマンドを利用してLaravelプロジェクトの作成を行います

本文書ではVue.jsのフルスタックフレームワークであるNuxt 3を使ってアプリケーションの開発を効率的に行いたいという人を対象に Nuxt 3についての解説をできるかぎり簡単なコードを利用しながら行っています。Vue.jsのComposition APIのコードが理解できることを前提に記述しているのでVue.jsを使って記述したコードの詳細について解説は行なっていませんが、本文書を読み終えるとNuxt 3の全体像と基礎的な理解を深めることができます。 Nuxtを利用したファイルのアップロードについては別の記事で公開しています。 Nuxt 3とは NuxtはVue.jsをベースに開発されたフルスタックのWEBフレームワークです。 Vue.jsはUI(User Interface)を担当しますがNuxtではVue.jsが持つUIに関わる部分だけではなくSSR(サーバサイドレンダリング)を含

本文書はこれまでSvelteを利用した経験がない人を対象にした入門的な文書です。Svelteのすべての機能の説明を行なっているわけではありませんが利用頻度の高そうな機能を中心にシンプルなコードを利用して解説を行なっているので本文書を読み進めるとSvelteの基本的な機能を理解することができます。 ライブラリの追加を行うことなく利用できるTransition、Animationやwritable storeによるコンポーネント間のデータの共有(状態管理)の設定についても解説しています。 Svelteについて SvelteはWEBアプリケーションのUI(ユーザインタフェイス)を効率的に開発するためのJavaScriptフレームワークです。JavaScriptのフレームワークと言えば最近ではReact, Vueと並んで紹介されるほど人気のあるフレームワークになっています。 ではSvelteとRe

Laravel9のドキュメントには記述されていませんがLaravel9でもLaravel UIパッケージを利用することができます。 Laravel UIはLaravelのバージョン6から登場しFrontend Scaffoldingとしてドキュメントにインストール方法が記述されていましたがLaravel8からJetstream, Breezeが登場しドキュメントには記載されなくなりました。 Laravel9で認証機能をすぐに利用しようと思った場合にはLaravel BreezeまたはLaravel Jetstreamパッケージをインストールする必要があります。Breezeパッケージを利用するためにはInertia.js(Vue, React), Apline.jsまたはLivewire、JetsreamパッケージではInertia.js(Vue)またはLivewireの知識が必要となります

本文書はReactベースのフレームワークRemixの入門書向けの内容です。Reactの基礎知識を持っていることを前提にしているためReactに関する詳細な機能説明は行っていませんがコードでつまずかないようにJavaScriptを利用したシンプルなコードを利用しています。Remixの基本的な機能の説明(Remixで利用できるHook)を中心に説明を行なっています。 現在のRemixのバージョンはv2ですが本文書はv1で動作確認を行っています。 Remixとは RemixはReactライブラリをベースにしたフルスタックフレームワークで、Sever Side Rendering(サーバーサイドレンダリング)を基本としています。ルーティングについてはReact Router v6が利用されているのでNested RouteやReact Router v6で利用できるAPIはRemixでも利用するこ

本文書ではMarkdownを利用したブログサイトの構築をReactベースのフレームワークであるNext.jsを利用して行なっています。Next.jsとMarkdownファイルを利用して記事一覧、ブログ記事ページを表示するだけの手順はネット上に多数公開されています。しかし記事ページを表示させること以上の内容になると個々の機能についての記事はありますが複数の追加機能の設定方法を一度に記述した記事を見つけるのは難しいです。本文書ではSEOのためのheaderタグ、目次、Link、 Imageコンポーネント、コードハイライト、ページネーションの設定などブログを公開する上で実装しておきたい機能が含まれるブログサイトをスクラッチから作成していきます。 MarkdownのブログではHTMLへの変換が必須でライブラリは複数存在しますが本文書ではremark, rehypeを利用しています。他のライブラリに

現行バージョン10(執筆時は9)のLaravelのドキュメントに記載されているのは(1), (2)の方法です。本文書では(2)のLaravel環境下にInertia.jsを利用する方法について説明を行っています。Laravel BreezeやLaravel Jetstreamを利用することでInertia.js + Vueを利用することができますが本文書ではパッケージを利用しない方法を中心に解説しています。 macOSにLaravel 9をインストールして動作確認を行っています。 Laravelプロジェクトの作成 Inertia.jsをインストールする前にLaravelプロジェクトを作成する必要があります。Inertia.jsではJavaScriptを利用するため事前にNode.jsがインストール済みである必要があります。 本文章ではLaravelプロジェクトの作成はlaravel new

Node.jsのExpressを利用したアプリケーションの開発時にhttpsを利用しないといけない制約が出た場合のSSLの設定方法について説明を行っています。 動作確認は、macOSのBig Surで行っています。Node.jsが事前にOSにインスールされていることが前提となっています。 Expressではhttpsを利用するための機能は備わっていますが、httpsを利用するために秘密鍵と自己証明者が必要となります。秘密鍵と証明書を作成するためopensslコマンドを実行しますが、opensslコマンドはmacOSの中に入っています。 Expressの環境構築 httpsサーバとして設定を行う前にExpressを使ってhttpサーバを構築します。 任意の名前のフォルダを作成(ここではmyapp)を作成し、フォルダ内でnpm init -yコマンドを実行しpackage.jsonファイルを作

Piniaとは PiniaはVue用のState Managementライブラリで複数のコンポーネントでデータを共有するために利用することができます。アプリケーションの中にStoreという場所を準備しその中にコンポーネント間で共有の必要があるデータを保存していきます。またデータを保存するだけではなくデータを更新する機能も備えています。 Piniaによるデータ管理のイメージ Vueプロジェクトの作成 Piniaを利用するためにVueのプロジェクトの作成を行います。本文書ではViteでプロジェクトを作成後にnpmコマンドでpiniaのインストールを行います。 viteではなくnpm create vue@latestコマンドを利用するとプロジェクトの作成と同時にpiniaをインストールすることもできます。 Viteによるインストール npm create viteコマンドを実行してVueのプロ

アプリケーションを構築する場合にはデータを保存するため必ずデータベースが必要となります。データベースを効率的に管理し、簡単に操作を行うためのツールがPrismaです。本文書はこれまでPrismaを利用したことがない人を対象にPrismaを利用する上での基本的な操作と設定方法について説明を行なっています。 Prismaはサーバからデータベースを操作する際にサーバとデータベースの間を仲介する役目を持っておりデータベースを操作する際はどのデータベースを利用しているか意識することなく共通のオブジェクトメソッドを利用することができます。本文書ではサーバにExpress.jsを利用して最初はデータベースのSQLiteを利用します。SQLiteで一通り動作を確認した後にクラウドサービスのSupabase(PostgreSQL)に変更します。データベースの変更を行なってもSQLiteで行なった処理と同じ操

本文書は今後GraphQLを利用する機会があるかもしれないのでGraphQLを一通り一度に学習したいというGraphQLの入門者の方に向けて作成したチュートリアルです。 GraphQLのサーバの構築(Apollo Server)、GraphQLサーバからREST APIを使って外部リソースからのデータ取得(JSONPLACEHolder)、データベースの接続(Prisma)、クライアント(React, Vue)からGraphQLサーバにアクセスしてデータを取得するまで流れ実際に手を動かしながら動作確認を行なっていくのでGraphQLの全体像を掴むのに必要な基本的な知識を習得することができます。 GraphQLの本質とは離れた場所でできるだけ悩まないようにシンプルな構成で動作確認を行なっています。 GraphQLとは GraphQLという名前がどのような意味を持っているか確認していきます。G

Reactを学び始めてコードを書けるようになったので記述したコードのテストを実行してみたいという人を対象にReactでのテスト方法について説明を行っています。 Testing Libraryとは？Jestとは？ Reactでのテストを行う前にテストに利用するライブラリについて説明を行っておきます。 ReactアプリケーションのテストはTesting Library、Jestを利用して行うことができます。Testing LibararyもJestもReactに限定されたライブラリではありません。VueやSvelteを含めた他のフレームワークでも利用することができます。Testing LibararyではReact用のReact Testing Libraryが提供されておりcreate-react-appを利用してReactプロジェクトを作成すると自動でインストールされます。Tesing L

NextAuth.jsとは NextAuth.jsはNext.jsの認証に特化したライブラリです。本書ではOauthを利用した認証の設定方法について解説していますがOauth認証にのみ特化したライブラリではないので従来のメールアドレスとパスワード認証、メールアドレスを使ったパスワードレス認証(Magic Link送信)にも対応しています。 Next.jsプロジェクトの構築 NextAuth.jsの動作確認を行うためにNext.jsのプロジェクトの作成を行います。npm create-next-app@latestコマンドを実行するとプロジェクトの名前を聞かれるので任意の名前をつけてください。 % npx create-next-app@latest Need to install the following packages: create-next-app Ok to proceed?

React Hook FormはReat用のフォームバリデーションライブラリです。input要素に入力した値を取得するだけではなくバリデーション機能なども備えており簡単にフォームを実装することができます。入力フォームの作成が嫌いな人もライブラリの力を借りることでフォーム作成の手間を軽減することができます。バリデーションについてはReact Hook Form自身も機能を備えていますがバリデーションライブラリのZod, Yupを利用することも可能でそれらのライブラリを利用した場合の設定方法についても説明しています。 本文書ではすぐに実践で活用できるようにバリデーションやエラーメッセージの表示などフォームを作成する上で必要な機能を中心にシンプルなコードを利用して説明しています。 利用する React Hook Form ライブラリのバージョンは 7 です。React のバージョンは 18.2.

高速なコンテンツ重視の WEB サイトを構築したいという人向けに新たな Static Site Generator(静的サイトジェネレーター:SSG)が登場しました。その名前は Astro。Next.js や Remix などの React フレームワークと同様に注目度の高いフレームワークの一つです。ブログサイトやオープソースのサイト(例：create-t3-app)などで利用され活発に更新が行われているので 2024年8月20日最新のバージョンはのAstro4.14.2です。 リリース当初は Static Site Generator(静的サイトジェネレーター:SSG)として登場した Astroですが現在はSSR(Sever Side Rendring)も備え, Static Site Generatorではなくフルスタックフレームワークとして開発が行われています。 本文書では公開当初は

エディターはVisual Studio Code(VSCode)を利用して拡張機能でVolarをインストールしてWindowsで動作確認を行っています。 TypeScript環境の構築 Vue3はTypeScriptで記述されていることからVue3でTypeScriptを利用したい場合、公式のプロジェクト作成ツールを利用することで TypeScriptの開発環境を簡単に構築することができます。 現在Vueプロジェクトを作成する際に推奨されている方法ではnpm init vue@latestコマンドを実行してプロジェクトを作成します。コマンドを実行すると内部でcreate-vueが実行され、TypeScriptを含めVueプロジェクトで利用頻度の高い機能を選択してインストールすることができます。 npm init vue@latestコマンド実行後に選択できる機能については下記の文書で公開し

create-vueはVue公式のVueプロジェクト作成ライブラリです。npm create vue@latest(npm init vue@latest)コマンドを実行することでVueプロジェクトの骨組み(scaffolding)の作成とVueのアプリケーション構築に欠かすことできない機能を選択してプロジェクトに追加を行うことができます。本文書はVueの入門者の人がcreate-vueを利用してプロジェクトを作成する際に追加できるすべての機能がどのような役割を持っているのか理解できることを目的にしています。各機能の理解が進むことで機能追加時に迷うことなく自信を持って機能の選択を行うことができます。create-vueではビルドツールとして現在人気急上昇中のViteが利用されているのでViteについて動作確認をしながら説明を行なっているので開発環境と本番環境でのビルドツールの違いなども理解

API RoutesはServerless Functions API Routesに記述したコードはserverless functions(サーバレス)としてデプロイされます。サーバレスという名前からサーバがないというイメージを持つかもしれませんがserverless functionsを利用するとサーバを管理する必要がなくなりserverless functionsを提供するクラウドプロバイダーがサーバを管理してくれます。そのため開発者はserverless functionsに記述するコードの作成のみに集中することができます。またserverless functionsは外部からリクエストがあった場合のみ起動を行い実行して停止するというサイクルを持っているためサーバを常時起動しておく必要はなくリエクストがある回数のみ起動/実行/停止を繰り返すことになります。 Next.jsプロジェ

Cloudflare WorkersではServerlessな実行環境でJavaScriptのコードを実行することができます。SeverlessということでJavaScriptを実行するサーバなどのインフラの準備、メンテナンスはCloudflareが行うので開発者はコードの作成のみに集中することができます。コードの作成後にデプロイした(Cloudflareにコードをアップロード)コードはある特定の場所にあるデータセンターのサーバに保存されるのではなく世界中に分散するCDNのエッジにデプロイされるため世界中のどこからアクセスしても高速に応答することができます。 本文書では初めてCloudflare Workersを使う人を対象にアカウントの作成からデプロイの方法、シンプルなコードを使ってCloudflareの基本的な利用方法の説明を行なっています。Servelessな環境を利用した経験がない

StorybookはアプリケーションからUIコンポーネントを切り離し、独立した状態でコンポーネントの開発、動作確認やテストを行うために利用することができるUIツールです。コンポーネントが持つpropsを変更することでブラウザ上でどのような表示になるかプレビューを行うことで動作確認することができます。この説明が最初は”?”の人でも本文書では公式のドキュメントよりもさらにシンプルなコードを利用して動作確認を行なっているのでStorybookの基礎的な利用方法や機能を短時間で理解することができます。 Storybookが利用できるJavaScriptのフレームワーク/ライブラリにはReact以外にもVue.js, React Native, Svelte, Amber, Angularなどがありますが本文書ではReactを利用しています。本文書で動作確認を行なっているStorybookのバージョ

この文書を読んでいるということはJavaScriptの初心者の方でbindメソッドがどのようなものか理解しようとしている人、bindとthisとの関係がわからないという人またはthis自体の理解が曖昧な人ではないでしょうか。特にthisの理解が曖昧な人は多いと思うのでこの機会にしっかりと学んでおきましょう。 bindを学ぶ前にbindとは何かまずMDN Web Docsに記述されている内容を確認してみましょう。 bindメソッドが理解できていない時は上記の説明を読んでも何を言っているのかわからないと思います。今意味がわからなくてもbindはthisと関係していること、bindを利用することである関数から新しい関数を作成することができることの2つを頭に入れて下記の文書を読み進めていけば最終的には上記の意味が掴めるかと思います。bind、thisを説明する際に抽象的でわかりにくい単語が使われて