Windows で Gatsby.js を始めましょう

Gatsby.js Web フレームワークをインストールし、Windows で起動して実行するのに役立つガイドです。

Gatsby.js は、Next.jsのようにサーバーでレンダリングされるのではなく、React.jsに基づく静的サイト ジェネレーター フレームワークです。 静的サイト ジェネレーターは、ビルド時に静的 HTML を生成します。 サーバーは必要ありません。 Next.js は実行時に HTML を生成し (新しい要求が出るたびに)、サーバーの実行を要求します。 また、Gatsby は (GraphQL を使用して) アプリ内のデータを処理する方法を指示しますが、Next.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、リモート開発拡張機能が含まれます。

パフォーマンスの向上、システム呼び出しの互換性、および Linux サーバーまたは Docker コンテナーの実行時のパロディのために、NodeJS アプリを使用する場合は、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/が表示されます。 Web ブラウザーに組み込まれている新しいプロジェクトを表示するには、この localhost リンクを選択します。

注

ターミナルの出力には、"サイトのデータとスキーマを調べるために、ブラウザー内 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で開いたまま、変更を保存します。すると、ホットリロード機能によってブラウザー内で変更が自動的にコンパイルされ、更新されます。

   で実行されています

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

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