Windows 上で Gatsby.js を使ってみる

Windows 上で Gatsby.js Web フレームワークをインストールして稼働させるためのガイドです。

Gatsby.js は、React.js に基づいた静的サイト ジェネレーター フレームワークであり、Next.js などのサーバー レンダリングとは異なります。 静的サイト ジェネレーターでは、ビルド時に静的な HTML が生成されます。 サーバーは必要ありません。 Next.js は、(新しい要求が送信されるたびに) ランタイムに HTML を生成し、サーバーに実行を要求します。 Gatsby では (GraphQL を使用して) アプリでデータを処理する方法も指示しますが、これに対して、Next.js や Nuxt.js ではその決定がユーザーに任されています。

React および React を基にしたその他の JavaScript フレームワークの詳細については、「React の概要」ページを参照してください。

前提条件

このガイドでは、読者が Node.js 開発環境を設定する手順を既に完了していることを前提にしています。これには以下が含まれます。

• Windows 10 (バージョン 1903 以降、ビルド 18362 以降) または Windows 11 の最新バージョンをインストールします
• Linux ディストリビューション (Ubuntu など) を含む Linux 用 Windows サブシステム (WSL) をインストールし、WSL 2 モードで実行されていることを確認します。 これは PowerShell を開き、「wsl -l -v」と入力することによって確認できます。
• WSL 2 上に Node.js をインストールします。これには、バージョン マネージャー、パッケージ マネージャー、Visual Studio Code、および Remote Development 拡張機能が含まれます。

NodeJS アプリを使用する場合は、パフォーマンス速度の向上、システム コールの互換性の向上、Linux サーバーまたは Docker コンテナーを実行する場合の再利用のために、Linux 用 Windows サブシステムを使用することをお勧めします。

重要

WSL を使用して Linux ディストリビューションをインストールすると、ファイルを格納するためのディレクトリが作成されます\\wsl\Ubuntu-20.04 (Ubuntu-20.04 が、使用している Linux ディストリビューションに置き換えられます)。 Windows ファイルエクスプローラーでこのディレクトリを開くには、WSL コマンド ラインを開き、cd ~ を使用してホーム ディレクトリを選択します。次に、explorer.exe . コマンドを入力します。NodeJS をインストールしたり、使用するファイルをマウントされた C ドライブ (/mnt/c/Users/yourname$) に保存したりしないように注意してください。 そのようにすると、インストールとビルドにかかる時間が大幅に長くなります。

Gatsby.js のインストール

Gatsby.js プロジェクトを作成するには:

1. WSL ターミナルを開きます (つまり Ubuntu)。

2. 新しいプロジェクト フォルダーを作成し (mkdir GatsbyProjects)、そのディレクトリに移動します (cd GatsbyProjects)。

3. npm を使用して Gatsby CLI をインストールします (npm install -g gatsby-cli)。 インストールされたら、gatsby --version を使用してバージョンを確認します。

4. Gatsby.js プロジェクトを作成します (gatsby new my-gatsby-app)。

5. パッケージがインストールされたら、新しいアプリ フォルダーにディレクトリを変更してから (cd my-gatsby-app)、code . を使用して VS Code で Gatsby プロジェクトを開きます。 これにより、VS Code のエクスプローラーを使用して、アプリ用に作成された Gatsby.js フレームワークを確認できます。 VS Code によって、アプリが WSL-Remote 環境で開かれたことに注意してください (VS Code ウィンドウの左下にある緑色のタブに示されています)。 これは、Windows OS で編集のために VS Code を使用している間、アプリが引き続き Linux OS 上で実行されていることを示します。

   

6. Gatsby がインストールされたら、次の 3 つのコマンドを覚えておく必要があります。

   • gatsby develop。開発インスタンスをホット リロードで実行します。
   • gatsby build。製品版ビルドを作成します。
   • gatsby serve。アプリを実稼働モードで起動します。

   VS Code に統合された WSL ターミナルを開きます ([表示] > [ターミナル])。 ターミナル パスがプロジェクト ディレクトリ (~/GatsbyProjects/my-gatsby-app$) を指していることを確認してください。 その後、gatsby develop を使用して、新しいアプリの開発インスタンスを実行してみてください。

7. 新しい Gatsby プロジェクトのコンパイルが完了すると、ターミナルが表示されます。You can now view gatsby-starter-default in the browser. http://localhost:8000/。 この localhost リンクを選択して、Web ブラウザーに組み込まれた新しいプロジェクトを表示します。

Note

ターミナル出力からは、"ブラウザー内 IDE である GraphiQL を表示して、サイトのデータとスキーマを調査する: http://localhost:8000/___graphql"こともできると通知されることがわかります。GraphQL では、Gatsby に組み込まれた自己文書化 IDE (GraphiQL) に API が統合されます。 サイトのデータやスキーマの調査に加えて、クエリ、変異、サブスクリプションなどの GraphQL 操作を実行できます。 詳細については、GraphiQL の概要に関するページを参照してください。

8. VS Code エディターで src/pages/index.js ファイルを開きます。 ページ タイトル <h1>Welcome to <b>Gatsby!</b></h1> を見つけ、それを <h1>Hello <b>World!</b></h1> に変更します。 Web ブラウザーを引き続き http://localhost:8000 で開いたまま、変更を保存し、ホット リロード機能が自動的にコンパイルされたことに注意して、ブラウザーで変更を更新します。

   

Gatsby アプリで VS Code のデバッガーを使用するには、F5 キーを押すか、またはメニュー バーの [表示] > [デバッグ] (Ctrl+Shift+D) および [表示] > [デバッグ コンソール] (Ctrl+Shift+Y) に移動します。 デバッグ ウィンドウで歯車アイコンを選択すると、デバッグ セットアップの詳細を保存するための起動構成 (launch.json) ファイルが作成されます。 詳細については、VS Code のデバッグに関するページを参照してください。

Gatsby の詳細については、Gatsby.js のドキュメントを参照してください。