ki-hi-ro.com WEB制作フリーランスエンジニア
  • Service
    • WEBサイトの更新サポート
    • 新規サイトコーディング
  • Introduce
    • メッセージ
    • 自宅兼事務所
    • Twitter
  • Blog
    • 技術ブログ
    • 学習ブログ
    • 雑記ブログ
  • Others
    • スケジュールのお知らせ
    • お問い合わせ
    • WEBに関する無料相談
  • Top
  • Service
  • Introduce
  • Blog
  • Contact

TypeScript 学習 part10

こちらの本でTypeScriptの学習を進めています。

前回は、本書のchapter3が完成しましたので、今回は、chapter4の「ブラウザで動くアプリケーションを作ってみよう」に入っていきました。

コミット履歴はこちら

chapter4で作るアプリ

chapter4で作るアプリは、ブラウザで動くTO DOアプリです。

ブラウザで動くアプリの留意点

アプリの規模が大きい場合は、ソースコードの見通しが悪くなるため、ファイルを分割する(モジュール)必要があります。

今回行ったこと

最終的に、コンソールに3と表示されるようにするために、サンプルファイルを用意して、webpackによって、typescriptをHTMLから呼び出せるようにしました。

最終的なブラウザのコンソール画面

サンプルファイルの用意

sum.tsとindex.tsの2つのファイルと、index.html、package.jsonを用意しました。

sum.ts

sum.tsでは、足し算の関数sumをexportしています。

export const sum = (a: number, b: number) => a + b

index.ts

index.tsでは、sumをimportして、1と2を引数に渡したものをコンソールに表示するという記述をしています。

import { sum } from './sum'

console.log(sum(1, 2)) 

package.json

package.jsonは、以下のコマンドで生成されました。

npm init -y

typescriptをHTMLから呼び出せるように

パッケージのインストール

下記のコマンドを実行して5つのパッケージをインストールしました。

npm install --save-dev webpack@5.50.0 webpack-cli@4.7.2 typescript@4.3.5 ts-loader@9.2.5 serve@12.0.0

webpackの設定ファイルの作成

webpack.config.jsというファイルを作成しました。

const { resolve } = require('path')

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: resolve(__dirname, 'ts/index.ts'),
    output: {
        filename: 'index.js',
        path: resolve(__dirname, 'dist'),
    },
    resolve: {
        extentions: ['.ts', '.js'],
    },
    module: {
        rules: [
            {
            test: /\.ts/,
            use: {
                loader: 'ts-loader',
                },
            },
        ],
    }
} 

TypesSriptの設定ファイルの作成

tsconfig.jsonというファイルを作成しました。

{
    "compilerOptions": {
        "sourceMap": true
    }
} 

package.jsonの編集

 "scripts": {
   // 省略
    "build": "webpack",
    "serve": "serve ./ -p 3000"
   // 省略
 },

動作確認

npm run buildで、tsのコードをjsに変換しました。

そして、npm run serveでローカルサーバーを起動し、ブラウザのアドレスバーにhttp://localhost:3000を打ち込み、動作確認を行いました。

次回

次回は、今回作成するTO DOアプリの見た目を準備できたらと思います。

関連記事

2022.05.12 TypeScript TypeScript 学習 part9
2022.05.01 TypeScript TypeScript 学習 part8
2022.04.28 TypeScript TypeScript 学習 part7
2022.04.25 TypeScript TypeScript 学習 part6
2022.04.24 TypeScript TypeScript 学習 part5
2022.04.22 TypeScript TypeScript 学習 part4

サービス一覧

  • WEBサイトの更新サポート
  • 新規サイトコーディング

自己紹介

  • メッセージ
  • 自宅兼事務所
  • Twitter

ブログ

  • 技術ブログ
  • 学習ブログ
  • 雑記ブログ

その他

  • スケジュールのお知らせ
  • お問い合わせ