【実体験】プログラミング初学者がBootstrapを理解する方法

プログラミング

こんにちは、のくと申します。

 

以前よりisaraという会社のWebページの模写に取り組んでいます。

その中で、今までのHTMLとCSSだけではなかなか処理が大変そう(に感じた)部分が、Bootstrapというフレームワークを利用することでとても簡単に記述することができました。

 

昨日初めてBootstrapを学習し始めたのですが、isaraを模写するために必要な最低限のbootstrapを理解することはできたので、今日はどのようにBootstrapを学習したかを共有したいと思います。

 

私がどのくらいかというと、半年前にHTML/CSSで挫折したのち、今月からまたHTML/CSSとJavascriptおよびjQueryとReactをProgateを使って学習しているくらいの人間です。

 

ちなみに、その部分というのが下のリンクの先の画像になります。

画像と文章をいい感じに並べるのが、今までの私のHTMLとCSSの技術では難しかったのですが、Bootstrapを活用することで簡単に再現できました。

 

この部分を作るために必要な技術を学ぶ方法

私がBootstrapを理解するために利用したのはYouTubeでした。

特に、この動画を丸々一本利用して学習しました。

この動画では、BootstrapとHTML, CSSのみを用いて、1つのWebページを作り上げるという趣旨の動画です。

 

Bootstrapと何なのか、Bootstrapの様々なクラスについて解説している記事などもありますが、それらより先に、この動画で実際にコードを書きながら学ぶ方が良いと思います。

 

なぜならば、実際に書いて初めてしっかり考え理解するようになるからです。

読んだだけ、見ただけでは、理解した気にはなってもいざエディタを前にするとどうして良いかわからなくなってしまいます。

 

なので、まずは実際にどのように使うのかを自分で模写しながら理解する方が効果的なのです。

 

では、具体的にこの動画をどのように活用するかを話したいと思います。

 

まずはその動画を開き、テンプレートのファイルをダウンロードする

最初にやることは、その動画の概要欄にあるテンプレートファイルをダウンロードすることです。

 

これをダウンロードしておくことで、動画でも端折られているHeadタグの中身やその他CSSが記述されているので動画と全く同じように進めていくことができます。

また、このテンプレートファイルの中にはそのWebサイトを作るために必要な画像やGifも揃っているので、合わせてダウンロードしておきましょう。

 

動画を適宜止めながら模写する

準備が整ったら、ひたすら写経するのみです。

ただし、動画を流しっぱなしだと結構速いペースで進んでいくので、適宜止めながら、スペルミスがないように模写していきましょう。

 

また、動画内だけでなく、自分でも記述したコードが正しく反映されているかGoogle Chromeなどで自分で書いたHTMLを開きながら確認することも忘れずに行うと良いと思います。

 

わからないものはその都度調べる

私のような初学者ならば、おそらく

どうしてクラス名を指定するだけでこんなに体裁が整ったレイアウトになるのか?

と疑問を抱かずにはいられないと思います。

 

その時は、必ず立ち止まってその単語で検索するべきです。

検索して、その単語の意味を知って初めて、そこにそのクラスを指定する理由が理解できるようになります。また、その時他の記述の仕方であったり、類似のクラスなども知ることができるので、自分でコードを書くときにも活きてきます。

 

最後に、別の模写などでbootstrapを使ってみる

この動画を見終わったら、ある程度のbootstrapは知ったことになります。

 

あとは、自分で考えてコードを書いてみることで本当に理解します。

具体的には、他のwebページを模写してみることです。

 

私は、冒頭にも掲載しましたように、isaraというwebページを模写するためにbootstrapを用いました。

 

とりあえずやってみる、そしたら次がある

今回の話は、もはやbootstrapに限った話、もっと言えば、プログラミングに限った話ですらありません。

 

つまり、本や動画を見てわかった気になるのではなく、実際に手を動かし頭を働かせて初めて理解に至るということです。

 

Bootstrapについて私は、HTMLとCSS知っていれば良くないか?と懐疑的な立場でした。しかし、冒頭のようにレイアウトがちょっと複雑になるだけで、それまでの私の

HTML/CSSの技術では手も足も出なくなってしまうような場面に出くわしてしまいます。

 

そして、私はbootstrapについて懐疑的な立場であっただけでなく、その存在に高い壁を感じていました。いわゆる難しそうなのでやりたくない、というような感情です。

 

しかし、いざやってみると、とても便利だし内容はとてもシンプルで洗練されているものでした。それこそフレームワークなだけあって、HTML/CSSの知識さえあれば分かるものでした。

 

兎にも角にも、今回Bootstrapをある程度理解できたことで、isaraの模写はまた一歩前進することができました。

引き続き、模写を頑張っていきたいと思います。

 

このページのさらに下には、jQueryのアコーディオンがあるなどまだまだ乗り越えるべきハードルはありますが、まさにとりあえずやってみるの精神と、理解するためのProgateやYouTubeの教材をフルに活用していきたいと思います。

 

では今日はこの辺りで終わります。

最後までお読みいただきありがとうございました。

 

コメント