Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Webpack・TypeScript入門

More than 1 year has passed since last update.

この記事のターゲット

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

Webpackとは

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

こちらが詳しいです。
【5分でなんとなく理解!】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の設定は種類が多すぎて全然わかってないです。
とはいえとりあえず一度動かしてみたという経験は大きな糧になるはず!
まずは小さく導入して少しずつ学んで行きましょう。

ririli
Podcastやってます。 https://wakateossan.github.io/ 若手とおっさんの年齢差をコンセプトにテック系や健康、時事ネタなどを話しています。
https://www.ririli.net/
Colorkrew
東京・秋葉原にあるIT企業、株式会社Colorkrew。 ”世界のシゴトをたのしくするビジョナリーカンパニー”をビジョンに掲げています。 管理職0(ゼロ)、階層0(ナシ)、 チーム力∞(無限大)の組織運営、バリフラットモデルを策定・導入。OpenWork(旧Vorkers)が選ぶ自由主義で個性を活かす企業、性格のいい会社に上位ランクイン!
https://www.colorkrew.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away