Web初学者がBootstrapとjQueryどちらから手をつけるか？＋サンプルサイト設計手順【38web-3】

こんにちは、38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。

今日は写真の3つの本（HTML5+css3、Bootstrap、jQuery）を読み終えたので、その内容を整理しようと思います。

書籍をもとに整理すると、簡単なWebサイトの製作の流れとしては、次のような流れになるかと思います。（ここでは下層ページは除いて、まずトップページのみについてまず整理）

＜Webサイト（②からはトップページ）の製作の流れ＞

① サイトマップの作成（書くべきコンテンツの整理）＊Webサイト全体を考慮
② ワイヤーフレーム（ページの骨組み）の作成（ツールあり、ノートに鉛筆でも可）
　＊この辺りで、使う言語やツール（BootstrapとかjQueryとか）を考慮しておく
③ cssセレクタ設計（idやクラスの名前や区切りを考える）
④ デザインカンプの作成（デザインの入ったモックアップ画像、お絵かきツールなどでも可）
⑤ 原稿の作成（文字のみ）
⑥ HTMLマークアップ・コーディング（タグで囲む、③のcss用セレクタをつける）
⑦ cssコーディング（③のクラスを元に、④のデザインを実装）
⑧ 外部のパーツで動く機能の入れ込み（拡張的なグローバルナビ、スティッキーヘッダー（動くヘッダー）、カルーセル（横にスライドする画像）、ギャラリーなど）

という順番かなと思います。

HTML/css、Bootstrap、jQueryの使い分けはどうする？

①〜⑦までなら、HTML5+css3があればできるので、最も簡素なサンプルサイトはここまでで良いでしょう。

ただ、Bootstrapがあればこの①〜⑦を簡単にこなしつつ、⑧まで同時にできる可能性があるということを学びました。

具体的に、Bootstrap4で使えそうだなと思った機能は、こちらのnoteに書いてます。

これを、自力で一生懸命HTML+cssで実装したあとに、「Bootstrapならすぐできたじゃん！」となるのは、あまりにも時間がもったいないなと。

もちろん、そういう経験も必要なんでしょうが・・・せっかくあるなら使った方が良いです。

ただ、流石にcssを全く打ったことがない人がいきなりBootstrapから入ると、わけがわからなくなるし、どっちの話かわからず混同するので、まずcssを触った方が良いと思います。ついでにJavaScriptがなんであるか、の知識も必要だと思います。

（そう思うと、Bootstrapだけで結構敷居高いな・・・。まあ、各スキルの本をかじれば良いのです）

私のサンプルサイト設計構想

私の場合は、単純化のため次の流れで複数のサンプルサイトのバージョンを作ろうと思ってます。

＜サンプルサイトバージョン）
ver.1： HTML5+css3のみ
ver.2：Bootstrap4
　パーツ候補：ナビゲーションバー、パンくずリスト、リストグループ、カルーセル（JS）、タブ切り替え、アコーディオン、モーダルダイアログで画像をUP（jQueryギャラリーの前身になりそう））
ver.3： jQuery
　パーツ候補：見え隠れサイドバー、スライドショー、スティッキーヘッダー、ギャラリー機能）

懸案事項：
・ver1と2は無駄が多そうなら融合するかも・・・
・ver2は、JavaScriptなしとありで分けた方が良いかも

こんな感じでしょうか。

設計構想だけは広がってますが、前職がWeb業界的にいうとフロントエンド？の人なので、実際コード書くとなると時間かかりそうです。

最初はDreamWeaverも使って一気に！と思いましたが、多分わけわからなくなるので、ちらっと本みてとりあえずテキストエディタ（mi）でやると良さそう。

コードをプレビューしてくれるWebコーディングツールもあるようなんで、ちょっと見てみましょうか。

＊見つけたサイトメモ

ワイヤーフレームについては、このあたりに無料ツールが載っていました。

ワイヤーフレームツールを使って、Web制作を快適に！無料で使えるワイヤーフレームツール14選 | デジ研

今日はここまで。

【この勉強ログは、マガジンにしています。フォローしてね。】

38からのWebエンジニア学習LOG【マガジン】｜フェニックスA子｜note