More than 3 years have passed since last update.

JavaScript フレームワークのプロジェクト作成コマンドを列挙した

Last updated at 2021-07-23Posted at 2021-01-18

はじめに

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と同じくYarnがインストールされているとデフォルトでYarnが使用されます。

http://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とすることでデフォルトのブラウザで起動します。
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フレームワークについて更に理解を深めていきたいです。

最後まで読んでいただきありがとうございました。

参考ドキュメント

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up