Angularを使ったツール作成記録
Angularをつかって行った工作について書きます。
概要
ツール名:Document Helper
使った環境:StackBritz
期間:だいたい3日
主な機能
機能としては、テキストエリアに文章を入力したら以下のメッセージを出します。
- 1文当たりの文字数が規定を超えた際に警告
- 指示語が入力された際に指示対象が明確であるかの確認
- 一定文字数が入力されたら賞賛のメッセージ
- 設定した目標文字数を入力したら賞賛メッセージ
使った機能
以上の機能を実装するために以下の機能を使いました。
inputarray=inputarea.split("。")
テキストエリアに入力された内容を"。"で区切って配列に収容しました。
inputarray[i].indexOf(demonstrative[j])!=-1
文が入力された配列に対して、指示語のリストであるdemonstrativeと部分一致を探しています。
部分一致があった場合-1を出力するので-1を捉えてメッセージを出力しました。
メッセージの出力にはngIfを使用しました。
初めはメッセージを配列に入れてngForを出力しようとしていたのですが、インデックスがない配列をngForで出力する方法が見つからなかったので方針転換しました。
ngIfを使ったメッセージの出力は以下のように行いました。
<div *ngIf="tooLongBoolean">1文当たりの文字数が多すぎます</div>
if (inputarray[i].length > this.upperlength) {
this.tooLongBoolean = true;
break;
} else {
this.tooLongBoolean = false;
}
こうすることで、文字数オーバーしたらtooLongBooleanがtrueになってメッセージが表示されるようになっています。
エラーとその解消
機能には問題がなかったものの以下のコンソールエラーが出ました。
ERROR Error: Cannot read property 'length' of undefined
ERROR Error: Cannot read property 'split()' of undefined
これらのエラーは長さを計る対象がないにもかかわらずlengthを使ったり、分割する対象がないにもかかわらずsplitを使ったりすると起きるそうです。
解決策としてはsplitなどを使っているエリアとsplitで作った配列が使われているエリア全体をif文で囲みエラーを出す条件でsplitなどを使わせないようにしました。
今後について
今後、今回作ったものをさらに拡張していきたいと思っています。
具体的には
- 語尾の揺れを指摘
- データベースと接続して文の保存
- それに伴ってログインログアウト機能
- 今は開発環境上で動いているだけなので本番環境で動かす
などをやっていきたいと思っています。そして定期的に技術ブログを書いていきたいと思っています。
技術ブログを書くのは初めてだったので必要な情報が落ちている可能性があると思いますが、その時は実際のコードを見てもう一方で改善点を教えてもらえると助かります。
Discussion