NgRx使ってみる
TL;DR.
はじめに
Angularでアプリを作っていると状態管理というかデータの取り回しについて困ることが多々あったりする。
そこでいろいろ調べた結果やっぱりRedux最強説がっぽい。
自力でReduxチックに実装したこともあるけど、
既にAngularに最適化されたライブラリがあったからそれを使おうというのが今回のテーマ。
ngrxとは
端的に言うとAngular向けRedux。
Angularに向けてRxJS使って設計されているって公式サイトに書いてあった。
インストール
# 状態管理ライブラリメインとなるモジュール npm install @ngrx/store
サンプル作成
公式サイトのCounterを参考にTODOアプリを作ってみる。
ng new ngrx-sample
からスタート。
必要なファイルを先に作っておく。
# action $ mkdir src/app/action && touch src/app/action/todo.action.ts # reducer $ mkdir src/app/reducer && touch src/app/reducer/todo.reducer.ts
action
基本的にはチュートリアルのまま。
ただ、今回は任意の値が欲しかったから、追加時にはconstructorで値を受け取っておく。
import { Action } from '@ngrx/store'; export enum ActionTypes { Add = 'TODO_ADD', Delete = 'TODO_DELETE', Reset = 'TODO_RESET' } export class Add implements Action { readonly type = ActionTypes.Add; // 追加したい文字列を受け取る constructor(public payload: { text: string }) { } } export class Delete implements Action { readonly type = ActionTypes.Delete; } export class Reset implements Action { readonly type = ActionTypes.Reset; }
reducer
これも基本的にはチュートr(ry
一応副作用が無いように追加の時にはスプレッド演算子使って、削除の時にはフィルター使った。
それ以外は基本そのまま。
import { Action } from '@ngrx/store'; import { ActionTypes } from '../action/todo.action'; export const initialList: Array<string> = []; export function todoReducer(state = initialList, action: Action): Array<string> { switch (action.type) { case ActionTypes.Add: // 末尾に新規のものを追加 // state.push(action['payload']['text'])だとstateが変わってしまうのでNG return [...state, action['payload']['text']]; case ActionTypes.Delete: // 末尾を削除 // state.pop()だとstateが変わってしまうのでNG return state.filter((value, index) => index !== (state.length - 1)); case ActionTypes.Reset: return []; default: return state; } }
app.module.ts
名前が違うくらい。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { StoreModule } from '@ngrx/store'; import { todoReducer } from './reducer/todo.reducer'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, StoreModule.forRoot({ todo: todoReducer }) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
UI
TODO登録するUI。
テキストボックスと「追加」、「削除」、「リセット」の3ボタンを置いただけ。
追加したTODOはリスト表示する。
app.component.html
<input type="text" #text><br> <button type="button" (click)="add(text.value)">Add</button> <button type="button" (click)="delete()">Delete</button> <button type="button" (click)="reset()">Reset</button> <ul> <li *ngFor="let todo of todolist">{{todo}}</li> </ul>
app.component.ts
import { Component } from '@angular/core'; import { Store, select } from '@ngrx/store'; import { Observable } from 'rxjs'; import { Add, Delete, Reset } from './action/todo.action'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public todo$: Observable<Array<string>>; public todolist: Array<string> = []; constructor(private store: Store<{ todo: Array<string> }>) { this.todo$ = store.pipe(select('todo')); this.todo$.subscribe(res => this.todolist = res); } public add(value: string) { this.store.dispatch(new Add({ text: value })); } public delete() { this.store.dispatch(new Delete()); } public reset() { this.store.dispatch(new Reset()); } }
まとめ
今回使ったのはNgRxが提供してるライブラリの中でも一番とっつきやすいところをやってみた。
APIコールとか副作用があるものに向けた@ngrx/effects
とかもあるからそのうち触ってみる。
参考サイト
Slackの会話をWatsonで分析する
はじめに
ある日Watsonを使ってみようと思い何をするか悩んでました。
また別のある日Slackの会話を何かに使えないかと思って、データを抜くことを考えてました。
そしたらなんとSlackのデータは公式で取れるじゃないですか。
※詳細はSlackの公式から
これは組み合わせるしか無いと言うのが今回のテーマ。
やりたいこと
WatsonでSlackの会話を分類。
どのような話題がされているか分析する。
という名目でホントはWatsonとPython使いたいが本音。
使うもの
Watson
使うサービスはWatson Assistant。
会話(文章)の意図を分類するのはNLC(Natural Language Classifier)があるけど、
ライトアカウントでは使えなかったのでAssistantを使った。
多分、正しい使い方では無いけど、やりたいことはできるので今回はよしとする。
ちなみにNLU(Natural Language Understanding)は別物。
略称だけ覚えてるとややこしくなるので注意(自分だけかも知れないけど)
Python
Assistantに会話を投げるのはPythonからやる。
後、Slackの履歴を扱うのもやる。
Python使うのは単純に勉強したいから。
cURLでもJSでもJavaでもRubyでもなんでも良いと思う。
やり方
- ダウンロードしてきた履歴から分類に活かせそうなチャンネルを選別する
- 選別したチャンネルから学習データとして使えそうなデータを選別する
- 選別した学習データをAssistantに学習させる
- 分類をかける文章をAssistantに投げる
- 分類された結果を分析する
チャンネル選別
比較的内容が偏りそうなものを選ぶ。
今回は技術の話とアニメの話と食事の話と+α(完全に身内ネタで例えることも無かったもの)。
学習データ選別
個人的にはWatsonは学習させられるのが最大のメリット&デメリットだと思う。
メリットと感じるのは学習データに特化して頭が良くなるから。
逆にデメリットと感じるのはゴミが混じると順調に頭が悪くなるから。
と、言う理由で学習データを選別する。
ただし、残念ながらその手の話題に詳しく無いので今回はざっくり以下を基準とした。
- 10文字以上100文字以下であること
- 名詞と動詞が含まれること
- URLでないこと
- その他いらないと思ったもの(Slack固有のメッセージとか)
1.の理由としては短すぎるのは言葉になっていない可能性があるから。(うん。そうだね。と言った相槌など)
逆に長過ぎるのも学習データとして参考にならなそうだから(おそらく会話のような文章では無いと考えられるから)。
2.の理由は単語のみだけじゃなくてちゃんと日本語っぽいものを選定したかったから。
名詞動詞は形態素解析書けて単純に有る無しだけを見た。(形態素解析の話はまた今度。)
3.はURLなんかあってもしょうがないから。
Assistantに学習させる
Assistantの学習はGUIでできるから、学習データ(CSV形式)を用意する。
生成したプログラムはGitに上がっているのを参照。(そのうちきれいに作り直す)
最終的には以下の用にデータ, Intent名
という形にする。
Angularとjsでフロント作るよ言われた,Development scriptがデフォルトでタイマー起動ができるから1時間おきに走らせてる,Development
ちなみにIntentは会話の意図を指定するところ。
本来の用途のChatbotならパソコンが壊れたんだけど or パソコンの画面がつかないんだけど→故障
みたいな意図を設定するんだと思う。
今回は用途が違うから、Angularとjsでフロント作るよ言われた→Development(技術的な話)
の様に分類として使う。
AssistantはEntityとか色々設定できるけど今回はこれだけ使う。
詳しい設定は公式ドキュメントがあるからそちらを参照。
この手のドキュメントには珍しく、日本語で書いてある。
※ただし、最新版であるとは限らない。
仕方ないけど、英語の方が更新早い上に別に同期とか取られて無いと思う。
Assistantに文章を投げる
今回は雑談メインのチャンネルをAssistantに投げる。
全部投げようと思ったらアホほどあったから、一旦自分のデータに絞ることにした。
自分のデータに絞るにはusers.json
を参照しないといけなくて地味にめんどくさい。
jsでサラッとやってしまった。エラー処理は特に気にしない。
(ホントはこんな書き方しないと思う。。。)
Assistantに投げる処理は公式リファレンスを参照。
コードはGitに。
一応Assistantに投げるテキストは8文字以上 & URLじゃないものにした。
'use strict' const fs = require('fs'); const usersjson = require('./users.json'); const myId = usersjson.find(user => user.name === 'ユーザー名').id; const getJsonData = (path) => { const jsonData = []; fs.readdirSync(path).forEach(file => { jsonData.push(JSON.parse(fs.readFileSync(`${path}/${file}`))); }); return jsonData } const getText = (jsonData) => { const myText = []; jsonData.forEach(data => { data.filter(detail => detail.user === myId).map(filtered => filtered.text).forEach(text => myText.push(text)); }); return myText; } fs.writeFileSync('./myText.txt', getText(getJsonData('チャンネルフォルダ')).join('\n'));
結果を分析する
おそらく数学的な統計学的な正しい分析方法があると思う。
残念ながらその辺りがわからないので、単純にカテゴリ/総数
の単純な割合で取得する。
今回は前述の通りの4種類 + Assisに投げなかったテキスト(その他とする)の5種類で分類する。
Assistantの確信度が低いものもその他に振り分けて良いと思ったけど、
想像以上に分類される事がなかったので今回はやめる。
結果は下記の通り。
カテゴリ | 分類数 | 出現率(%) |
---|---|---|
技術 | 997 | 26.47 |
アニメ | 710 | 18.85 |
+α | 295 | 7.83 |
食事 | 111 | 2.95 |
その他 | 1653 | 43.89 |
合計 | 3766 | - |
ちょっとした考察もどき
今回その他に分類する条件(Assistantに投げない条件)を8文字未満にしていた。
どうやら想像以上に8文字って打たないらしい。
加えてAssistantの確信度について今回全く見ないでこの結果だったという事は実際はもっと少ない値が出ることになる。
実際Assistantの結果の中には確信度98%です!って言ったハズレの分類や58%くらいですっていうアタリもあった。
という事で次回?に向けてのToDoは大体下記の通り。
ToDo
- 投げる文字数選定
少なすぎるのは意味ないから、投げなかったデータから最低値を考える。
現時点の予想では5.6文字何じゃないかなと - Assistantの学習
今回の学習データは無駄では無いけど、おそらく質としてはあまり良くないと思われる。
使ったデータをクレンジングするだけでも結構変わると思うからまずはそこから。
(記号入っている。明らかにジャンル違うとかを消せれば良いかなと) - 学習データを均等に用意する
実はIntentに登録されてるデータ数がまばら。
現状、技術話題が一番多かった気がするから今回の結果はある種当たり前かもしれない。(データが多い→判別されやすい。)
単純に分類しやすい話題なだけだったかも知れないけど。 - ちゃんとテストする(Assistant)
今回何もテストしないでデータ入れただけなので、次は用意したデータの8割学習、2割テストとかにしたい。
まとめ
一応やりたいことはできた。(Watson使うだけ。Python使うだけ)
データ計測もイマイチだけど、将来的はbotなり、WebなりCLI以外で動くようにしたいなとか考えている。
そもそもなんちゃって解析からレベルを上げるところが大事そう。
Vue.jsを使ってみる
TL;DR.
はじめに
主に使っているのはAngularだけど、フロントエンドやっているのに他の名前しか知らないですはどうなんだろうと思い勉強を決意。
目標は色んな所に乗ってるVueのコードが読めること。
後は、Angularとの違いとかもちゃんと自力で説明できると良いなくらい。
※ちなみに公式サイトに他FWとの比較は載ってる。
ついでに前々からやろうと思ってたSCSSも触れてみる。
Vue.jsとは
JavascriptのUIを構築するためのFW。
UIメインだけど、SPAも構築可能。
作成者はEvan You。
詳しくはVue.jsの公式サイトに書いてある。
インストール~セットアップ
# cliのインストール $ npm install -g @vue/cli # プロジェクトの作成 $ vue create 【プロジェクト名】 Vue CLI v3.0.5 ? Please pick a preset: default (babel, eslint) > Manually select features # 色々効かれるのでお好みで ? Check the features needed for your project: TS, Router, CSS Pre-processors, Linter, Unit, E2E . . . # インストールが始まり、下記が表示されて終わる ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project ts-vue. 👉 Get started with the following commands: $ cd ts-vue $ npm run serve
アプリ作成
よくサンプルとして作られるToDoアプリを作ってみる。
ただし、やるのはUIだけ。テキストボックスに入れてボタンを押したらデータが入るところで満足する。
上で作成されたプロジェクトをベースにファイルは書き換えじゃなくて追加でやる。
Component作成
とりあえず書いたものから。
ファイルはcomponents
配下にList.vue
という名前で作成。
Vue.jsでは1つのファイルにHTML(templateタグ内)とjavascript(scriptタグ内。ts使う時はlang="ts"で書ける)、css(scssとか他のを使いたければ、これもlangを変える)を書くらしい。
Angularでも同じファイルに書けないことは無いだろうけど、あんまり見ないしこれは新鮮だった。
ちなみにtemplateタグ内にはDOMを1つしか書けないっぽい。なので、サンプルでは<div></div>
で囲って1つだけにしてる。
作ったアプリでやっていることは、テキストボックスの内容をボタンを押したときにリストに追加するだけ。
作り方としては、テキストボックスの中身はscriptと双方向でバインド。
ボタンを押した時にテキストの内容をリストへ追加している。
リストはループで全件表示。
Angularみたく、addTodo(data.target.value)
みたいな書き方をしたかったけど、やり方が分からなかったからこのやり方。
List.vue(components/List.vue)
<template> <div> // v-model="todo"と書くことで変数todoと双方向でバインドできる。 // angularで言うとこの[(ngModel)]="todo" <input type="text" id="data" v-model="todo"> // @clickでclickイベントをハンドリングできる。 // angularで言うとこの(click)="addTodo"と同じ。 <button @click="addTodo()">登録</button> <ul id="list"> // v-forは普通のループ。 // angul(ry *ngForと同じ。 <li v-for="todoItem in todoList"> {{todoItem}} </li> </ul> </div> </template> <script lang="ts"> import Vue from 'vue'; import Component from 'vue-class-component'; import { Prop } from 'vue-property-decorator'; // @Component デコレータはクラスが Vue コンポーネントであることを示します @Component({}) export default class ListComponent extends Vue { // Componentの呼び出し元から値を受け取りたいときはProp()でできる。 @Prop() public addItems!: string[]; private todo: string = ''; private todoList: string[] = []; constructor() { super(); this.todoList = this.todoList.concat(this.addItems); } private addTodo() { this.todoList.push(this.todo); this.todo = ''; } } </script> <style lang="scss" scoped> ul { margin-left: auto; margin-right: auto; width: 300px; li:nth-child(even) { color: blue; } } #list { text-align: left } </style>
Todo.vue(views/Todo.vue)
<template> <div class="todo"> // LitComponentを呼び出し、addListを渡してる。 <ListComponent :addItems="addList"/> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import ListComponent from "@/components/List.vue"; @Component({ components: { ListComponent, }, }) export default class Todo extends Vue { public addList = ['test1', 'test2']; } </script>
実行する
package.jsonにscriptが追加されているのでそれを使う。
npm run serve
で起動する。挙動はng serve
と同じ感じ。
ちなみ他にはnpm run build
とnpm run lint
が追加されてた。
以下画像が実行イメージ。意味もなく偶数列の色を変えてみた。
まとめ
思ってた以上にとっつきやすかった。
ちょっと勉強すれば簡単なSPAなら作れそうな感じ。
1つのファイル(.vueファイル)にHTML、Javascript、CSSがまとまってるからわかりやすい気がする。
人気が出るのもなるほどなーって思った。
Angularのリアクティブフォームまとめ
はじめに
ReactiveFormこそAngularの花的な話をどこかで見た気がしたから軽くまとめる。
リアクティブフォームとは
リアクティブフォーム は、時間とともに入力値が変わるフォームを扱うためのモデル駆動なアプローチを提供します。
このガイドでは、シンプルなフォームコントロールの作成と更新から、グループ内の複数コントロールの使用、フォームのバリデーション、高度なフォームの実装の方法を説明します。
Angular日本語ドキュメントによると上記の通りらしい。
使った感じ、入力フォームとか動的にNG出したいときとかに使えそう。
Angular日本語ドキュメントをなぞりながら簡単にまとめる。
前提条件
Angular使えてCLIも使える前提
準備
とりあえずCLIでプロジェクト生成する。
$ ng new reactive-form-test
生成されたapp.module.ts
に下記を追加する。
やることはReactiveFoms用にmoduleをインポートするだけ。
import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ // other imports ... ReactiveFormsModule ], }) export class AppModule { }
使ってみる
生成されてるapp.component.html
とapp.component.ts
を下記の通りに変える。
import { Component } from '@angular/core'; import { FormControl,Validators } from '@angular/forms'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { public control = new FormControl('', [ Validators.required ]); }
入力欄:<input type="text" [formControl]="control" required> <div *ngIf="control.invalid && (control.dirty || control.touched)"> <span *ngIf="control.hasError('required')">必須です。</span> </div>
やってること説明
とりあえず上記サンプルはここから動きを確認できる。
やっていることはフォームの必須チェック。
一旦テキストボックスにカーソル入れた後、フォーカスアウトをすると必須のメッセージが表示される。
htmlでdivを入れているのは、フォーカスが当たるまで、メッセージを表示しないようにするため。
<div *ngIf="control.invalid && (control.dirty || control.touched)">
これが無いと、初期表示時未入力 = バリデーションNGということでいきなりメッセージが出てくる。
大抵の場合、それは本意じゃ無いと思うから上を入れておくのが無難だと思う。
おまけ:ngModelで代用得してみる。
public requiredNg = false; public text = ''; public valid(target: string) { this.requiredNg = target.length === 0; }
入力欄:<input type="text" [(ngModel)]="text" (blur)="valid($event.target.value)"><br> <span *ngIf="requiredNg">必須です。</span>
やっていることとしては、テキストボックスの内容を双方向でバインドして、フォーカスアウト時に長さをチェックするということ。
上の様にすればできなくは無いけど、リアクティブフォームを使ったときに比べるとわかりにくいし冗長な気がする。
ちょっと使いやすくする
リアクティブフォームは使いやすい気がするけど、個人的に使いやすいようにちょっと変える。
理由としてはチェックしたいフォームが複数になるとhtmlが見にくくなっていくから。
おまけとして、formControlをグループにまとめる。
とりあえずエラーメッセージをコンポーネントを作るところから始める。
コンポーネント作成はng g component ng-message
でOK。
<div> ユーザID:<input type="text" formControlName="userID" required> <div *ngIf="userID.invalid && (userID.dirty || userID.touched)"> <div *ngIf="userID.hasError('required')"> 必須です。 </div> <div *ngIf="userID.hasError('maxlength')"> 最大5文字です。 </div> </div> </div> <div> パスワード:<input type="text" formControlName="password" required> <div *ngIf="password.invalid && (password.dirty || password.touched)"> <div *ngIf="password.hasError('required')"> 必須です。 </div> <div *ngIf="password.hasError('minlength')"> 最低8文字です。 </div> </div> </div> <div> e-mail:<input type="text" formControlName="email" required> <div *ngIf="email.invalid && (email.dirty || email.touched)"> <div *ngIf="email.hasError('email')"> e-mailアドレスのフォーマットにしてください。(xxx@hogehoge.com) </div> </div> </div>
個人的に見やすくした結果
結果から書くと下記の様にした。
app.component.html
<form [formGroup]="formGroup"> <div> <div> ユーザID:<input type="text" formControlName="userID" required> <app-ng-message [form]="userID"></app-ng-message> </div> <div> パスワード:<input type="text" formControlName="password" required> <app-ng-message [form]="userID"></app-ng-message> </div> <div> e-mail:<input type="text" formControlName="email" required> <app-ng-message [form]="email"></app-ng-message> </div> </div> </form>
app.component.ts
import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators, ValidatorFn, AbstractControl } from '@angular/forms'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { public formGroup = new FormGroup({ userID: new FormControl('', [ Validators.required, //必須 Validators.maxLength(5) // 最大5文字 ]), password: new FormControl('', [ Validators.required, Validators.minLength(8) // 最低8文字 ]), email: new FormControl('', [ Validators.email, // e-mailフォーマットチェック this.duplicateEmailValidator() // 任意のバリデーション(今回は重複チェック) ]) }); constructor() { } ngOnInit() { } private duplicateEmailValidator(): ValidatorFn { return (control: AbstractControl): {[key: string]: any} | null => { const ngList = [ 'hoge@example.com', 'huga@test.co.jp' ]; const duplicate = ngList.includes(control.value); return duplicate ? {'duplicateEmail': {value: control.value}} : null; }; } public get userID() { return this.formGroup.get('userID'); } public get password() { return this.formGroup.get('password'); } public get email() { return this.formGroup.get('email'); } }
ng-message.component.html
<div *ngIf="form.invalid && (form.dirty || form.touched)"> <span *ngIf="form.hasError('required')"> 必須です。 </span> <span *ngIf="form.hasError('maxlength')"> 最大5文字です。 </span> <span *ngIf="form.hasError('minlength')"> 最低8文字です。 </span> <span *ngIf="form.hasError('email')"> e-mailアドレスのフォーマットにしてください。(xxx@hogehoge.com) </span> <span *ngIf="form.hasError('duplicateEmail')"> 入力頂いたアドレスは重複しています。 </span> </div>
ng-message.component.ts
import { Component, OnInit, Input } from '@angular/core'; import { FormControl } from '@angular/forms'; @Component({ selector: 'app-ng-message', templateUrl: './ng-message.component.html', styleUrls: ['./ng-message.component.css'] }) export class NgMessageComponent implements OnInit { @Input() form: FormControl; constructor() { } ngOnInit() { } }
app.component.ts
のFormGroup
でFormCotntrol
をまとめている。
まとめたControlは個別にバリデーションを設定できるので、一応全部バラバラにしてみた。
emailのところでは自作のバリデーションを追加している。
Angular日本語ドキュメントによると(英語のドキュメントも同じだけど)Heroの名前にbobが使えないいじめ仕様だから変えてみた。
+そもそも公式の例だとValidators.pattern(/bob/i)
って書けば良いはずなので、もうちょっと有り得そうなパターンにしたかったから。
ちなみにapp.co,ponent.ts
にgetterを作っているのは、
FormGroupから特定のデータを取るにはFormGroup.get('フォーム名')
としなきゃ行けなくて、html他で参照するときに使いづらいから。
(+公式に書いてあるから。)
エラーが有った場合には作成したng-message.component
にFormControlをそのまま投げている。
ng-message.component
で受け取った値に応じたメッセージを表示するという仕組み。
これでメッセージ追加する時はここに足せばいいし、呼び出し側でも長い条件書かなくていいから楽になったのではないかと。
まとめ
リアクティブフォームについて簡単にまとめて簡単に使ってみた。
今までは双方向バインドでええやんって思ってたけど、これは便利かもしれない。
今後は積極的に使っていきたい所存。
参考サイト
Angular7アップデート内容ざっくり和訳
はじめに
Angular7がリリースされたらしい。
とりあえず更新内容をざっくり確認。
英語は得意じゃないので間違いもあるかも。
原文
主なアップデート
アップデート方法
Angular6以降はng update
が叩けるのでそれで行う。
それ以前のバージョンなら一旦6に上げるか、最初から7を入れるのが良いのかも?
# アップデートコマンド
$ ng update @angular/cli @angular/core
アップデート詳細
CLIプロンプト
CLIプロンプトにSchematicsが追加された。
Schematicsコレクションにx-prompt
keyを追加することでパッケージを使える様になるっぽい。
Schematicsが何かわからなかったから調べないと恩恵を受けられなそう。
アプリケーションパフォーマンス
開発でのみ必要なreflect-metadata
Polyfillがそのままproductビルドに組み込まれていたため、
v7からはpolyfill.ts
から自動で削除されるようになった。
JITモードでビルドする時は組み込まれ、productビルド時にはデフォルトででは削除するようになったとのこと。
更にv7からは初期バンドルが2MBを超えると警告、5MBでエラーとなるようになった。
既存に組み込む場合は、angular.json
に下記を加えればいいと思う。
"budgets": [{ "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }]
Angular Material & CDK
v7でVirtual Scrolling
とDrag & Drop
が実装された。
ただし、v7にすると既存の部分で少し見た目が変わるかもとのこと。
Virtual Scrolling
リストの見えてる部分についてDOMからロード、アンロードをするようになった。
そのため、大量スクロールがあるページでは、とても高速化されたっぽい。
詳しくはこちら。
Drag & Drop
Angular Component Dev Kitで動作する。
要素のD&Dができる。よく見るやつだから説明もいらないと思う。
一応詳しくはこちら。
Improved Accessibility of Selects
mat-form-field
内で普通のselect
を使った時のアクセシビリティが改善された。
素のselect
にはフォーマンス、アクセシビリティ、ユーザビリティのメリットがあるけど、
オプション制御ができるmat-select
も残すらしい。
Angular Elements
Angularの要素はカスタム要素のWeb標準を使用したコンテンツ投影をサポートするようになったらしい。
何のことかよくわからなかった。
その他
ドキュメントが更新された
公式ドキュメントにAngular CLI
が追加。
今まで(おそらく)githubにしか情報が無かったからこれはありがたい。
依存パッケージが更新された
- TypeScript:3.1
- RxJS:6.3
- Node10(Node8も継続サポート)
まとめ
機能的には大きなアップデートは無いっぽい?
パフォーマンスとか容量とか良く話題になる気がするから、そこら辺が改善されるのは良さそう。
どっちかって言うとTSとかRxJSのアップデートの方が影響ありそう。
(それぞれ何が今と変わるかまでは調べてない)
とりあえず試しにサンプルプロジェクト作ってバージョン上げてみようと思う。
express-generatorの結果をTypeScriptにリファクタリングしてwebpackでビルドする
TL;DR.
初めに
最近Expressを使うときが多々ある。
generatorがあるから雛形は一瞬で作れる。
当たり前だけど生成されるのはjs。
このままでも良いには良いんだけどTypeScriptで書きたい。
そこで、TSにリファクタリングした上でWebpackでビルドしてみる。
webpackなのはtscでビルドするのがめんどくさいから。
準備
express-generatorをインストールしてプロジェクトを作成するとこまでやっとく。
上のサイトから見ればすぐ。
生成されたpackage.json
のinstallされているものはコピーしておく。
リファクタリング
とりあえず拡張子を全部.ts
にするとこからリファクタリングスタート。
方針としては、tsで動くようにするのとvar
とかやめるのをメインにする。
※所々jsのままかも知れない...
app.ts
生成されたファイルの中でサーバの設定を書いてあるファイル。
一応クラス化して似たような初期化はfunctionにまとめた。
error処理周りはそのまま返却するよう修正。
ソースは下記の通り。
import * as createError from 'http-errors'; import * as express from 'express'; import * as path from 'path'; import * as cookieParser from 'cookie-parser'; import * as logger from 'morgan'; import { router as indexRouter } from './routes/index'; import { router as usersRouter } from './routes/users'; class App { public express: express.Application = express(); constructor() { this.middleWareInit(); this.routerInit(); this.errorHandlerInit(); } /** * middleware系初期化 */ private middleWareInit() { // viewEngineは今回使わないのでスルー // view engine setup // express.set('views', path.join(__dirname, 'views')); // express.set('view engine', 'jade'); this.express.use(logger('dev')); this.express.use(express.json()); this.express.use(express.urlencoded({ extended: false })); this.express.use(cookieParser()); this.express.use(express.static(path.join(__dirname, 'public'))); } /** * router初期化 */ private routerInit() { this.express.use('/index', indexRouter); this.express.use('/users', usersRouter); this.express.get('*', (req, res) => { res.send(`${req.url}にアクセスしたね。`); }); } /** * error handling系初期化 */ private errorHandlerInit() { // catch 404 and forward to error handler this.express.use(function (req, res, next) { // next(createError(404)); res.send(createError(404)); }); // error handler this.express.use(function (err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {}; // render the error page res.status(err.status || 500); res.send('error'); }); } } // appをexport export default new App().express;
index.ts & users.ts
生成されたファイルの中でルーティング系の設定、処理を書くところ。
ここはサラッと。ただtsに書き換えただけ。
両方共内容は大して変わらないから下のサンプルはindex.ts
。
import * as express from 'express'; const router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.send('in index'); }); export { router };
www.ts
生成されたファイルの中でサーバの実行ファイル。
こいつを叩くと起動する。
ほぼそのまま。起動するだけだから良いかなと。
/** * Module dependencies. */ import { default as app } from '../app'; import * as debug from 'debug'; import * as http from 'http'; /** * Get port from environment and store in Express. */ const port = normalizePort(process.env.PORT || '3000'); app.set('port', port); /** * Create HTTP server. */ const server = http.createServer(app); /** * Listen on provided port, on all network interfaces. */ server.listen(port); server.on('error', onError); server.on('listening', onListening); /** * Normalize a port into a number, string, or false. */ function normalizePort(val) { const port = parseInt(val, 10); if (isNaN(port)) { // named pipe return val; } if (port >= 0) { // port number return port; } return false; } /** * Event listener for HTTP server "error" event. */ function onError(error) { if (error.syscall !== 'listen') { throw error; } var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port; // handle specific listen errors with friendly messages switch (error.code) { case 'EACCES': console.error(bind + ' requires elevated privileges'); process.exit(1); break; case 'EADDRINUSE': console.error(bind + ' is already in use'); process.exit(1); break; default: throw error; } } /** * Event listener for HTTP server "listening" event. */ function onListening() { var addr = server.address(); var bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port; debug('Listening on ' + bind); }
Webpackでビルドする
必要なものはnpm install --save ts-loader typescript webpack webpack-cli
で入れとく。
webpack.config.js
は下記の通り。
実行するwww.ts
をentryにしておく。
出力はまとまっているのでserver.js
という名前にした。
const path = require('path'); module.exports = { mode: 'development', entry: './tsserver/bin/www.ts', target: 'node', module: { rules: [ { test: /\.ts$/, use: 'ts-loader' } ] }, resolve: { modules: [ path.resolve(__dirname, "tsserver"), 'node_modules' ], extensions: [ '.ts', '.js' ] }, output: { // 出力するファイル名 filename: 'server.js', path: path.join(__dirname, 'dist') } };
実行 & 確認してみる
事前にコピったpackage.json
の内容をexpress
コマンドを叩いたフォルダのpackage.json
に戻してインストール。
その後、node server.js
で実行。
結果は画像の通り。
まとめ
念願だったtsでExpressを書くことができた。
正直そもそもtsにする必要があるのか。
webpackでまとめる必要があるのかとかとかあるけど、気にしない方向で。
おまけ
静的ファイル返したい
res.sendFile('ファイル')
でOK。
今回の例だとしたみたいな感じ。
// app.tsのrouterInit内 this.express.use('/index', indexRouter); this.express.use('/users', usersRouter); this.express.get('*', (req, res) => { res.sendFile(path.join(path.resolve(''), './dist/index.html')); // res.send(`${req.url}にアクセスしたね。`); });
フォルダ構成変えないでビルドする
TypeScript(Javascript)の型判定まとめ
TL;DR.
TypeScript(javascript)で配列の型を調べる時は要注意。
IE滅ぶべし。
今回のソース
はじめに
ある日偉い人は言いました。
「これ、IEで動かしたいんだけど。」
運良く特に苦労も困りもしなかったけど、TS(JS)の型について改めて調べ直したから軽くまとめる。
型を調べる方法(前座)
typeof hoge
で調べる事ができる。
結果はコメントの通り。
const string = ''; const number = 0; const boolean = true; const nul = null; const object = {}; const symbol = Symbol('hoge'); let a; console.log(`string: ${typeof string}`); // string console.log(`number: ${typeof number}`); // number console.log(`boolean: ${typeof boolean}`); // boolean console.log(`nul: ${typeof nul}`); // object console.log(`symbol: ${typeof symbol}`); // symbol console.log(`a: ${typeof a}`); // undefined console.log(`object: ${typeof object}`); // object
ちなみにjavascriptに用意されている型は'object'と下記6個。
- string
- number
- boolean
- null
- symbol
- undefined
nullがnullじゃない罠。
ちゃんと見たければ下記のようにする。
結果は[object hoge]
の様になる。
これで基本的には型がちゃんと分かるはず。
const string = ''; const number = 0; const boolean = true; const nul = null; const object = {}; const symbol = Symbol('hoge'); let a; console.log(`string: ${Object.prototype.toString.call(string)}`); // [object String] console.log(`number: ${Object.prototype.toString.call(number)}`); // [object Number] console.log(`boolean: ${Object.prototype.toString.call(boolean)}`); // [object Boolean] console.log(`nul: ${Object.prototype.toString.call(nul)}`); // [object Null] console.log(`symbol: ${Object.prototype.toString.call(symbol)}`); // [object Symbol] console.log(`a: ${Object.prototype.toString.call(undefined)}`); // [object Undefined] console.log(`object: ${Object.prototype.toString.call(object)}`); // [object Object]
前座その2(配列編)
本編の前に最後の前座。
配列の場合はどうなるのよという話。
typeof
ではダメ。Object.prototype.toString.call()
でようやく配列だとわかる。
ちなみに配列か知りたいかどうかならArray.isArray()
を使えば困らない。
const arrayString = new Array<string>(); const arrayNumber = new Array<number>(); const arrayObject = new Array<object>(); console.log(`arrayString:${typeof arrayString}`); // object console.log(`arrayNumber:${typeof arrayNumber}`); // object console.log(`arrayObject:${typeof arrayObject}`); // object console.log(`arrayString:${Object.prototype.toString.call(arrayString)}`); // [object Array] console.log(`arrayNumber:${Object.prototype.toString.call(arrayNumber)}`); // [object Array] console.log(`arrayObject:${Object.prototype.toString.call(arrayObject)}`); // [object Array]
本編
で、今回困ったことは上記とは全く関係ない。
配列に特定の要素が含まれているか判定するのにArray.includes
というものがある。
const array = [1, 3, 5]; console.log(`array has 3 ? ${array.includes(3)}`); // true console.log(`array has 4 ? ${array.includes(4)}`); // false
実はこの関数がIEで動かない。IE11でも動かない。
これが困ったこと。
以下、今回やった解決策。
const array = [1, 3, 5]; /** * Array.includes()の代替 * @param array 検索される配列 * @param target 検索対象 */ const arrayIncludes = (array: any[], target: any ) => { // 配列無いならリターン if (array == null) { return false; } // 配列をループし、一致するものがあれば終了 return array.some(item => { return item === target; }); } console.log(`array has 3 ? ${arrayIncludes(array, 3)}`); // true console.log(`array has 4 ? ${arrayIncludes(array, 4)}`); // false
その他代替案
普通は下記のようにするのかも?
const array = [1, 3, 5]; // 見つかればindex.見つからなければ-1を返す。 if (array.indexOf(3) != 0) { console.log('array has 3'); }
なんで型の話をしたか
型が違うときにループする前にリターンしたいとか考えていたから。
記事書きなら思ったけど、別にtrue
になることは無いから気にしなくて良い気がしてきた。
まとめ
javascriptの型判定は意外とめんどくさい。
後IEは滅んでほしい。