この記事のターゲット

Webpackってよく聞く
TypeScriptが良いっていろんなところで言ってる
バニラJSはある程度わかる

Webpackとは

誤解を恐れずに言えば複数のファイルを一つにまとめるツール。
これによって管理しやすい形に分割されたJSファイルやCSSファイルをリリース時には一つにまとめてローディングの負荷を下げることができる。
また、後述のTypeScriptをファイルをまとめるついでにJavascriptにトランスパイルすることもできる。
https://webpack.js.org/

こちらが詳しいです。
【５分でなんとなく理解！】Webpack入門

TypeScriptとは

Javascriptに型の概念を追加するJavascript拡張。
これによってエディターが静的に構文解析して事前にエラーを検知してくれる。
また、他人が作った関数やclassも型の情報を表示してくれたりするのでメンテナンス性が向上する。
https://www.typescriptlang.org/

詳しくはこちら
TypeScriptの型入門

さっそく使うよ

npmの導入

WebpackとTypescriptの導入にnpmを利用するので入ってない方はinstallしてください。

以下参照。
Node.js / npm をインストール (Mac環境)

Webpack導入

ディレクトリを作ってwebpackを入れましょう。


# ディレクトリ作成
mkdir my-project
cd my-project

# npm プロジェクト初期化
npm init -y

# webpack install
npm install webpack webpack-cli --save-dev

TypeScript導入

先ほど作ったディレクトリでTypescriptを入れます。
webpackからTyepscriptをトランスパイルするためにwebpackのプラグインであるts-loaderもinstallします。


# typescript install
npm install typescript ts-loader --save-dev

Webpackの設定

webpackの設定を書きます。
設定ファイルを新規作成して中身を書きましょう。

touch webpack.config.js


module.exports = {
  mode: 'development',
  entry: './index.ts', //ファイルをまとめる際のエントリーポイント
  output: {
    path: __dirname,
    filename: 'bundle.js' //まとめた結果出力されるファイル名
  },
  resolve: {
    extensions: ['.ts', '.js'] //拡張子がtsだったらTypescirptでコンパイルする
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader' //ts-loader使うよ
      }
    ]
  }
}

TypeScriptの設定

Typescriptの設定を書きます。
これまた設定ファイルを新規作成して中身を書きます。

touch tsconfig.json

{
  "compilerOptions": {
    "target": "esnext", #esnextに変換する
    "module": "commonjs", #commonjs方式のモジュールシステム(import/export)を使う
    "noImplicitAny": true, #TypeScriptでは型定義がない変数はany型になる(暗黙のany型)のでこれを禁止する
  }
}

TypeScript書いてみる

webpackの設定でindex.tsから読みこむことにしたので同じ名前でファイルを作って適当にサンプルをかいてみます。

touch index.ts


const sayHello = (name: string) : string => {
  return `Hello ${name}!`
}

console.log(sayHello('TS!'))

関数の引数と戻り値にstringを明示しました。
呼び出し側でnumberを入れたりすると怒られるはず。

いざコンパイル

webpackのコマンドを呼ぶためにpackage.jsonのscriptsにちょろっと書きましょう。
（package.jsonに書くとnode_mudulesにパスが通っているので呼び出しやすい）

  "scripts": {
    "start": "webpack --watch"
  },

それではいざコンパイル。

npm start

bundle.jsというファイルが吐き出されて入れば成功！

まとめ

正直なところ、webpackやtypescriptの設定は種類が多すぎて全然わかってないです。
とはいえとりあえず一度動かしてみたという経験は大きな糧になるはず！
まずは小さく導入して少しずつ学んで行きましょう。

Webpack・TypeScript入門