読書メモ 「これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん」
これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほんを読んで
HTML, CSS, JavaScriptの基本から、レスポンシブ, JQuery, Ajax, SPAフレームワーク(Vue.js)まで、基本的なことが幅広く丁寧に説明されているので、フロントエンドの要素技術の全体像と成り立ちを知るにはちょうどよい良書でした。
自分としては以下のような成果がありました。
1つのアプリを作るうえでどのような流れでデザインしていけばよいかがわかった
- HTMLで必要な要素を並べる
- CSSのレイアウト調整に必要な単位にdiv, spanなどで要素をまとめる
- CSSでレイアウトを整える
- JavaScriptで動きをつける
本書ではフォーム画面を例に、この流れに沿ってデザインを整えていくので、理解しやすかったです。
実際の現場でこういう流れになるのかはわかりませんが。。
自分がCSSにかなり疎いことがわかった
Webデザインには必須のCSSですが、なんとなく「CSS=デザイナ向け」というイメージがあって、Webアプリにはそこまで必要ない、適宜bootstrapとか使えばほぼ知らなくてもいける、とか思っていました。
しかし、もちろん細かい知識は要らないかもしれませんが、この本で説明されているレベルの基本事項は必須知識でした。
プログラムから操作する対象をまとめるのによくdiv, spanを使うわけですが、それらのレイアウトを調整するのにCSSが必須だからですね。
div, spanの使いどころが悪いと、CSSセレクタでの指定の仕方がぐちゃぐちゃになったりするので、CSSで操作すべき範囲をよくイメージしてHTML構造を作るのが大事だと思いました。
CSSノーマライズ/リセットの概念、@import、CSSプリプロセッサ、もこの本で初めて知りました。
まあbootstrapなどのCSSフレームワークを使えばそれほど知らなくてもできるのは正しいかもしれないのですが、そもそも基礎知識がないと、フレームワークの使いどころがわからないレベルでした。
JQueryから最近のSPAフレームワークへの成り立ちが理解できた
素のJavaScriptにおける「DOMエレメントの指定の煩雑さ」をJQueryが解決し、JQueryにおける「DOMツリー構築の煩雑さ」を最近のSPAフレームワークが解決している、ということでした。
（細かいことを言えば、コンポーネント化とか、もっともっといろいろな要素があるのだろうと思いますが、まだ初心者なのでよくわかっていません）
JQueryや各フレームワークを学ぶ際に意識するポイントがわかった気がします。もっと学んでいきたいと思います。
JQueryとVue.jsで同じことをするアプリを書いてみた
Qiitaの投稿を検索してタイトルを表示するだけ。
JQueryからVue.jsになるとHTMLタグにidをつけなくてもいいことや、JavaScript側ではHTML構造を意識する必要がないあたりに、特に書きやすさの差を感じました。
