今回のパートではBootstrapを導入していきます。Bootstrapは有名なWebフレームワークで、CSSを細かく指定せずにサイトをある程度形にできます。レスポンシブにも対応してくれる便利なツールです。Bootstrapを導入するとWebアプリケーションを効率よく開発できます。(今回のパートはBootstrap4の公式ドキュメントを参考にしてます)Bootstrapについて詳しく勉強したい方は以下の動画をご覧ください。本パートでは、下記の画像のように青色のボタンを表示するところまで実装していきます。公式ドキュメントを見ながら、Bootstrapを導入していきます。ドキュメントを見ながらやるので、導入方法を覚える必要はありません。(エンジニアは公式ドキュメントを見ながら実装することが多々あるので、ここでドキュメントを見るという行為に少しでも慣れていただければと思います。)では、実際に進めてみましょう。公式ドキュメントに沿ってBootstrapを導入まず今回導入するBootstrapの公式ドキュメントにアクセスしてください。Rails」のところを見てください。Gemfile」、直訳すると「Gemfileにbootstrapを追加」とあるので、Gemfileに以下のコードを追加します。Gemfileまたドキュメントのちょっと下にいったところを見てください。5.1以降を使用している場合はjquery-railsをGemfileに追加する必要があります。(本カリキュラムはRails5.1以降を使用しています。Gemfile今回のgemはGemfileの末尾に追加していだければ大丈夫です。installをすることによって追加したgemを反映させます。Gemfileは必要なgemリストでGemfile.lockには実際にインストールしたgemリストが入っています。installをターミナル上で実行してください。installこれでgemを追加できました。Bootstrapのstyleをimportするまたドキュメントを見てみましょう。app/assets/stylesheets/application.scss」とあるので、app/assets/stylesheets/application.scssにBootstrapのstyleをimportする記述を追記します。app/assets/stylesheets/application.scssという拡張子がscssのファイルは存在しないです。(拡張子がcssのファイルは存在します。)なのでファイルの拡張子を変更する必要があります。お使いのテキストエディタからファイル名を変更してもいいですが、ドキュメントにもあるようにコマンドを実行してファイル名を変更できます。app/assets/stylesheets/application.scssファイル名を変更したら、application.scssファイルを以下のように1行のコードに編集してください。(コメントアウトは削除されて構いません。application.scssapplication.jsにコードを追加またドキュメントを見てみましょう。application.js」とあるので、application.jsに以下の3行のコードを追加します。このときの注意点として、すでにかかれている以下のコードが一番下になるように、追記してください。.は現在のディレクトリにある全てのJavaScriptファイルを読み込むからです。jquery3などのコードが先に読み込まれてからでないと、エラーが起きる可能性があります。マニフェストファイルとディレクティブapp/assets/javascripts/application.jsが以下のようになっていれば大丈夫です。以上でBootstrapの導入は終了です。実際にBootstrapが機能するか確認します。BootstrapのComponentsの公式ドキュメントを参考に仮のボタンにBootstrapのクラスを当てます。app/views/pages/home.html.erbに以下のコードを追加してください。home.html.erbコードを追加したら、まずローカルサーバーを再起動してください。Cでサーバーを終了させることができます。server」コマンドでサーバーを立ち上げてください。)先ほどBootstrapのGemを追加しましたが、サーバーを一度再起動しないと追加したGemが反映されないからです。アクセスしてください。青色のボタンが表示されていればうまく動作しています。以上で今回のパートは終了です。"この評価の理由をお聞かせください。text:'12月28日~1月5日の期間は年末年始のため質問の回答が遅れる場合がございます。$('.announce').after(announce_text);。