このサイトはcorepackを使用して環境を統一しております。
ドキュメント執筆時点のNode.JSでは追加インストールは不要なはずですが、以下のコードにて手動でインストールできます。
インストール済みの場合(corepack --versionが出来る場合)は「インストールしたら」まで飛ばしてください。
※古すぎるバージョンには同梱されていませんが、そもそも互換性がないと思われるので問題ありません。
※将来的にcorepackはNode.JSと分離される予定です。分離後は追加のインストールが必要になるだけで、廃止されるわけではありません。
# 既存のグローバルインストール済みのパッケージマネージャーの削除
# npmはそのままインストールしていてください。
npm uninstall -g pnpm yarn
# corepack のインストール
# corepack 本体をインストールします。
npm install -g corepackcorepackをインストールしたら
以下のコマンドでcorepack経由でパッケージマネージャーを使用出来るようになります。
# corepack の有効化
corepack enable
# [省略可] npmコマンドへの明示的な適用を行う場合は次も実行
corepack enable npm
# [省略可] corepack でパッケージマネージャーを準備
## npm [適用した場合のみ]
corepack prepare npm@latest --activate
## yarn
corepack prepare yarn@latest --activate
## pnpm
corepack prepare pnpm@latest --activate※corepackを使用する代わりにpnpmをグローバルにインストールして使用することも出来ます。
まず、依存しているライブラリをインストールします。
ビルドするだけであれば、本番環境セクションのビルドでbuild.shやbuild.batを使用することでこの手順をスキップできます。
pnpm install --frozen-lockfileこの時点でエラーが発生する場合はソースに何らかの問題があるかもしれません。
※npmやyarnを使用してパッケージをインストールすると予期しない不具合が発生したり、パッケージマネージャーがエラーで動作しないことがあります。必ずpnpmをお使いください。
必要に応じてプロジェクトのルートにある.env.exampleを.envとしてコピーし、設定を変更してください。
設定は 設定について をご確認ください。
http://localhost:3000で開発サーバーを起動させるには以下のコマンドを打ちます。
pnpm run dev基本的に自動再読込されますが、開発サーバーはSSG(Static Site Generation)ではありませんので、本番環境用のデータをPreviewしてください。
本番環境は次のセクションにあります。
本番環境用にサイトをビルドするには以下のコマンドを実行します
# SSGでビルドします。
pnpm run generate
# 代わりに以下のスクリプトを使用出来ます
./build.sh #Bash/Dash(sh互換シェル)の場合
build.bat #コマンドプロンプトの場合
# 注: PowerShell用は署名する手間を考慮し、添付されていません。
# また、GitHub Actionsを使用した自動ビルドもあります。
# GitHub Actionsを有効化して、プッシュするとビルドされます。ビルドが完了したら次のコマンドで動作検証を行い、正常に動作する場合にコードを提出しましょう
pnpm run preview本プロジェクトでは次のIDE/コードエディタを推奨しています。
- IntelliJ IDEA Ultimate (JetBrains s.r.o.)
Javaをメインに各言語に対応する万能IDEです。
以下のプラグインをインストールすると快適に開発出来ます。 - WebStorm (JetBrains s.r.o.)
JetBrains IDEsのHTML+JavaScriptなどのWebとNodeに最適化されたIDEです。 - PhpStorm (JetBrains s.r.o.)
PHPに対応していることを除いてWebStormと同一です。 - Visual Studio Code (Microsoft Corporation)
Visual Studioファミリーの製品で高機能なコードエディタです。
必ずインストール版をご利用ください。Web版ではEditorConfigが動作しないようです。
以下の拡張機能をインストールすると快適に開発できます。 - Eclipse Theia (Eclipse Foundation)
Visual Studio Codeと互換性のあるコードエディタです。
主にクラウドベースIDEへの採用実績があります。
拡張機能は(EditorConfig以外所有権を確認出来ないため)VSCode用のVSIXをダウンロードして、インストールしてください。