[GAS]HTMLの構造を丁寧に理解する #5

今回はGoogle Apps Scriptで作成したTasksを使いながらHTMLの構造を丁寧に理解していこうと思います。

詳しくは動画で解説していますが、ポイントについてNOTEにまとめています。詳細について知りたい方は、動画をご覧くださいませ。

HTMLの構造を理解

学習のすすめ方

今回は、5回目になりまして、HTMLの構造を丁寧に理解していこうと思います。

学習の進捗図

前回がTasksアプリをGithubからコピーする方法について説明でしたので、今回は、より具体的なHTMLの内容説明に入っていきましょう。

HTMLのイメージ

HTMLのイメージ

HTMLのイメージに関して、作り始める前につかんでおいた方が、その後の習得スピードが上がると思いますので図にまとめました。

詳しくは動画の中で説明していますが、家に例えるとHTMLは骨組み、CSSはデザイン、Javascriptは機能的な部分にあたると考えると分かりやすいと思います。

検証を有効活用

「検証」を使う

HTMLの中身について理解するときに、どこからアプローチするのが良いでしょうか。

私の提案としては、Chromeの「検証」を使って理解するのは最も良いのではないかと考えています。

「検証」を表示

Chromeのブラウザで、右クリックを押すと「検証」のボタンがあるので、それをクリックします。検証の中を見ると、Element と言うところにHTMLファイルの中身が書いていたり、StylesというところにCSSの中身が書いていたりします。

検証を使いながら、HTMLとCSS、Javascriptの関係を見ていくというのが最も効果的なアプローチだと思いますので、中身については動画で解説していますので、詳細はそちらでご確認ください。

今回の学習まとめ

今回はテキストでまとめると、非常に複雑な内容になっていますので、動画で閲覧いただいた方に関してはより詳しく理解できたのではないでしょうか。

「検証」などを有効活用しながら、他の人が作ったコードの中身を理解するというのが、プログラミングが上達する上で最も大切なことだと思います。

このマガジンまとめ

学習のすすめ方

投稿記事と動画を併用しながら、このマガジンを最初から見ていただいた方は、仕事で使えるプログラミングスキルがアップしたのではないでしょうか。

もしGASに興味があれば、マガジンフォローやYoutubeチャンネル登録をお願いします。また今後も様々な仕事に役立つGASスキルを紹介していきますので、よろしくお願いします。