Skip to content

setup.md

Latest commit

 

History

History
109 lines (69 loc) · 5.91 KB

setup.md

File metadata and controls

109 lines (69 loc) · 5.91 KB

Hato フロントエンド開発環境構築

Hatoのフロントエンドページを開発するための環境の構築ガイドです。

必要なもの

  • Node.js (v18 以降)
  • Git
  • GitHubアカウント
  • 任意のテキストエディタ (VSCode、vim 等)

構築手順

Node.js のインストール

Node.js公式サイトから、Node.js をダウンロード・インストールしてください。

  • LTS、Current の2つがありますがどちらでも大丈夫です。

このほか、mise、Volta などの開発環境管理ツールを使用しても大丈夫です。

yarn の有効化

Hato ではパッケージマネージャに yarn を使用しているため、yarn を有効化します。

Windows の場合、PowerShell またはコマンドプロンプトを開き、以下を実行してください。
macOS、Linux の場合はターミナルを開き以下を実行してください。

corepack enable

Git のインストール

Git公式サイトから、Git をダウンロード・インストールしてください。

  • インストール時に様々なオプションがありますが、全てデフォルトでも大丈夫です。
  • コミットメッセージを入力するエディタの選択画面では自分が使っているエディタを選ぶと便利です。

GitHub リポジトリのフォーク

GitHub 上の Hato のリポジトリのページにアクセスし、リポジトリを自分のアカウントにフォークします。

Tip

リポジトリ (Repository) とは、プロジェクトのソースコード、変更履歴が保存される場所のことです。
大抵の GitHub のリポジトリにおいては、プロジェクトにおいて最上層に位置するフォルダのことを指します。

Tip

フォーク (Fork) とは、GitHub 上に存在する他のユーザーのリポジトリを、自分のアカウント上にコピーすることです。
フォークを行うことで、フォーク元のリポジトリに影響を与えずにファイルを編集することができ、編集した内容をレビューした上でフォーク元に反映させることができるようになります（プルリクエスト）。

リポジトリのクローン

Git を使い、GitHub 上でフォークした Hato のリポジトリをローカルにクローンします。

Tip

クローン (Clone) とは、GitHub上に存在するリポジトリのデータを、ローカル環境（PC 上）にダウンロードすることです。 Git と GitHub を利用した開発では、GitHub 上のリポジトリは「リモートリポジトリ」、PC 上のそれは「ローカルリポジトリ」と呼び、それぞれを同期させながら開発を行います。

git clone https://github.com/[GitHubのユーザー名]/hato.git

クローンが完了すると、現在のワーキングディレクトリに hato という名前のディレクトリが作成されます。cd hato で、Hato のディレクトリに入ります。

依存関係のインストール

Hato は主に以下のライブラリ群を用いて作成されています。

  • TypeScript
  • Vite
  • React
  • Chakra UI (v2)
  • Jotai
  • Tanstack Query

これらのライブラリは依存関係 (Dependencies) と呼ばれ、Hato の開発環境を整えるためにはこれらを全てローカルにインストールする必要があります。
この作業を自動で行うのが、先ほど有効化した yarn です。

Hato のルートディレクトリで、以下のコマンドを実行してください。（ライブラリの依存関係はかなり複雑なため、実行には数分かかると思います）

yarn install --frozen-lockfile

Note

依存関係は package.json というファイル内に記述されています。このファイルは基本的に yarn が管理しているため、（一部を除いて）手動で書き換えることはほぼありません。

コマンドの実行が終われば、開発の準備は概ね完了です。

開発用サーバーの起動

先述の通り、Hato は TypeScript と React を用いて作成されています。そのためソースコードの記述は JSX (TSX) を用いて行いますが、そのままではブラウザが読み込むことはできないため、編集したファイルを純粋な JavaScript に変換してブラウザに渡す必要があります。その作業を自動で行うのが vite です。

以下のコマンドを実行して、Vite の開発サーバーを起動します。

yarn dev

Tip

yarn 等のパッケージマネージャーには scripts という機能があり、特定のコマンドやシェルスクリプトを package.json 内に記述しておくと、そのコマンドのエイリアス（ショートカット）を yarn 上で利用できるようになります。
上の yarn dev の例では、package.json に dev のエイリアスとして vite dev を指定しているため、yarn からViteの開発サーバーを起動しています。

サーバーの起動後、ブラウザで http://localhost:3000 にアクセスすると、Hatoのトップページが表示されます。そのページが、今 PC 上で稼働している開発サーバーがローカルのソースコードをリアルタイムで変換したページです。

ファイルの編集

開発サーバーが起動したら、src ディレクトリ内にあるソースコードを編集すると、リアルタイムで編集がブラウザでプレビューできるようになります。src ディレクトリ内のディレクトリ構成などについては、Hato リポジトリの README.md を参照してください。