フロントエンドをやったことがないので、お勉強のためにToDoアプリを作ってます。
kotapontan.hatenablog.com github.com
計画した作業と現在の状況、つまづいたところをまとめます。
step1.0
実装内容
- テキストフィールドにtodoを入力し、追加ボタンを押下すると下部に入力したtodoを表示する。
表示までできました。
TypeScriptでクラスを使ってみたけど、すでに構造が気持ち悪いことになっている。
step2.0
実装内容
- 追加したtodoにチェックボックスと削除ボタンを追加する。
- チェックボックスにチェックを入れると、todoに取り消し線がつき完了したことを表す。
- 削除ボタンを押下すると、todoが画面から削除される。
チェックボックスにチェックを入れると取り消し線をつけるところなど、躓いたのでまとめておく。
躓きポイント1
event.currentTargetからparentElementが取得できない
checkboxの親要素を取得したかったが、event.currentTargetにparentElementがなく怒られた。 同じようなことで困っていた人がQiitaに記事をあげていたので、参考にさせてもらいました。
Qittaの記事では、インターフェースを定義するやり方をされているが、同じやり方をやると
「TS2769: No overload matches this call.」が発生してしまった。
そのため、型アサーションで変換する方法にしました。
先に進むことを優先したので原因まで調べず・・・
// this.elementがEventTarget const element:HTMLInputElement = this.element as HTMLInputElement;
躓きポイント2
テスト時にreadonlyが指定されているプロパティに値を設定する方法が分からない
Eventを扱う処理が追加になったのでテストをしようとしたが、readonlyが指定されているプロパティへの値が設定できない。
そのため、追加した処理に対するテストが完了していない。
構造を見直す予定なのでその時に調べることにする。
step3.0
実装内容
- todoリストの見た目の改善
- レスポンシブルに対応する
Bootstrapを使うので、インストールする。
$ yarn add bootstrap $ yarn add jquery $ yarn add popper.js
webpackでBootstrapを使用するための設定をする。
$ yarn add -D style-loader css-loader
style-loaderとcss-loaderはwebpackでスタイルシートを利用するために必要なモジュール。
webpack.config.jsをカスタマイズする。
module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/, }, { test: /\.css$/, use: [ "style-loader", "css-loader" ] } ], },
Bootstrapでカスタマイズした結果がこれ。
ダサい。ほんと、ダサい。
デザイン考えるの難しい
自分がこんな画面にしたいというようなデザインにできない。
HTML、CSS、Bootstrap に関する知識がかなり不足していることを痛感した。
デザイナーさん、フロントエンジニアさん凄いな・・・
step3.0までやってみた結果
なんとなくTypeScriptやDOM操作、Webpackの使い方が分かってきた
やはり実際に手を動かした方が理解は早い。
分かってきたってだけでほんとに表面の理解に等しい。
期待通りに動作しなかったときの解析に時間がかかる
サーバサイドではログみて、ふーんって感じだけどフロントエンドではログがないのですぐに原因が分からない。
デバッグのやり方もよく分かっていないのでこれから、手を動かして理解していく。
画面レイアウトが１番高いハードルだ
CSSとかBootstrapを理解していないのもあるが、画面レイアウトが一番難しい。 これも、今後手を実際に動かして理解していくしかないなと思う。
まとめ
これからサーバサイドからデータを取得するような実装を入れていきます。
引き続き、手を動かして理解していこうと思います。
