2019年のフロントエンドエンジニアへの道のり〜パッケージマネージャ編〜

< 追記 >
個人的なことですが、この記事のおかげで痛い目を見ました。
あとから見返したときに思い出に浸るための追記です。(2019/05/28)

# はじめに
こんにちは。
最近、ロードマップの**パッケージマネージャ**を進めているTakuyaHanadaです。
パッケージマネージャを勉強する際、簡単なサンプルを見つけることができず苦労しました。
そこで、誰かの役に立てばと思い、私がつくったものをご紹介します。
間違いなどがあればご指摘していただけると幸いです。

今回、パッケージマネージャを使ってつくるものはこちら
![only_jquery.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/bfefac4a-377a-3fe6-2ffe-60ef8cb10a7b.gif)


サンプルコード

- [yarn-sample - GitHub](https://github.com/ohakutsu/archives/tree/main/yarn-sample)

私が進めているロードマップ

- [kamranahmedse/developer-roadmap: Roadmap to becoming a web developer in 2019](https://github.com/kamranahmedse/developer-roadmap)
- [2018年の最先端フロントエンドエンジニアになろう - Qiita](https://qiita.com/rana_kualu/items/5986ceab8fd4e353de1b)

では、さっそくつくっていきましょう！

# 事前知識
- HTML
- CSS
- JavaScript
- jQuery（知らなくてもOK）
- ターミナルの操作

# 環境
- MacOS Mojave 10.14.5
- Homebrew 2.1.3
- Yarn 1.16.0

# 手順
## 0. 今回使うもの
- Yarn
- Webpack
- jQuery

## 1. Yarnを使って準備をする
Yarnと同じようなものに**npm**というものもありますが、公式によるとYarnの方が「はやい」「安全」「信頼できる」そうなので、Yarnを使います。
[Yarn - 公式サイト](https://yarnpkg.com/ja/)

以下は、手順です。

1. yarn initコマンドで新しいプロジェクトを作成します。Enterを連打してすべてデフォルトのままにします。

    ```bash:(1-1)ターミナル
    $ yarn init
    
    yarn init v1.16.0
    question name (yarn-sample):  # Enter
    question version (1.0.0):  # Enter
    question description:  # Enter
    question entry point (index.js):  # Enter
    question repository url:  # Enter
    question author:  # Enter
    question license (MIT):  # Enter
    question private:  # Enter
    success Saved package.json
    ✨  Done in 9.46s.
    ```
2. **jQuery**をインストールします。

    ```bash:(1-2)ターミナル
    $ yarn add jquery
    ```

## 2. Webpackを使ってまとめる
パッケージをインストールしたし、あとはHTML, CSS, JavaScriptを書けば終わりかと思いきや、このままでは動きません。

そこで、登場するのが**モジュールバンドラー**というものです。
調べてみると、JavaScriptやCSS、画像などのファイルを1つにまとめてくれるものだそうです。
今回、「なんか見たことある」という理由で、**Webpack**というモジュールバンドラーを使います。
[Webpackってどんなもの？ - Qiita](https://qiita.com/kamykn/items/45fb4690ace32216ca25)
[webpack 4 入門 - Qiita](https://qiita.com/soarflat/items/28bf799f7e0335b68186)

以下は、手順です。

1. まず、**Webpack**をインストールします。
オプション-Dについては公式に説明がありました。
jQueryのようにコードを実行する際に必要なものはオプションをつけず、Webpackのように開発する際に必要なものは-Dオプションをつけるものだそうです。
[yarn add - Yarn](https://yarnpkg.com/ja/docs/cli/add)
[依存関係の種類 - Yarn](https://yarnpkg.com/ja/docs/dependency-types)

    ```bash:(2-1)ターミナル
    $ yarn add webpack webpack-cli -D
    ```

2. Webpackでは、まとめたいファイルを**src**ディレクトリに入れます。1つにまとめたファイルは**dist**ディレクトリに出力してくれます。
というわけで、src, distディレクトリを作成します。作成後のディレクトリ構成は以下の通り。

    ```bash:(2-2)ディレクトリ構成
    .
    ├── node_modules/
    ├── package.json
    ├── dist/  # 新しく作成
    ├── src/  # 新しく作成
    └── yarn.lock
    ```
3. distディレクトリに**index.html**を作成します。

    ```html:(2-3)dist/index.html
    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Yarn Sample</title>
        <style>
          #msg {
            display: none;
          }
        </style>
      </head>

      <body>
        <button id="btn">
          Click Me!
        </button>
        <h1 id="msg">
          Hello World!
        </h1>

        <script src="main.js"></script>
      </body>
    </html>
    ```

4. srcディレクトリに**index.js**を作成します。

    ```javascript:(2-4)src/index.js
    const $ = require('jquery');  // jQueryを読み込む

    $(function() {
      $('#btn').click(function() {  // ボタンがクリックされたとき、
        $('#msg').slideDown();  // メッセージが出てくる
      });
    });
    ```
5. Webpackでバンドルします（まとめます）。
**package.json**にscriptsを書き加えます。

    ```json:(2-5)package.json
    {
      "name": "yarn-sample",
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "dependencies": {
        "jquery": "^3.4.1"
      },
      "devDependencies": {
        "webpack": "^4.32.2",
        "webpack-cli": "^3.3.2"
      },
    ----------追加----------
      "scripts": {
        "build": "webpack --mode development"
      }
    ------------------------
    }
    ```

6. あとは、**yarn run build** を実行すれば、distに**main.js**が生成されます。
（さっき、scriptsに書いた**webpack**が実行される）

    ```bash:(2-6-1)ターミナル
    $ yarn run build
    ```

    ```text:(2-6-2)ディレクトリ構成
    .
    ├── node_modules/
    ├── package.json
    ├── dist
    │   ├── index.html
    │   └── main.js  # <--　生成された main.js
    ├── src/
    └── yarn.lock
    ```
7. index.htmlをブラウザで開いてみましょう！
jQueryで書いた動作をしたらOKです。
![only_jquery.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352836/bfefac4a-377a-3fe6-2ffe-60ef8cb10a7b.gif)

# おわりに
Webpackに関しては完全初心者でしたが、1日ちょいで学んだことをまとめてみました。

パッケージマネージャ、Webpackを触ってみたい人に役立つかなと思い記事を書いていましたが、この記事の上位互換のようなものがありました(笑)
[npmとwebpack4でビルド - jQueryからの次のステップ - Qiita](https://qiita.com/civic/items/82c0184bcadc50965f91)

心が折れそうになりましたが、せっかく途中まで書いたので書ききりました。
参考になってくれれば幸いです。




## 参考記事等
- [Yarn - 公式サイト](https://yarnpkg.com/ja/)
- [最新版で学ぶwebpack 4入門
JavaScriptのモジュールバンドラ - ics.media](https://ics.media/entry/12140/)
- [webpackでjQueryを読み込む２つの方法 - リーテラトバリタブログ](http://elsur.xyz/webpack-jquery-ways-to-work)
- [webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動 - Qiita](https://qiita.com/riversun/items/d27f6d3ab7aaa119deab)
- [Webpackってどんなもの？ - Qiita](https://qiita.com/kamykn/items/45fb4690ace32216ca25)
- [webpack 4 入門 - Qiita](https://qiita.com/soarflat/items/28bf799f7e0335b68186)