TypeScript | さゆフィクション http://it.kensan.net/it aws wordpress などなどゆるーく書いてます Fri, 28 Apr 2023 13:56:26 +0000 ja hourly 1 https://wordpress.org/?v=6.5.2 https://it.kensan.net/wp-content/uploads/2023/03/cropped-icon-32x32.png TypeScript | さゆフィクション http://it.kensan.net/it 32 32 TypeScript と webpack( + yarn)でWebアプリ開発環境を構築する https://it.kensan.net/typescript-webpack.html Mon, 13 Mar 2023 23:27:03 +0000 http://3.113.9.194/it/?p=828 TypeScript と webpack( +yarn)でWebアプリ開発環境を構築していきます。

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

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

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

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

]]> コピペでできるVuejs × TypeScriptな環境でchartjsでのグラフ描画 https://it.kensan.net/vuejs-x-typescript%e3%81%aa%e7%92%b0%e5%a2%83%e3%81%a7chartjs%e3%82%92%e4%bd%bf%e3%81%86.html Fri, 17 Apr 2020 02:54:00 +0000 https://verdy-it.xyz/itblog/?p=139 Vuejs × TypeScriptな環境でchartjsを使ってグラフを描画してみます。

コピペで実際にグラフ描画まで行けます。

インストールからプログラムの書き方まで記載しています。

完成イメージは以下となります。

chartjs

棒と折れ線の複合グラフを描画していきます。

本記事でやること
  • 棒と折れ線の複合グラフを描画
  • 使うもの
    • Vuejs
    • TypeScript
    • chartjs

 

vueプロジェクトの作成

Vueのインストールとプロジェクトの作成をして、Vueの表示確認まで行います。

やること

Vueのインストール
プロジェクトの作成
Vueの表示確認

vueインストール

まずはvueをインストールします。

npm install -g @vue/cli

vueプロジェクトの作成

次にプロジェクトの作成をします。

vue create chart

「chart」の部分がプロジェクト名です。

vueプロジェクト作成

上記のように表示されます。TypeScript を利用するために 「Manually select features」 を選択します。

vueプロジェクト作成

TypeScriptを選択(上下キーでカーソル移動してスペースで選択)します。

あとはお好みで選択してプロジェクトを作成する

vueプロジェクトの起動

cd <プロジェクト名>
npm run serve

上記コマンド実行後、「http://localhost:8080/」でアクセスできます。

アクセス時すると、以下のような画面が表示されます。

プロジェクト起動

次はchartjsのインストールをします。

vue-chartjsのインストール

次に以下コマンドでchartjsをインストールする

npm install vue-chartjs chart.js
npm install @types/chart.js -D

vueファイルの作成

環境は整ったのでvueファイルを修正・作成していきます！

まずsrcフォルダ内の「App.vue」の修正。「src/App.vue」の記述を全て削除し、以下の通り記載します。

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

次に「App.vue」から呼ばれる「src/components/HelloWorld.vue」ファイルを修正します。

「src/components/HelloWorld.vue」の記述を全て削除し、以下の通り記載します。

<template>
  <div class="chart-container">
    <Chart :chartData="chartData" :chartOptions="chartOptions" :chartStyles="chartStyles" />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import { ChartData, ChartOptions } from "chart.js";
import Chart from "./Chart.vue";

@Component({ components: { Chart } })
export default class HelloWorld extends Vue {

  // チャートのオプション
   chartOptions: ChartOptions = {
    maintainAspectRatio: false,
    tooltips: {
      mode: 'index'
    },
    scales: {
      yAxes: [
        {
          id: "1",
          position: "left",
        },
        {
          id: "2",
          position: "right"
          
        }
      ]
    }
  };
  // チャートのスタイル: <canvas>のstyle属性として設定
   chartStyles = {
    height: "100%",
    width: "100%"
  };
  // チャートのデータ
   chartData: ChartData = {
    labels: ['ラベル1','ラベル2','ラベル3','ラベル4'],
    datasets: [
      {
        type: "bar",
        label: "説明１",
        data: [1000,2000,1500,1750],
        fill: false,
        lineTension: 0,
        borderColor: "#00008b",
        yAxisID:"1" // Y軸のIDを指定 
      },
      {
        type: "line",
        label: "説明２",
        data: [1,2,5,2],
        fill: false,
        lineTension: 0,
        borderColor: "#ff0000", 
        yAxisID:"2" // Y軸のIDを指定 
      }
    ]
  };

}
</script>

最後に「src/components/HelloWorld.vue」から呼ばれる「src/components/Chart.vue」ファイルを作成します。

このファイルはchartjs描画用コンポーネントで、他のvueからでも、必要な値「chartOptions」「chartStyles」「chartData」を渡してあげればグラフの描画が可能となります。

<script lang="ts">
import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
import Chart from "chart.js";
import { Line, Bar,mixins } from "vue-chartjs";

@Component({})
export default class LineChartComponent extends Mixins(Line, Bar, mixins.reactiveProp) {
  @Prop()  chartData!: Chart.ChartData;
  @Prop()  chartOptions!: Chart.ChartOptions;

  @Watch('chartData')
  onChartDataChanged() {
    this.load();
  }
  mounted() {
    this.renderChart(this.chartData, this.chartOptions);
  }
  load() {
    this.renderChart(this.chartData, this.chartOptions);
  }
}
</script>

完成! Vue・TypeScript・chartjsを使用したグラフ

chartjs

まとめ

Vuejs × TypeScriptの環境でchartjsでグラフ描画ができました！

やったこと

環境構築：Vuejs × TypeScript
chartjsで棒と折れ線の複合グラフを描画

]]> vue.jsでテキストボックスの内容を強制更新したい場合は「$forceUpdate」を使う https://it.kensan.net/vuejs%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e5%86%85%e5%ae%b9%e3%82%92%e6%9b%b8%e3%81%8d%e6%8f%9b%e3%81%88%e3%81%9f%e3%81%84%e3%81%aa%e3%81%a9%e5%bc%b7.html Sat, 11 Apr 2020 03:07:05 +0000 https://verdy-it.xyz/itblog/?p=134 vue.jsでテキストボックスに入力された値が不正であった場合に、入力値を無視してテキストボックスをカラにしようとしたが、これがなかなか上手くいかなかった。

具体的には、数値を入れるとこに日本語が入れられた場合は、日本語を無視してテキストボックスをカラで更新するみたいな処理がうまく動作しませんでした。

挙動を見るとカラでの更新が上手く行ったり行かなかったり不安定な挙動。。。

そんなときは「$forceUpdate」を使用したら確実に更新できる！ということがわかりました！

「$forceUpdate」にたどり着くまでに半日くらいかかりました。

$forceUpdateについて公式ページに、以下の記載があります。

Vue インスタンスに再描画を強制します。インスタンス自身と slot コンテンツに挿入された子コンポーネントだけで、全ての子コンポーネントに影響しないことに注意してください。

API — Vue.js
Vue.js - The Progressive JavaScript Framework
v2.ja.vuejs.org

$forceUpdateを使うと、強制的に再描画できるということですね！

]]> TypeScriptとJavaScriptの違い-型宣言・クラス・ジェネリクス https://it.kensan.net/typescript%e3%81%a8%e3%81%af%e3%80%80javascript%e3%81%a8%e3%81%ae%e9%81%95%e3%81%84.html Sat, 28 Mar 2020 12:08:48 +0000 https://verdy-it.xyz/itblog/?p=131

TypeScriptとJavaScriptの違いについて書いていきます。

具体的には、型宣言・クラス・ジェネリクスについて書きます！

まず、TypeScriptとは？についてです。

TypeScriptとは、JavaScriptを拡張して作られたものですが、JavaScriptとは違い静的型付けのクラスベースオブジェクト指向言語です。

TypeScriptをコンバートすると、JavaScriptのコードに変換されるため、JavaScriptが動く環境であればすぐに使うことができます。

JavaScriptのライブラリなども使用でき、互換性は抜群！！

では、TypeScriptとJavaScriptの違いについて、書いていきます！

JavaScriptとの違い

大きな違いは以下の3点かと思います！

JavaScriptとの3つの違い

動的型付けから静的型付けになった
クラスが使える
ジェネリクスが使える

静的型付け

以下のように型を宣言できる

let flag: boolean = false; // boolean型
let decimal: number = 256; // 数値型
let word: string = 'hello'; // 文字列型

クラスが使える

以下のようにクラスが使える。interfaceやextendも使える

class User {
  name: string
  age: number
  constructor {name: string) {
    this.name = name;
  }
}
const user= new User('test user')

ジェネリクスが使える

ジェネリクスとは「抽象化されたデータ型」を表現する機能

実際に利用される時に、型を確定させるという使い方が可能です。

型だけが違う同じ機能を持つ関数やクラスは、ジェネリクスで1つ用意しておくことで、再利用性ができ、ソースコードの保守性が増します。

let getArray = <T>(value: T): T[] => { // <T>という抽象的な型を宣言
  return [value, value, value];
};

console.log(getArray<number>(1)); // 実行時に<T>の部分に型を指定してあげる

 

 

]]> TypeScriptの変数や引数宣言時の?(クエスチョンマーク)と!(ビックリマーク)が意味するもの https://it.kensan.net/typescript%e5%9e%8b%e5%ae%a3%e8%a8%80%e5%ad%97%e3%81%ae%e3%82%af%e3%82%a8%e3%82%b9%e3%83%81%e3%83%a7%e3%83%b3%e3%83%9e%e3%83%bc%e3%82%af%e3%81%a8%e3%83%93%e3%83%83%e3%82%af%e3%83%aa%e3%83%9e.html Sat, 28 Mar 2020 05:50:44 +0000 https://verdy-it.xyz/itblog/?p=127 TypeScriptの変数・引数宣言時のクエスチョンマークとビックリマークについてです。

まず結論から！以下の通りになります！

結論

クエスチョンマーク演算子：必須じゃないよ〜(省略可能だよ〜)という意味です。コンパイラにNULLの可能性があるかも〜と伝えているイメージです。

ビックリマーク演算子：必須だよ〜(省略不可だよ〜)という意味です。コンパイラにNULLの可能性はないよ〜と伝えている感じです。

メンバ変数・引数の「?:」

// 例①メンバ変数
interface Props { className?: string; children?: string; }
// 例②引数
const test = (x?:number):void=>{ console.log(x); }

メンバ変数・引数の?:(クエスチョンマーク＋コロン)は、必須じゃないときにつけます。

省略可能ということです。

変数宣言時の「!:」

// 例①変数
let name!: string;

変数宣言時の!:(ビックリマーク＋コロン)は必須のときにつけます。

省略不可(変数を使う時には、必ず変数に値が割り当てられている)ということです。

まとめ

まとめです！

まとめ

メンバ変数・引数の?:(クエスチョンマーク＋コロン)は、必須ではないときに使う
→省略可能

変数宣言時の!:(ビックリマーク＋コロン)は必須のときに使う
→省略不可(変数を使う時には、必ず変数に値が割り当てられている)

 

TypeScrpt公式ページはこちら

The starting point for learning TypeScript
Find TypeScript starter projects: from Angular to React or Node.js and CLIs.
www.typescriptlang.org
 ]]> コピペでできるLaravel + Vue.js + TypeScriptなMacのローカル開発環境 https://it.kensan.net/laravel-vue-js-typescript.html Fri, 20 Mar 2020 06:14:13 +0000 https://verdy-it.xyz/itblog/?p=112 Laravel + Vue.js + TypeScriptでローカル開発環境を作っていきます。

Laravel + Vue.jsの環境構築は構築は色んなことに情報があると思うので、

より安全な開発を行うことができるTypeScriptを導入したバージョンの環境構築について記載していきます。

コピペでできるのでお試しください。

インストール＆プロジェクト作成

composer create-project laravel/laravel --prefer-dist sample_app
cd sample_app
yarn install
npm i -D vue
npm install vue-template-compiler --save-dev
npm install --save vue-property-decorator

環境設定

tsconfig.jsonを追加

{
  "compilerOptions": {
    "outDir": "./built/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es2015",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "target": "es5",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "include": [
    "resources/assets/ts/**/*"
  ]
}

vue.shims.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

webpack.mix.js

let mix = require('laravel-mix');

mix.ts('resources/assets/ts/app.ts', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

package.json(scripts内のパスのみ修正)

{
    "private": true,
    "scripts": {
        "dev": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "ts-loader": "^6.2.1",
        "typescript": "^3.8.3",
        "vue": "^2.6.11",
        "vue-property-decorator": "^8.4.1",
        "vue-template-compiler": "^2.6.11"
    },
    "dependencies": {
        "webpack": "^4.42.0"
    }
}

 

resources/assets/sass/app.scss

とりあえず空ファイル作成

resources/views/welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel</title>
  <link rel="stylesheet" href="/css/app.css">
</head>
<body>
<main>
  <div id="app"></div>
</main>
<script src="/js/app.js"></script>
</body>
</html>

resources/assets/ts/app.ts

import Vue from 'vue';
import bootstrap from './bootstrap';
import AppComponent from './components/App.vue';

bootstrap();

const app = new Vue({
  el: '#app',
  render: h => h(AppComponent)
});

resources/assets/ts/bootstrap.ts

import Axios, { AxiosStatic } from 'axios';

declare global {
  interface Window {
    axios: AxiosStatic;
  }
  interface Element {
    content: string;
  }
}

export default function bootstrap() {

  window.axios = Axios;

  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

  let token = document.head.querySelector('meta[name="csrf-token"]');

  if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
  } else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
  }

}

resources/assets/ts/components/App.vue

<template>
  <div class="App">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h1>{{ message }}</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';

  @Component
  export default class App extends Vue {
    message = 'Laravel + Vue.js + TypeScript';
  }
</script>

<style scoped>
  h1 {
    text-align: center;
    margin: 4rem 0;
  }
</style>

実行

ターミナルを２つ起動し、それぞれのターミナルで下記のコマンドを打ち込む。

こうする事で、TypeScriptは自動的にコンパイルされる。

npm run watch
php artisan serve

 

]]>