はじめに
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フレームワークについて更に理解を深めていきたいです。
最後まで読んでいただきありがとうございました。
参考ドキュメント
- https://cli.vuejs.org/guide/creating-a-project.html#vue-create
- https://ja.nuxtjs.org/docs/2.x/get-started/installation/
- https://ja.reactjs.org/docs/create-a-new-react-app.html
- https://github.com/facebook/create-react-app
- https://nextjs.org/docs/api-reference/create-next-app
- https://angular.jp/guide/setup-local
- https://qiita.com/koinori/items/be672ddb9d3a7d315b13
- https://svelte.dev/blog/the-easiest-way-to-get-started
- https://github.com/sveltejs/template