00:06
神経質やせ男です。今回はJavaScriptを書いていて、 これは便利だなぁと思った変数の加工についてのお話です。
今作っているのは料理レシピデータベースアプリ。 以前作った箇所分時間タイマーと比べると、
タイマーの細かい設定がない分、理解は早く進んでいます。 その中で今回気づいたのが、JavaScriptは変数を加工して使えるという点です。
例えば今回、画面を切り替える関数があります。 レシピ登録画面と登録済みレシピを見る画面。
この2つをボタンで切り替える仕組みです。 その時に使っているのがこんな書き方です。
ビューハイフンという文字に変数をくっつける。 つまり、ビュープラスレジスター、ビュープラスビューワーという形ですね。
HTML側にはビューハイフンレジスター、 ビューハイフンビューワーというIDがあらかじめ用意されています。
そして関数の引数にはレジスター、ビューワー、 このどちらかが入るようになっています。
するとJavaScript側で文字を組み合わせるだけで、 正しいHTMLのIDを作ることができます。
つまり一つの関数で画面切り替えができる。 これがかなり便利でした。
さらにもう一つ、ナビゲーションボタンの ハイライト処理でも同じことをしています。
ここでは、nav-の後ろにregかviewかをつける必要があります。
そこで使われているのが参考演算子。 条件によってregまたはview、どちらかを使うかを切り替えています。
これによってボタンのIDと一致するように処理が作られているんですね。
こういう書き方をすると関数をたくさん作らなくても、 少ないコードで柔軟な処理ができる。
これはJavaScriptの強みだなぁと感じました。
ただし注意点もあります。 それは変数の設計が重要になるということです。
IDの名前の付け方やルールがバラバラだと、 この方法は逆に混乱の原因になります。
つまり設計がしっかりしていれば便利、 雑だとカオスになるという感じですね。
今回のレシピアプリでは、その辺りを意識して IDの命名ルールを揃えてみました。
こういう細かいところがプログラムの品質にも影響してくるんだなぁと、 少しずつ実感しているところです。
ということで今回はJavaScriptの変数加工の便利さについてのお話でした。
次回はBase64画像処理の仕組みを解説についてお話しする予定です。
ご静聴ありがとうございました。
