00:06
神経質やせ男です。 AI時代のものづくりラジオ、本日も始まりました。
今回のテーマは、DATSU-動けばOK。
シアバスクリプトに品格を与えるリファクタリング技術です。
前回はとにかく動かない、というトラブルを解決するのに必死でした。
なんとかエラーを潰して無事に動くようにはなったんですが、
後、行動を見渡すと、まあ見事なスパゲッティ状態。
自分でもこれはちょっと触りたくないな、と思うレベルでした。
そこで今回は、動くから一歩進んで美しく保てる行動にするための改善に取り組みました。
まず最初に手を付けたのが、オンクリックの廃止です。
これまで、HTMLのボタンの中に直接クリックしたらこれをやれ、という命令を書いていました。
一見わかりやすいんですが、これが実は厄介。
例えば、シンセーションの横にここに反抗してくださいとマジックで書いているようなものです。
ルールが変わったら全部書き直しです。
つまり、HTMLとJavaScriptはぺったりくっついてしまっている状態。
これを解消するために使ったのが、AddEventListener。
JavaScript側に受付窓口を用意して、そこにイベントを登録する形に変えました。
こうすることで、HTMLは見た目に専念、JavaScriptは動きに専念、役割分担がはっきりします。
さらに大きいのが拡張性です。
例えば、クリックしたら保存するだけでなくて、ログを取る、色を変える、みたいな処理も後からどんどん追加できる。
しかもHTMLは一切触らずに。
これがいわゆる品格のあるコードです。
そしてもう一つ、今回意識したのがデータの流れ。
見た目だけじゃなくて、中で何がどう動いているのかも整理したくなってきました。
スパゲッティ状態ってコードだけじゃなくて、頭の中の絡まっているんですね。
だから次はデータをどう運ぶか。
具体的にはHiddenFieldやFormDataを使ったデータ管理に踏み込んでいきます。
とりあえず動くからずっと使える。
この差はほんの少しの設計意識で生まれます。
ということで今回はJavaScriptに品格を与えるリファクタリングのお話でした。
お知らせです。
先日発売した新刊、会社公認爆速仕事術、管理者権限なしでできるPCマーク改造ですが、おかげさまで多くの方に手に取っていただいています。
無料期間は終了しましたが、現在はKindleのUnlimited読み放題にも対応しています。
会員の方は追加料金なしで、そうでない方も数百円の投資で一生もののPC時短作りが手に入れます。
事務作業を1日15分短縮できれば、1ヶ月で約5時間の自由時間が生まれます。
03:00
その5時間を介護や趣味、学習に当てたい方はぜひ概要欄のリンクからチェックしてみてください。
次回は全員揃ってから動け、JS段取り術についてお話しする予定です。
ご静聴ありがとうございました。