Bootstrap4をマスターしたいか？ ならばこのコースを修めるがよい

2018/01/18に[Bootstrap4](https://getbootstrap.com/)が[正式リリース](https://blog.getbootstrap.com/2018/01/18/bootstrap-4/)され、評判もなかなか[悪くない](https://suguruguruguru.github.io/bootstrap4-experience/)ようです。

そんなBootstrap4の学習コースを勧める記事があったので紹介してみます。
以下は[Want to learn Bootstrap 4? Here’s our free 10-part course. Happy Easter!](https://medium.freecodecamp.org/want-to-learn-bootstrap-4-heres-our-free-10-part-course-happy-easter-35c004dc45a4)の日本語訳です。

# Want to learn Bootstrap 4? Here’s our free 10-part course. Happy Easter!

Bootstrap4はこれまでのライブラリを完全に書き直し、さらにいくつかの新機能とコンセプトをもたらします。
従って、これを学ぶためにはドキュメントの海に頭からどっぷり浸からなければなりません。

あなたの助けとなるために、我々は[Neil Rowe](https://twitter.com/neil_rowe_)([CodersGuide](https://www.youtube.com/user/CodersGuide)として知られている)とチームを組み、Bootstrap4を学び尽くす[無料のフルコース](https://scrimba.com/g/gbootstrap4)を作成しました。
Neilは元々、Bootstrap3で最も人気のある学習コースのひとつの作者で、我々は彼と一緒に仕事できたことをうれしく思います。

あなたも今すぐコースに参加することが出来ます。
[コースを修了するだけで](https://scrimba.com/g/gbootstrap4)、1時間以内にBootstrap4マスターになれます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Want to learn Bootstrap 4? 🚀<br><br>Check out this free 10-part course from <a href="https://twitter.com/neil_rowe_?ref_src=twsrc%5Etfw">@neil_rowe_</a> and you&#39;ll become a master within an hour!<br><br>And unlike regular videos, these screencasts are 100% interactive 🔥🔥<br><br>Happy Easter! 🐰<a href="https://t.co/I8dT6yUSh7">https://t.co/I8dT6yUSh7</a></p>&mdash; Scrimba.com (@scrimba_com) <a href="https://twitter.com/scrimba_com/status/978586879321956352?ref_src=twsrc%5Etfw">2018年3月27日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

どんなコースがあるのか見てみましょう。

## #1 Course introduction

![01.png](https://qiita-image-store.s3.amazonaws.com/0/26088/dccd04e7-11b2-b4fb-eb9c-01275052b2e3.png)

最初のスクリーンキャストでは、Bootstrap自体の概要と、Bootstrapがどんなユーティリティとコンポーネントを持っているかを紹介します。
Neilは、Bootstrap4の主なメリットについても取り上げています。

## #2 The Responsive Grid System

![02.png](https://qiita-image-store.s3.amazonaws.com/0/26088/46767c20-785e-4ba4-d28b-5548fba9dd9c.png)

ここではBootstrapの最も重要なコンポーネントのひとつ、レスポンシブGridシステムを取り上げます。
異なるサイズやオフセット、ブレークポイントを持つような様々なGridデザインを作成する方法を解説します。

## #3 Responsive Navbars

![03.png](https://qiita-image-store.s3.amazonaws.com/0/26088/4c584e2e-994c-1a4f-784d-09625d199681.png)

多くの人がBootstrapを選ぶ理由がnavbarコンポーネントです。
この講座では、画面の小さなデバイスではハンバーガーメニューに変わるレスポンシブなナビゲーションバーを構築します。

## #4 Modals

![04.png](https://qiita-image-store.s3.amazonaws.com/0/26088/43f49a70-d887-2fb6-5e2e-81b3d2033a00.png)

Bootstrapではモーダルを作るのも簡単で、モーダルはしばしば役に立ちます。
ここではモーダルを作る方法を順に学んでいきます。

## #5 Forms

![05.png](https://qiita-image-store.s3.amazonaws.com/0/26088/1e5cd5da-f097-2051-e816-5d9a07a34005.png)

フォームはほとんどのWebサイトにとって非常に重要な要素であり、フォームの作成方法は知っておくべきです。
ここではレスポンシブな登録フォームを作成する方法を学習します。
Gridシステムで学んだ内容が役に立つことでしょう。

## #6 List groups

![06.png](https://qiita-image-store.s3.amazonaws.com/0/26088/d0bfad00-c565-ec9b-c723-22b8cf3b7c13.png)

List groupsは様々な目的で使用できます。
たとえばサイドバー、メニュー、記事のリスト、その他好きなもの何にでも使うことができます。

## #7 Cards

![07.png](https://qiita-image-store.s3.amazonaws.com/0/26088/e66cb427-c5ec-5591-289e-5343026dcc58.png)

Bootstrap4は、カードと呼ばれる新しいコンポーネントを導入しました。
これは[Panels](https://getbootstrap.com/docs/3.3/components/#panels)、[Walls](https://getbootstrap.com/docs/3.3/components/#wells)そして[Thumbnails](https://getbootstrap.com/docs/3.3/components/#thumbnails)を置き換えるものです。
カードは柔軟かつ拡張が容易なコンテンツのコンテナです。
ここではカードを使って様々なコンポーネントを構築する方法を紹介します。

## #8 Tables

![08.png](https://qiita-image-store.s3.amazonaws.com/0/26088/1c6b4a2f-6d1c-df9c-3a10-f48a26179892.png)

Bootstrap4にはテーブルを作るための手段も豊富に存在します。
講座では、そのほとんどについてデモンストレーションを行います。
テーブルはオプトインです。
つまり、HTMLテーブルをBootstrapテーブルにするためには、能動的にテーブルクラスを追加する必要があります。
これはHTMLテーブルを自動的にBootstrapテーブルに変換していた以前の動作とは異なります。

## #9 Alerts

![09.png](https://qiita-image-store.s3.amazonaws.com/0/26088/7a1e2ebb-6b4a-baf4-e6f9-20c024281ab5.png)

アラートは特に興味をそそられるものではなく、また変更も少ないため、Bootstrap2や3を使っていたことがあればすぐに使えるようになります。
ただし、メッセージやアラートでユーザに通知を与えることは、Webサイトをより使いやすくすることに繋がるため、使い方を知っていることは必要です。

## #10 Navigation options

![10.png](https://qiita-image-store.s3.amazonaws.com/0/26088/c076f178-c1f0-f1e7-1a34-d14d68ff4046.png)

最後のコースはタブやドロップダウンを扱うナビゲーションバーです。
これは知っておくと便利ですが、グリッドほど重要というわけでもないので、コースの最後に来ています。

これらのコースを全て受講すると、Bootstrap4でWebサイトを構築することができるようになっているはずです。
それでも何か問題があって立ち往生した場合、解決のために[ドキュメント](https://getbootstrap.com/)が完備されています。

## The Scrimba format

最後に、講座を支えている技術についても紹介しておきましょう。
インタラクティブなスクリーンキャストツールであるScrimbaで構築されています。
"scrim"は一見ただの動画に見えますが、実際は完全にインタラクティブです。
つまり、スクリーンキャスト内のコードは編集することができます。
以下にその様子を紹介したgif画像があります。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Pause the screencast → Edit the code → Run it! → See your changes <a href="https://t.co/MJDSJOZolH">pic.twitter.com/MJDSJOZolH</a></p>&mdash; ラナ・クアール (@rana_kualu) <a href="https://twitter.com/rana_kualu/status/989819057523212288?ref_src=twsrc%5Etfw">2018年4月27日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

コードを理解するために実際にコードを動かしてみたい場合、あるいは単にコードをコピペしたい場合にも最適です。

これ以上は必要ないでしょう。
さあ、今すぐコースに参加しましょう！
ハッピーコーディング！


# 感想

ただ単に動画を見るだけのコースではありません。
動画を流し見つつ、気になったところがあればそこで停止して直接ソースを触って動作を即時確認できるという、いったいどうなってるのかよくわからない謎技術でできています。

ちなみに、この紹介記事は公開から僅か一日で4000以上のいいねを手に入れていました。
他の記事は多くてもせいぜい500程度なので、よほど多くの人が待ち焦がれていたのでしょう。
今では8万以上という、日本語圏ではちょっと考えられないほどの支持を受けています。