はじめに
JavaScript のフレームワークには npm や Yarn などのパッケージマネージャーを使い簡単に依存関係を解決し、プロジェクトの雛形を作成してくれるコマンドが用意されていることが多いです。
スクラッチでの作成もできますが、コマンドラインツールによって簡単にプロジェクトの自動作成、開発サーバーでの実行ができ便利だと感じたため、有名な JavaScript フレームワークの雛形作成コマンドを備忘録として挙げてみます。
各コマンドの <project-name>の部分が作成されるディレクトリ名、デフォルトのプロジェクト名になります。作成するプロジェクトに応じて適宜置き換えてください。
公式のドキュメントに沿って基本となるコマンドをまとめています。プロジェクト作成時に対話形式で設定可能な項目については記事内で扱いません。項目の説明や、利用できるオプションについては公式のドキュメントを参照のうえ実行をお願いします。
前提条件
- node.js がインストールされていること(バージョン 8 以降、最新の LTS バージョンを推奨)
- npm もしくは Yarn が利用可能であること(npm は node.js にデフォルトで搭載)
Vue
npm
npm install-g @vue/cli
vue create <project-name>
cd<project-name>
npm run serve
Yarn
yarn global add @vue/cli
vue create <project-name>
cd<project-name>
npm run serve
http://localhost:8080で開発サーバが立ち上がります。
Nuxt.js
npm
npm init nuxt-app <project-name>
cd<project-name>
npm run dev (yarn dev)npx
npx create-nuxt-app <project-name>
cd<project-name>
npm run dev
Yarn
yarn create nuxt-app <project-name>
cd<project-name>
yarn dev
http://localhost:3000で開発サーバーが立ち上がります。
React
npm
npm init react-app <project-name>
cd<project-name>
npm start
npx
npx create-react-app <project-name>
cd<project-name>
npm start
Yarn
yarn create react-app <project-name>
cd<project-name>
yarn start
npm、npx でインストールする場合は Yarn がインストールされているとデフォルトで Yarn が使用されます。
http://localhost:3000で開発サーバーが立ち上がります。
Next.js
npm
npx create-next-app <project-name>
cd<project-name>
npm run dev
Yarn
yarn create next-app <project-name>
cd<project-name>
yarn dev
React と同じく npm、npx でインストールする場合は Yarn がインストールされているとデフォルトで Yarn が使用されます。
http://localhost:3000で開発サーバーが立ち上がります。
Angular
npm
npm install-g @angular/cli
ng new <project-name>
cd<project-name>
ng serve --openYarn
npm install-g @angular/cli
ng config -g cli.packageManager yarn
ng new <project-name>
cd<project-name>
ng serve --openng serve --openとすることでデフォルトのブラウザで起動します。
http://localhost:4200で開発サーバーが立ち上がります。
Svelte
公式で公開されているテンプレートから新規プロジェクトを作る。
npx
npx degit sveltejs/template <project-name>
cd<project-name>
npm install
npm run dev
http://localhost:5000で開発サーバーが立ち上がります。
おわりに
有名な JavaScript フレームワークの雛形プロジェクト作成コマンドを公式ドキュメントをもとに列挙してみました。簡単なコマンド 1 つですぐに開発を始める環境が作成できるのはとても便利です。フレームワークがここまで発展し、多くの人に選ばれる理由わかった気がします。
公式ドキュメントを見ながら記事を執筆する中で得た気づきが多くあるため、今後 JavaScript フレームワークについて更に理解を深めていきたいです。
以上、ここまで読んでいただきありがとうございました。
参考ドキュメント
Creating a Project | Vue CLI
インストール - NuxtJS
新しい React アプリを作る - React
facebook/create-react-app: Set up a modern web app by running one command.
Create Next App | Next.js
Angular 日本語ドキュメンテーション - ローカル環境とワークスペースのセットアップ
【2019 年 5 月】yarn で @angular/cli
The easiest way to get started with Svelte
sveltejs / template Template for building basic applications with Svelte