コンテンツへスキップ

TypeScript+Webpack+Vue.jsでモダンなフロントエンド開発体験 Step1

最近ちょっとアレなCMSを使ったページ制作に忙殺されていたため、アウトプットもさることながらインプットの量も質も残念な状態になっていましたが、一段落ついたので何か新しいことをインプットするべく、TypeScript+webpack+Vue.jsに手を出してみました。

Q.「なんでVueなの？今ならReactじゃないの？」
A. Vue.jsは1.xのときに実務で使用してアーキテクチャは軽く頭に入っていたので、TypeScriptとwebpackのインプットに専念できるのと、PHPerとしてはLaravelが標準サポートしてるフレームワークを使った方が後々の学習コスト抑えられるんじゃないかなというところが動機です。

「TypeScriptとwebpackのインプットに専念できる」と高を括っていたんですが実際のところ全然思い通りにいきませんでしたね、まさかHello worldに一日費やすとは思いませんでした。
（前使用したときからメジャーバージョンアップしてる上に、よく考えたら前使ったの1年以上前だったので、しょうがないですよね。ほぼ0からスタートですよね。ね。）

ということで、INPUT日記の始まり始まり。

環境構築

Node.jsが入っていてnpmが使える環境を作るまでは割愛します。
入っているバージョンは以下の通りです。

node -v
v7.7.3

npm -v
4.1.2

準備

package.jsonの作成

適当なフォルダを作ります。今回はstudy_vueにしました。
今後作業はこのフォルダ配下で行います。

mkdir study_vue
cd study_vue
npm init

Enter連打でOK

  • Vue+TypeScript＋webpackの最小構成インストール
    プロジェクトのルートでnpm install。
npm i -D vue typescript webpack ts-loader
  • vue → Vue.js本体
  • typescript → TypeScriptで書かれたファイルのコンパイラ
  • webpack → vueをブラウザで表示できるようにするためのビルドツール
  • ts-loader → webpackからtypescriptファイルをコンパイルするためのツール

ちなみに、npm i -Dはnpm install --save-devの略です

gitリポジトリの作成

gitで管理するならやっておきましょう。

git init
echo "node_modules" >> .gitignore
git add .gitignore package.json
git commit -m 'first commit'

設定ファイルの作成

webpackの設定ファイルを作成

プロジェクトルート直下にwebpack.config.jsを作成

module.exports = {
  entry: './src/ts/app.ts',
  output: {
    filename: './app/js/app.js'
  },
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}
  • entry → ビルドの起点になるファイル。ここでimportされたファイルをwebpackが自動でもってきてくれます
  • output.filename → 最終的に出力されるファイル。色々書き方はあるけど最小構成のためこうしてます
  • resolve.extensions → importするときファイル名の拡張子を省略している場合、どんな拡張子を探しにいけばいいかを指定しています
  • module.loaders → .tsもしくは.tsxファイルはts-loaderで処理（コンパイル）してもらいますよ。という指示。

TypeScriptの設定ファイルを作成

プロジェクトルート直下にtsconfig.jsonを作成

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": ["dom", "es5", "es2015.promise"]
  }
}

Vueのマニュアルの推奨設定をコピペしただけです。

  • allowSyntheticDefaultImports → importの挙動を変える設定。falseの状態で動かす方法わかりません＞＜

動作に必要なファイルを作成

htmlファイルを作成

app/index.htmlを作成します。

study_vue/
└app/ ★新規作成
  └index.html ★新規作成

htmlファイルの中身はこんな感じ↓
app/js/app.jsにコンパイル後のjsファイルを置くので読み込んでおきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Study Vue Step1</title>
</head>
<body>
  <div id="app"></div>
  <script src="js/app.js"></script>
</body>
</html>

typescriptファイルを作成

コンパイル元のファイルのため公開しないので、「src/ts/app.ts」にします。

study_vue/
├app/
│└index.html
└src/ ★新規作成
  └ts/ ★新規作成
    └app.ts ★新規作成

ファイルの中身は↓の通り

import Vue from 'vue'

let app:Vue = new Vue({
  el: '#app',
  render: (h)=>h('p', 'Hello, world.')
});

いざコンパイル

黒い画面から以下のコマンドを実行！

$(npm bin)/webpack
  • $(npm bin) → ローカル（node_modulesの中）にインストールした実行ファイルの置き場所を教えてくれる。webpackがグローバルにインストールされていればパスが通っているはずなのでwebpackだけでOK。

以下のようにエラーメッセージが表示されていなければOK！

動作確認

app/index.htmlをブラウザで開きます。（ローカルファイルアクセスでOK）
画面に「Hello, world.」と表示されれば完了です。

まとめ

とりあえず、TypeScript+webpack+Vue.jsを動かすところまではできました！
が、TypeScriptとVue.jsの恩恵はまだ無いに等しい状態です。
次回はVue.jsまわりをメインにいじりながらインプットしていこうと思います。

なお、現時点のフォルダ構成は以下の通りです。

study_vue/
├app/ // 公開用フォルダ
│├index.html
│└js/
│　└app.js // コンパイルや依存ファイルが同梱されたJS
├src/ // 元のファイル置き場
│└ts/ // 元のtsファイル置き場
│　└app.ts // 起点になるtsファイル
├node_modules/ // npmで管理されているファイルたち（いじることはない）
├package.json // npmの設定ファイル
├webpack.config.js // webpackの設定ファイル
└tsconfig.json // TypeScriptの設定ファイル
タグ: