【Vue.js 公式仕様を読み解く】インストール


#この記事を書こうと思ったワケ

[「vue.jsに詳しくなろうの会」](https://shinjukuasakatu.connpass.com/event/199688/?utm_campaign=event_message_to_selected_participant&utm_source=notifications&utm_medium=email&utm_content=title_link)の輪読成果物です。
わからないことや指摘など意見をいただけると嬉しいです。

今回は[インストール](https://jp.vuejs.org/v2/guide/installation.html)について、理解したこと＋理解するために学び直した内容をざっとまとめました。もし誤りなどございましたら、ご指摘頂けますと幸いです。

※書かれたものの全てを要約したわけではありません。

#インストール

##ビルドについて詳しく
[「さまざまなビルドについて」](https://jp.vuejs.org/v2/guide/installation.html#%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE%E3%81%AA%E3%83%93%E3%83%AB%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)とあるけど、そもそもビルドって何だったっけ？

>ソフトウェアのビルド（英: build）は、プログラミング言語で書かれたソースコードファイルや各種リソースファイルを独立したソフトウェア生成物に変換するコンピュータ上で実行されるプロセス、またはその結果を指す。

>ビルドの最終生成物はバイナリ形式の実行ファイルであったり、再利用可能なライブラリであったり、バイトコードあるいはそれらをまとめたアーカイブであったりすることもある。

###「ビルド」の基本的な流れ
※以下はC言語を基に書いていますが、言語によってはその機能が存在しないものもある。じゃあなんで書いたの？ということだけれども「ビルド」そのものの基本を知りたかったため。

1. 各ソースコードの静的解析を行う
2. プリプロセッサで前処理を行う
3. ソースコードのコンパイル
4. 各オブジェクトファイルとライブラリをリンクする
5. 4.の「リンカー」で各オブジェクトファイルやライブラリのリンクが行われ、全ての部品をリンクすることで、最終的に「実行ファイル」が完成

※リンカー(linker)：ライブラリに収録された中間言語ファイル・ソースをコンパイルして生成された中間言語ファイルを１つに結合し、最終的な実行形式ファイルにするプログラム（これもCならではのものかと）。リンカーそのものは、Cならではの言語仕様だが、他の言語でも同じ役割をする物はあるのでは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/1b505ff3-c9f4-1de3-67b5-1e317a04eddb.png)

## さまざまなビルドについて
JavaScriptをサーバーサイド上で実行する環境であるNode.jsのパッケージ管理システム[npmパッケージ](https://ja.wikipedia.org/wiki/Npm_(%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%83%84%E3%83%BC%E3%83%AB))の ``dist/``ディレクトリ(``vue@2.6.12/dist/``) では Vue.js の多くのビルドファイルがある。具体的な中身は以下の添付の写真の通り。

![スクリーンショット 2020-12-26 9.52.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/6be53e37-1fc8-cade-05d9-074ac147a399.png)

そして、それらの違いを区分すると以下の公式の通りになる。
![スクリーンショット 2020-12-26 9.52.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606290/81b1fb99-e1f4-dda6-c79b-a9251087b2ac.png)

###Vue.jsの用語
- 完全: コンパイラとランタイムの両方が含まれたビルド（ファイル群）。
- Vue.jsのコンパイラ: テンプレート文字列を JavaScriptのrender関数にコンパイルするためのコード。テンプレートの表現をJavaScriptに落とし込むプログラムともいえる。
- ランタイム: Vue インスタンスの作成やレンダリング、仮想 DOM の変更などのためのコード。基本的にコンパイラを除く全てのもの。

##ランタイム + コンパイラとランタイム限定の違い
- もしクライアントでテンプレートをコンパイルする必要がある (例えば、 テンプレートオプションに文字列を渡す、もしくは DOM 内の HTML をテンプレートとして利用し要素にマウントする) 場合は、コンパイラすなわち、**完全ビルド**が必要。

```javascript:main.js
// これはコンパイラが必要です（Vueのテンプレート構文を使っているため）
new Vue({
  template: '<div>{{ hi }}</div>'
})

// これはコンパイラは必要ありません（JavaScriptのrender関数だから）
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
```
- vue-loader や vueify を使うと、**.vue**ファイル内のテンプレートがビルドを始めるタイミングでJavaScriptに事前コンパイルされる。

## 開発モードと本番モードの違い
- CommonJS と ES Module ビルドはバンドラでの利用を意図しているため、圧縮バージョンを提供していないため、開発者の責任で最終成果物を圧縮する必要がある。
- バンドラー（bundler）
    - 複数ファイルに書かれたJavaScriptを、モジュールなどを読み込みつつ、ひとつのバンドルにしてくれるツール。
    - 例：Webpack、Rollup、Browserify


#参考
- [Vue.js公式ドキュメント](https://jp.vuejs.org/v2/guide/installation.html)
- [「ビルド」機能とは？仕組みやコンパイルとの違いを解説](https://proengineer.internous.co.jp/content/columnfeature/6308#section100)
- [npm (パッケージ管理ツール)](https://ja.wikipedia.org/wiki/Npm_(%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%83%84%E3%83%BC%E3%83%AB))
- [Node.js](https://ja.wikipedia.org/wiki/Node.js)
- [V8 (JavaScriptエンジン)](https://ja.wikipedia.org/wiki/V8_(JavaScript%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3))
- [vue CDN files](https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/)
- [【jQuery入門】CDNを読み込む方法と使い方まとめ！](https://www.sejuku.net/blog/65045)
- [リンカとは](https://dev.grapecity.co.jp/support/powernews/column/clang/003/page01.htm#:~:text=%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AB%E5%8F%8E%E9%8C%B2%E3%81%95%E3%82%8C%E3%81%9F,%E5%BD%A2%E5%BC%8F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)