ただメモができるだけのブラウザアプリ「TextArea」はこちらw

TypeScript と webpack( + yarn)でWebアプリ開発環境を構築する

スポンサーリンク

TypeScript と webpack( +yarn)でWebアプリ開発環境を構築していきます。

webpackとは?yarnとは?という方は以下の記事をご参照ください。

yarnとwebpackを使ってchart.jsでグラフ描画!!
実際にyarn/webpackの環境を作って、動かすことで理解が深めよう... yarnとはnpm(Node Package Manager)と同様、JavaScriptプログラミング言語のパッケージマネージャー。npmと一緒に使えます。 npmと比べてインストールが速く、厳密にモジュールのバージョンを固定できます。

yarnプロジェクトの作成からTypeScript + webpackの開発環境構築まで記載します。 ソースはコピペできますので、まずは簡単に環境構築してTypeScript + webpackへの理解を深めていきましょ。

TypeScriptのローカル環境構築

最終的なフォルダ構成

最終的なフォルダ構成は以下のようになります。


├── dist    // index.htmlを格納
├── node_modules    // yarnでインストールしたモジュールが入る
├── package.json    // パッケージを管理
├── src    // 作成するtsファイルを入れるディレクトリ
├── tsconfig.json    // TSファイルをJSファイルにコンパイルするための設定ファイル
├── webpack.config.js    // webpackの設定ファイル
└── yarn.lock    // インストールしたパッケージ情報が書かれたファイル

yarn init

まず、yarn initで初期化処理を行い、package.jsonを生成します。

// 実行するコマンド
yarn init

上記コマンドを実行すると、ターミナル上で色々聞かれますが、全てエンターキーを押せばOKです。

webpackとtypescriptのインストール

以下のコマンドでwebpackとtypescriptをインストールします

// 実行するコマンド
yarn add webpack webpack-cli webpack-dev-server typescript ts-loader -D

webpack設定

webpackの設定ファイル「webpack.config.js」を作成します。

webpack.config.js」に記載する内容は以下の通りです。


const path = require('path');
const outputPath = path.resolve(__dirname, "public");

module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    output: {
        filename: 'bundle.js',
        path: `${outputPath}`
    },
    devServer: {
        static: "dist",
        open: true
    },
    module: {
        rules: [{
            test: /\.ts/,
            use: 'ts-loader',
            exclude: /node_modules/,
        }, ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    }
};

tsconfig.jsonの作成

tsconfig.jsonファイルを作成します。

tsconfig.jsonファイルは、TSファイルをJSファイルにコンパイルするための設定ファイルです。

tsconfig.json」に記載する内容は以下の通りです。


{
  "compilerOptions": {
    "sourceMap": true,
    "target": "ES5",
    "module": "ES2015",
    "strict": true,
    "moduleResolution": "node"
  }
}

HTMLファイルの作成

まず、HTML格納用のディレクトリを作成します。

// 実行するコマンド
mkdir dist

次にdist直下にindex.htmlというファイルを作成します。

index.htmlに記載する内容は以下の通りです。

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>hello world</title>
</head>
<body>
    <div style="width:50%;">
        <div id="sample"></div>
    </div>
    <script src='bundle.js'></script>
</body>
</html>

TypeScriptファイルの作成

「hello world」とブラウザに出力するTypeScriptファイルを作成します。

まず、TypeScript格納用のディレクトリを作成します。

// 実行するコマンド
mkdir src

次にsrc直下にindex.tsというファイルを作成します。

index.tsに記載する内容は以下の通りです。


window.onload = function()
{ 
    var elem = document.getElementById('sample')!;
    elem.innerHTML = 'hello world';
}

動作確認

以下のコマンドでローカルサーバを起動します。

// 実行するコマンド
yarn run webpack-dev-server

ブラウザ上で、「hello world」と表示されればOKです。

まとめ

簡単にTypeScript と webpack( + yarn)でWebアプリ開発環境を構築できたと思います。

環境はできたので、あとはTypeScriptの理解を深めていきてたいところです。

TypeScriptの関連記事です。

TypeScriptの変数や引数宣言時の?(クエスチョンマーク)と!(ビックリマーク)が意味するもの
TypeScriptの変数や引数宣言時の?(クエスチョンマーク)と!(ビックリマーク)が意味するものについて。メンバ変数や引数の?:(クエスチョンマーク+コロン)は、必須のプロパティじゃないときにつけます。変数の!:(ビックリマーク+コロン)は必須のときにつけます。
TypeScriptとJavaScriptの違い-型宣言・クラス・ジェネリクス
JavaScriptを拡張して作られたものですが、JavaScriptとは違い静的型付けのクラスベースオブジェクト指向言語 TypeScriptをコンバートすると、JavaScriptのコードに変換されるためJavaScriptが動く環境であればすぐに使うことができる。

公式:https://www.typescriptlang.org/docs/