開発環境の構築をしよう

Gatsbyサイトの構築を始める前に、いくつかの基本となるウェブ技術に精通し、必要なソフトウェアツールがすべてインストールされていることを確認して下さい。

コマンドラインに慣れる

コマンドラインは、コンピュータ上でコマンドを実行するためのテキストベースのインターフェースです。また、ターミナルと呼ばれることもよくあります。このチュートリアルでは、この両方の互換性を持っています。

これは、MacのFinderやWindowsのExplorerを使うのと似ています。Finder と Explorer はグラフィカル・ユーザー・インターフェース (GUI) の略です。コマンドラインは、コンピュータを操作するための強力なテキストベースの方法です。 お使いのコンピュータのコマンドラインインターフェース(CLI)を探して開いてみてください。使用しているオペレーティングシステムに応じて、Macの説明書、Windowsの説明書、またはLinuxの説明書を参照してください。

Note:

コマンドラインに慣れていない場合、コマンドを「実行する」とは、「コマンドプロンプトに所定の命令を書き込んでEnterキーを押す」ことを意味します。コマンドは、node --version のようなハイライトされたボックスに表示されますが、すべてのハイライトされたボックスがコマンドであるとは限りません。コマンドが必要である場合は、実行/命令しなければならないものとして表示されます。

適切なオペレーティングシステムにNode.jsをインストールする

Node.jsは、JavaScriptのコードをWebブラウザの外で実行できる環境です。GatsbyはNode.jsで構築されています。Gatsbyを使用するためには、コンピュータに最新バージョンがインストールされている必要があります。npmはNode.jsにバンドルされているので、もしnpmを持っていなければ、Node.jsも持っていない可能性があります。

Macの場合

MacにGatsbyとNode.jsをインストールするには、Homebrewを使うことをお勧めします。最初のうちにちょっとしたセットアップをしておくと、後々の頭痛の種から救うことができます。 パソコンにHomebrewをインストールしたり、検証したりする方法
  1. ターミナルを開きます。
  2. Homebrewがインストールされているか確認してください。Homebrew」とバージョン番号が表示されているはずです。
brew -v
  1. そうでない場合は、Homebrewをダウンロードして、説明書を見ながらインストールしてください。
  2. Homebrewをインストールしたら、手順2を繰り返して確認します。

XCODEコマンドラインをインストールする

  1. ターミナルを開きます。
  2. 以下のコマンドを実行します。
xcode-select --install
Note:

失敗した場合は、Appleの開発者アカウントでサインインした後、Appleのサイトから直接ダウンロードしてください。

  1. インストールを開始するように促された後、再びダウンロードするツールのソフトウェアライセンスを受け入れるように促されます。

NodeJSのインストール

  1. ターミナルを開く
  2. Homebrewでノードをインストールします。
brew install node
Homebrewでインストールしない場合は、Node.jsの公式サイトからNode.jsの最新版をダウンロードし、ダウンロードしたファイルをダブルクリックしてインストール作業を行います。

その他のOSインストール

ごめんなさい、普通わかるだろ!!と言うことでMacのインストールだけ紹介しました。
Win Linuxでインストールされる方はこちらを参照して下さい。
その他のOSの人

Install Git

Gitは、小規模なプロジェクトから超大規模なプロジェクトまで、あらゆるものを迅速かつ効率的に処理するために設計された、無料でオープンソースの分散型バージョン管理システムです。
Gatsbyの「スターター」サイトをインストールすると、Gatsbyは裏でGitを使ってスターターに必要なファイルをダウンロードしてインストールします。
最初のGatsbyサイトをセットアップするにはGitをインストールする必要があります。
Git をダウンロードしてインストールする手順は、お使いのオペレーティングシステムによって異なります。

お使いのシステムのガイドに従ってください。
Gitインストール方法はこちら

Gatsby-CLIの使い方

Gatsby CLI ツールを使用すると、Gatsby を搭載した新しいサイトを素早く作成したり、Gatsby サイトを開発するためのコマンドを実行したりすることができます。これは公開されているnpmパッケージです。

Gatsby CLIはnpm経由で利用できるので、グローバルに実行してインストールする必要があります。
npm install -g gatsby-cli
Note:

Gatsbyをインストールして初めて実行すると、Gatsbyコマンドで収集されている匿名の使用データを通知する短いメッセージが表示されます。

利用できるコマンドを参照する。
gatsby -help
Note:

パーミッションの問題でGatsby CLIを正常に実行できない場合は、パーミッションの修正に関するnpmのドキュメントこのガイドをチェックしてみてください。

Gatsbyサイトを制作する

これで、Gatsby CLIツールを使用して最初のGatsbyサイトを作成する準備が整いました。ツールを使用して、特定のタイプのサイトの作成をより早く進めるのに役立つ「スターター」(部分的に構築されたサイトで、いくつかのデフォルト設定があります)をダウンロードすることができます。ここで使用する「Hello World」スターターは、ギャツビーサイトに必要な基本的なものが含まれたスターターです。
  1. ターミナルを開く
  2. Gatsbyスターターを生成する
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
何が起きた?:

newは、新しいギャツビープロジェクトを作成するためのコマンドです。 ここで、hello-worldは任意のタイトルです。CLIツールは、新しいサイトのコードを "hello-world "という新しいフォルダに配置します。 最後に、指定したGitHubのURLは、使用したいスターターコードを保持するコードリポジトリを指します。

  1. ワークフォルダに移動
cd hello-world
Note:

これは「ディレクトリ (cd) を "hello-world" サブフォルダに変更したい」というものです。サイトのコマンドを実行したいときはいつでも、そのサイトのコンテキストにいる必要があります (つまり、あなたのターミナルはサイトのコードがあるディレクトリを指している必要があります)。

  1. 開発モードを起動
gatsby develop
Note:

このコマンドは開発サーバーを起動します。開発環境のローカル(インターネットに公開されていない、自分のコンピュータ上)で、新しいサイトを見たり、対話したりすることができます。

ローカルアドレスを確認

新しいタブをブラウザで開いて右のURLを入力します。http://localhost:8000/
おめでとう これがあなたの初めてのGatsbyサイトですね! 🎉

開発サーバーが稼働している限り、ローカルの http://localhost:8000/ にアクセスできるようになります。これは、gatsby developコマンドを実行して開始したプロセスです。このプロセスの実行を停止するには、ターミナルウィンドウに戻り、"control "キーを押しながら "c" (ctrl-c)を押してください。再度起動するには、gatsby developを再度実行してください!
Note:

vagrantのようなVMセットアップを使っている場合や、ローカルのIPアドレスをリッスンしたい場合はgatsby develop --host=0.0.0.0.0を実行してください。これで開発サーバはhttp://localhostとローカルIPの両方をリッスンします。

コードエディターのセットアップ

コードエディタは、コンピュータコードを編集するために特別に設計されたプログラムです。そこには多くの素晴らしいものがあります。

VSCodeをダウンロード

Gatsbyのドキュメントには、VS Codeで撮影されたスクリーンショットが含まれていることがありますので、まだお好みのコードエディタをお持ちでない場合は、VS Codeを使用することで、チュートリアルやドキュメントのスクリーンショットと同じように画面が表示されるようになります。VS Codeを使用することを選択した場合は、VS Codeのサイトにアクセスして、お使いのプラットフォームに適したバージョンをダウンロードしてください。

Prettier pluginをインストール

また、エラーを回避するためにコードをフォーマットするツールである Prettier の使用もお勧めします。
Prettier VS Code プラグインを使用して、エディタで直接 Prettier を使用することができます。

  1. VS Codeで拡張機能ビューを開きます(ビュー⇒拡張機能)。
  2. Prettier - Code formatter」を検索します。
  3. インストール」をクリックします。
    (インストール後、拡張機能を有効にするために VS Code を再起動するように促されます。VS Code の新しいバージョンでは、ダウンロード後に自動的に拡張機能が有効になります)。

次の手順はなんだい?

要約すると、このセクションでは さて、ギャツビーのビルディングブロックを知るために移動します。
チュートリアルを進める >>