Parcel を動かして Vuejs で画像切り替えを実装するまで

# Parcel について

Parcel が注目されているとのことで、興味本位で触ってみました。

きっかけはこちら。

- webpack時代の終わりとparcel時代のはじまり
    - https://qiita.com/bitrinjani/items/b08876e0a2618745f54a

ちなみに、僕はRails5 をこの1年くらい触ったくらいで、フロントのJS周りは詳しくありません。Railsと一緒にCSS3までやったので、HTML5/CSS3 は書けます。

## install
公式のドキュメントに従いインストールします。 Yarn か npm で簡単に入れられます。
https://parceljs.org/getting_started.html

## 開発用のディレクトリ
working ディレクトリで init します。

```
$ cd working/
$ yarn init -y
```

すると作業ディレクトリに

```
package.json
```

が出来上がります。

# 実装用のファイルを作る

working ディレクトリに index.html を作ります。

```
$ vi index.html
```

まずは Vue を読み込みます。

```html
<!DOCTYPE html>
<html lang="ja">
 <head>
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 </head>
 <body>
 </body>
</html>

```

続いて、Vue の簡単なHellow Worldで parcel を試します。画像を読みたいので、画像ファイル名 something.jpg を出力してみます。

```html
<!DOCTYPE html>
<html lang="ja">
 <head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 </head>
<body>
 <div id="imagebox">
  {{imageName}}
 </div>
 <script>
  new Vue({
   el: '#imagebox',
   data: {
    imageName: 'something.jpg'
   }
  })
 </script>
</body>
</html>
```

## 実行結果
parcel の起動は簡単です。ファイルを指定するだけ。

```
$ parcel index.html
⏳  Building...
Server running at http://localhost:1234 
✨  Built in 100ms.

```

表示されました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141741/a4873eef-118f-b9c8-a623-25aefa5993e3.png)

## 画像を読み込んでみる

working/ の中に imagesを作り、画像を保存します。
今回は3枚を用意しました。

```
$ working/images/
bitcoin.jpg
chuhai.jpg
hiratakan.jpg
```

画像は、「ぱたくそ」から拝借しました。

## Vue
切り替え先の div#imagebox を作り、Vue の bindをするところまでは、先ほどと同じです。imageSelector は画像をclickした時にイベントが発生するように bind します。

先に言っておくと、parcel が images/ を読まないので、これだと画像は変わらないんですが、とりあえず実行します。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>

    <div id="imagebox">
      <img v-bind:src="imageName" alt="" width="310" />
    </div>

    <div id="imageSelector">
      <a href="#" v-on:click="switch_image('images/hiratakan.jpg')">
        <img width="100" height="100" src="images/hiratakan.jpg" alt="" />
      </a>
      <a href="#" v-on:click="switch_image('images/chuhai.jpg')">
        <img width="100" height="100" src="images/chuhai.jpg" alt="" />
      </a>
      <a href="#" v-on:click="switch_image('images/bitcoin.jpg')">
        <img width="100" height="100" src="images/bitcoin.jpg" alt="" />
      </a>
    </div>

    <script>
      new Vue({
        el: '#imageSelector',
        methods: {
          switch_image: function (src) {
            img.imageName = src;
          }
        }
      })

      var img = new Vue({
        el: '#imagebox',
        data: {
          imageName: '/images/hiratakan.jpg'
        }
      })

    </script>

  </body>
</html>

```

## 画像とVueをセットした状態で実行
再び building が完了しました。

```
$ parcel index.html
⏳  Building...
Server running at http://localhost:1234 
✨  Built in 105ms.
```

アクセスすると画像が３つ表示されています。そして画像が /dist/ に格納されています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/141741/3433c2a5-3c97-5f1c-7e36-feee7b922a01.png)


### アナログな方法で画像のパスを入れる・・・
この先どうすればいいかは分からず、一旦 src をコピペしました。動作させたいだけなので、ヨシとしましょう。

imageSelector の中の click に関連づいている switch_image の引数を /dist/ のPATHへ書き換えています。

```html
    <div id="imageSelector">
      <a href="#" v-on:click="switch_image('/dist/98a3febe3a017ef3fede3814b19d5dd3.jpg')">
        <img width="100" height="100" src="images/hiratakan.jpg" alt="" />
      </a>
      <a href="#" v-on:click="switch_image('/dist/690f863c61c4bb8da2967f2a8505e0f5.jpg')">
        <img width="100" height="100" src="images/chuhai.jpg" alt="" />
      </a>
      <a href="#" v-on:click="switch_image('/dist/9d9a6401133695a6bd012dc54a281224.jpg')">
        <img width="100" height="100" src="images/bitcoin.jpg" alt="" />
      </a>
    </div>
```

再度実行。画像３枚をクリックすると、その上で画像が切り替わります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/141741/8619e104-b245-232a-fe29-e59813f15a80.png)

## 最後に
僕は parcel も Vue も初めて触るのですが、どちらも比較的簡単に実装することができました。parcel のビルドは非常に簡単で、実行するだけなので、迷うことはありませんでした。

画像のpathをコピペしたところは実用的には対応が必要ですね。
parcel が bundle した後 path が変わるので、click した img から src の値を取得して切り替えるようにすればいけると思います。
ただ、/images/ を参照できないので、初期画像をどうセットしておくのか悩みました。

今回は webpack 自体が分かってない中だったので、そこも含めて学習になりました。

実用的にどうなのか？というのは、こちらが参考になりました。

- Parcel 入門 ～Parcelはwebpackの代わりになるのか～
    - https://qiita.com/soarflat/items/3e43368b2d767c730781