00:06
神経質やせ男です。こんにちは。 今日も始まりました、AI時代のものづくりラジオ。
今回は、動かない原因はプログラムのせっかちだった、というテーマでお話しします。 現在、介護家系シミュレーターの開発を進めているのですが、機能が増えすぎてHTMLコードが200行を超えてきました。
さすがに見づらいということで、見た目と動きを分ける、いわゆるJavaScriptの外出しに挑戦しました。 HTMLの中にベタ書きしていたJSを別のファイルに移してスッキリさせたんですね。
で、これは綺麗になったぞと思った瞬間、ボタンが全く動かなくなりました。 クリックしても無反応。昨日まで元気だったのに急に沈黙です。
え?なんで?と。
で、ブラウザの裏側、コンソールを見てみると出てきたのが、Cannot set propertiesof null、つまりそんなもの存在しませんと言われたんです。
いやいや、ボタンあるじゃん!と。
ここで気づいたのが、プログラムの性格です。
実はブラウザってHTMLを上から順番に読み込んでいくんですが、途中でJavaScriptを見つけるとその時点で実行してしまうんですね。
つまり、ボタンがまだ登場していないのにJSだけ先に動いてしまう。
例えるなら、お客さんがまだ来ていないのに受付が契約書を書かせようとしている状態です。
そりゃ相手がいないって怒られますよね。
じゃあどうするか。解決策はシンプルで、全部揃うまで待つこと。
それがDOM Content Loadedという仕組みです。
ページの読み込みが全部終わってから処理を実行する、いわば号令ですね。
さらに昔の柄のオンクリックではなく、AddEventListenerという形に変えることで、コードもかなりスッキリしました。
そしてもう一つ、Flaskの特有ポイント。
JSファイルの読み込みは普通に書くのではなく、URL-4という専用の書き方が必要でした。
これを知らないと、そもそもファイルが読み込まれないという落とし穴もあります。
今回の学びはシンプルです。
リファクタリングはただきれいにする作業じゃない、段取りを整える作業なんだなと。
順番を守る、役割を分ける、タイミングを合わせる、これだけでプログラムは驚くほど素直に動いてくれます。
ということで今回は、動かない原因はプログラムのせっかちだったというお話でした。
次回はさらにフロントエンドの整理を進めていきます。
お知らせです。
先日発売した新刊、会社公認、爆速仕事術、管理者権限なしでできるPC魔改造ですが、おかげさまで多くの方に手に取っていただいています。
無料期間は終了しましたが、現在はKindle Unlimitedの読み放題にも対応しています。
03:02
会員の方は追加料金なしで、そうでない方も数百円の投資で一生もののPC時短スキルが手に入ります。
事務作業を1日15分短縮できれば1ヶ月で約5時間の自由時間が生まれます。
その5時間を介護や趣味、学習に当てたい方はぜひ概要欄のリンクからチェックしてみてください。
次回はJSに品格を与える設計リファクターについてお話しする予定です。
ご静聴ありがとうございました。