Web制作、Web開発の歩き方

7章:CSSフレームワーク、DOM操作

(最終更新日:2022.10.30)

「Web技術の全体像もおおよそ理解できる」

前回、Web技術の全体像、サーバーとクライアントの関係、バックエンドとフロントエンドの役割の違い、 Webフレームワークの概要について勉強した。 全体におけるその部分の役割を確認しつつ、学びを進めて欲しい。

■CSSフレームワーク
7章から再びフロントエンド(クライアントサイド)の話に戻る。

全体像を話しておいて何だが、Laravel、Ruby on RailsやDjangoのようなフルスタックフレームワークをいきなりやらない方がいい。 必要な技術を1つ1つ身に着けていった方が結局近道だ。確実に技術が身に着くと思う。 いきなり、ルーティング、データベースのCRUD、変数の割り当て、DOM操作、CSSフレームワークの活用、 全てを一気にやろうとしても普通の人は頭に入らない。まずは、フロントエンドの技術を学んでいく。 前回学んだ全体像を思い浮かべながら、サーバー側から貰ったデータを元にUIを構築していくという役割は認識しておこう。

CSSフレームワークの活用とDOM操作

フロントエンドでの「CSSフレームワーク活用」と「DOM操作」(左)

CSSフレームワークとは、その名の通り、Cascading Style Sheetsを使用して より簡単で標準に準拠したWebデザインを可能にするライブラリである。 具体的には、ボタンやフォーム、レイアウトなどWebページの実装に必要なコンポーネントや機能が詰まっている。 これを使うと、個人によるコードやデザインに統一性を持たせやすいといったメリットがある。 いきなりBootStrapを勉強しても良いのだが、ワシとしては、SkeletonBulmaあたりを使いこなした方が良いと思う。 CSSのみでレスポンシブデザインを実現しているので分かりやすい。これだけでも整ったWebサイトは充分作れる。 また、本サイトCSSフレームワークを使おうで全体像から学ぼう。 CSSフレームワークを使いこなし、カッコいいレスポンシブデザインのWebサイトを作ろう!

■DOM操作(JavaScript→jQuery→Vue)
CSSフレームワークをある程度使いこなせるようになったら、DOM(Document Object Model)操作に移ろう。いよいよ、ここからが本番だ。 「DOMって何?」「黒いモビルスーツ?」って思う人もいるかもしれないので、まずは このサイトでDOMをチェックしよう。 UIを自在にあやつるにはDOMが不可欠だ。 生のJavaScriptでDOM操作すると記述が煩雑で大変になる(querySelectorが登場して大分楽になったが)ことは、ちょっと使ってみれば分かるだろう。 それがjQueryを使うとシンプルになる。加えて、Ajaxの記述が楽、プラグインが豊富、 クロスブラウザ(IE対応)できることがハマり、2006年に登場、2011年をピークにして急速に普及した。 Web制作では今でもjQueryを使うところが多いので、DOM操作を学ぶ意味でも一度勉強して損はないと思う。 保守を行うこともあるかもしれない。 参考図書を一冊紹介(WebデザイナーのためのjQuery入門)するので、 適当に遊びながら作ってみるといい。 簡単に動かせるので、作る楽しさはあると思う。

そして、いよいよVueを学ぼう。なぜVueのようなフロントエンドのフレームワーク(FW)が出てきたかと言えば、Webアプリ開発が大規模で複雑なものになったからである。 その整理のために、MVCモデルを持つRailsなどのFWが活用され始め、その後、バックエンドとフロントエンドの分離が始まり、フロントエンドのコンポーネント化の流れが生じた。 これに伴い、VueやReactが誕生した。JavaScriptやjQueryだと、コンポーネント化して整理するのが難しかったのである。 詳しくは、JavaScriptの遍歴と現在を読んでみよう。 Vue.jsがどういうものかを、ここでごちゃごちゃ話すつもりはない。 公式ドキュメントと参考図書を参考に、Webサイトを作ってみよう。 また、東京都 新型コロナウイルス感染症対策サイトがgithubで公開されていて勉強になるので、 ある程度使えるようになったら見てみよう。Vueを効率的に使えるFW、Nuxt.js(Vue.js)で書かれている。

■参考図書、サイト
WebデザイナーのためのjQuery入門 髙津戸壮,小原司 技術評論社
Vue.jsのツボとコツがゼッタイにわかる本 中田亨 秀和システム
Vue.js&Nuxt.js超入門 掌田津耶乃 秀和システム
DOM操作の主流になるか!? セレクタAPIを使いこなそう
東京都 新型コロナウイルス感染症対策サイトのソースコード(github)