JavaScriptフレームワークのプロジェクト作成コマンドを列挙した
はじめに
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
localhost:8080で開発サーバが立ち上がります。
Nuxt.js（2.x）
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
localhost:3000で開発サーバーが立ち上がります。
Nuxt.js（3.x）
Nuxt3からはセットアップ手順が大幅に変更されました。
nuxiコマンドを用いて従来よりも簡略的かつ高速にセットアップできます。nuxiとはNuxt用の新しいCLIになります。
$ npx nuxi init <project-name>
$ cd <project-name>
$ yarn install
$ yarn dev -o
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を使用するようになります。
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と同じくYarnがインストールされているとデフォルトでYarnが使用されます。
localhost:3000で開発サーバーが立ち上がります。
Angular
npm
$ npm install -g @angular/cli
$ ng new <project-name>
$ cd <project-name>
$ ng serve --open
Yarn
$ npm install -g @angular/cli
$ ng config -g cli.packageManager yarn
$ ng new <project-name>
$ cd <project-name>
$ ng serve --open
ng serve --openとすることでデフォルトのブラウザで起動します。
localhost:4200で開発サーバーが立ち上がります。
Svelte
公式で公開されているテンプレートから新規プロジェクトを作る。
npx
$ npx degit sveltejs/template <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
localhost:5000で開発サーバーが立ち上がります。
おわりに
有名なJavaScriptフレームワークの雛形プロジェクト作成コマンドを公式ドキュメントをもとに列挙してみました。簡単なコマンド1つですぐに開発を始める環境が作成できるのはとても便利です。フレームワークがここまで発展し、多くの人に選ばれる理由わかった気がします。
公式ドキュメントを見ながら記事を執筆する中で得た気づきが多くあるため、今後JavaScriptフレームワークについて更に理解を深めていきたいです。
最後まで読んでいただきありがとうございました。
参考
Discussion