f:id:zenet-tech:20210317110232p:plain

あけましておめでとうございます！！システム事業部の村田です。

年末に友人と開発合宿と銘打って、だらだらと開発する会を行ったのですが、Vue.js + TypeScriptを使おう！ということで開発環境を整えました。
その際にかなーりハマりまくったので、やったこと・設定したことを、もう一度作成してまとめようと思います。

また、長くなるのでパートを分けさせていただきます。
この記事では、Vue.js、webpack、yarnを利用してHelloWorldを行うところまでを記載します。
なのでTypeScriptはまだ出てません(汗)ごめんなさい！

間違い等ありましたらコメント頂けると幸いです。

使う主なもの(予定)

Vue.js
TypeScript
webpack
yarn

また、執筆時の各versionは

Vue.js(2.5.13)
webpack(3.10.0)
yarn(1.3.2) です。

全体的な流れとして、

yarnを使ってVue.jsをwebpackで導入 | TIS NOTE

こちらの記事を参考に作業を進めました。もしうまくいかない方はこちらも見てみて下さい。

yarnのインストール

こちらの記事を参考にしました。

qiita.com

mac or linuxでnpmインストール済みであれば

$npm install -g yarn

macであれば

$brew install yarn

でインストールできます。

プロジェクト作成

適当なサンプルプロジェクトを作ります。

$mkdir vue_ts_sample
$cd vue_ts_sample

yarnを使うのでinitコマンドを実行します。

$yarn init

すると、色々な質問されるので、進めていきます。
今回はサンプルで動かすだけなので、基本すべてEnterで大丈夫です。
必要であればアプリケーションの説明や、privateの設定など適宜入力して下さい。
値を入力して進めると、生成されるpackage.jsonの値が変わります。
もちろん後から変更もできます。
package.jsonの各項目については、こちらの記事が詳しいです。

qiita.com

npm package.json 日本語版取扱説明書

実行結果

yarn init v1.3.2
question name (vue_ts_sample):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
✨  Done in 9.21s.

生成されるpackage.json

{
  "name": "vue_ts_sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

この生成されたファイルに先程設定しなかった内容を直接記載することも可能なので、必要な場合は個別で編集してください。

yarnを利用してライブラリの追加

動かすまで必要なライブラリをyarnで追加します。

$yarn add webpack webpack-dev-server vue

実行すると、package.jsonが更新され、yarn.lockが生成されます。

package.json

{
  "name": "vue_ts_sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "vue": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.1"
  }
}

package.jsonに追加された項目と、yarn.lockは、ライブラリの依存性とバージョンを管理しています。
* package.jsonのdependenciesの項目内が使用するライブラリとそのバージョン
* yarn.lockが実際にインストールされたライブラリとバージョン

を示しています。(Rubyを書いている方であれば、bundlerのGemfileとGemfile.lockだと思えば良いと思います。) package.jsonのdependenciesは、

{
  "dependencies": {
    "パッケージ名": "バージョン"
  }
}

の形式で追加されます。バージョンの横にある、^の意味が知りたい方は、

qiita.com

こちらの記事が参考になります。

yarn.lockをgitの管理下におけば、他の人は

$yarn install

を実行することでパッケージのバージョンを合わせることができます。

もしyarn.lockを更新したい場合は、

$yarn update

でパッケージがアップデートされ、yarn.lockが更新されます。

Vue.js + Webpack + yarn(npm)でのHelloWorldまで

必要なパッケージのインストールが終わったら、いよいよwebpackを利用してサンプルページでアクセスします。
プロジェクト配下にwebpack.config.jsを作成します。

const path = require('path');

module.exports = {
  // エントリーポイントの設定
  // プロジェクトルートからの相対パスで指定する
  // webpackでまとめるファイルの起点となるファイルを置く。
  entry: './src/index.js',
  output: {
    // webpackでまとめられたファイルの出力先の設定
    // pathで指定したパスに、filenameで指定した名前で吐き出される。
    // path.joinは、引数の文字列をOS応じたパスの区切り文字で結合してくれる。
    // また、__dirnameはプロジェクトルートのパスを返してくれる。
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    // webpack-dev-serverで起動するファイルの置き場所
    // ここに一番最初に表示するhtmlファイルを置く
    contentBase: 'public',
    // 起動ポート。デフォルトは8080。
    // 他のアプリケーションとかぶるようであれば変更
    port: 4000
  },
  resolve: {
    alias: {
      // vueのコンパイラの指定。
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
};

resolveの中のコンパイラの指定については、詳細はjp.vuejs.org を参照して下さい。動かすだけであればとりあえずおまじないとして書いておいて問題ありません。

また、起動用のコマンド、コンパイル用コマンドをpackage.jsonに追加します。

{
  "name": "vue_ts_sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    // コンパイルのコマンド
    // yarn build
    // で実行
    "build": "webpack",
    // サーバー起動コマンド
    // yarn start
    // で実行
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "vue": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.1"
  }
}

package.jsonのscriptは、

{
  "script": {
    "コマンド名": "実行コマンド"
  }
}

の形式で追加されます。これで、

$yarn build

でコンパイル、

$yarn start

でwebpack-dev-serverが起動するようになります。

これでconfigファイルの準備は完了したので、htmlファイルとjsファイルを追加します。

public/index.html

<html>
<body>
  <!--
    Vue.jsが参照するのに使う名前をidに指定
    Vue.jsで渡すデータの名前を{{}}の中に指定
  -->
  <div id="app">
    {{ message }}
  </div>
  <!-- webpack.config.jsのoutputで指定した、出力されるjsファイルの名前を指定 -->
  <script src="bundle.js"></script>
</body>
</html>

src/index.js

import Vue from 'vue'

const app = new Vue({
  // htmlで指定したid
  el: '#app',
  // htmlで{{}}で指定した名前と、渡すデータ。
  data: {
    message: 'Hello world!'
  }
})

ここまででやっと準備完了です。

ディレクトリ構成はおそらく

vue-ts-sample
┣ node_modules
┣ public
┃  ┗ index.html
┣ src
┃  ┗ index.js
┣ package.json
┣ webpack.config.js
┗ yarn.lock

こんな感じになってるかと思います。

$yarn build

を実行してコンパイルを行います。すると、public配下にbundle.jsが生成されて、

vue-ts-sample
┣ node_modules
┣ public
┃  ┣ bundle.js
┃  ┗ index.html
┣ src
┃  ┗ index.js
┣ package.json
┣ webpack.config.js
┗ yarn.lock

ディレクトリ構成がこうなるかと思います。

yarn start

でサーバーを起動します。ずらーっとログが出ますが、

webpack: Compiled successfully.

の文字が出れば起動成功です。

localhost:4000(ポートを変えている場合はそのポート)にアクセスし、「Hello world!」が見れれば完了です！
お疲れ様でした！

Zenet Tech Blog

Vue.js + TypeScrptの環境構築(パート1)

使う主なもの(予定)

yarnのインストール

プロジェクト作成

yarnを利用してライブラリの追加

Vue.js + Webpack + yarn(npm)でのHelloWorldまで