半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録28日目

更新日:

こんにちは、こずえです。
プログラミング学習記録28日目です。
サイト模写の続きです。

所感:今にも寝落ちしそうになりながら記事を書きました(´Д⊂ヽ

合計学習時間

前回までの時間:47.75[h]
今回の時間:2.00[h]
合計時間:49.75[h]

学習内容

前回に引き続き以下のサイトの模写です。

サイト模写の経過

前回と見た目が変わっていない?
そう、見た目は変わっていません。
なぜなら……。

WebサイトAirbnb01模写_w397px_5日目

「アラートを閉じたくて閉じたくて!」

アラートを閉じる

先にそっちを解決しちゃいました。欲に負けました。

進め方としては量の把握と進捗を上げるために全体を大体作ってから細部に入っていく方が良いと思います。

つまづき

つまづきについて簡潔に書きます。

アラートの×ボタンを押しても消えない

結論:jQuery、Popper.js(bootstrap.bundle.js、bootstrap.bundle.min.jsでも可)、bootstrap.js(minでも可)の順に読み込む。(必ずこの順番)

問題解決までの流れ

前提:元はBootstrap4のドキュメントにあったサンプルコード。

自分で問題の場所を探したり、原因を予想したりした後にエラー文で検索しましたが、時間をたくさん使っていたのでもう少し早めにするべきかなと思いました。

問題解決までにとった行動の流れは次の通りです。

  1. サンプルコードをコピペしなおしても動作しないことを確認した
  2. bootstrap.jsを読み込んでいなかったため読み込んだ
  3. サンプルコードに含まれているクラスなどの役割を調べた
  4. デベロッパーツールのconsoleに出ているエラー(※1)に気づいて、該当箇所を確認した(JavaScriptは全くわからないものの該当箇所の文字を含む部分のソースは見てみた)。
  5. javascriptの記述方法やアラート自体についての記事を読んで、記事内のサンプルコードを実行して動作することを確認した。
  6. エラー文字列で検索してjQuery、Popper.js、bootstrap.jsの3つが必要であることと、読み込む順序によってエラーが発生することを知った。
  7. 裏付けとしてBootstrap4のドキュメント内の検索ボックスから「slim」と検索して関連する記述(※2)を見つけた。

※1:コンソールに出力されたエラー情報

bootstrap.js:121 Uncaught TypeError: Cannot read property 'fn' of undefined
    at setTransitionEndSupport (bootstrap.js:121)
    at bootstrap.js:224
    at bootstrap.js:9
    at bootstrap.js:10

※2:

bootstrap Documentation Introduction

JS
Many of our components require the use of JavaScript to function. Specifically, they require jQueryPopper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
We use jQuery’s slim build, but the full version is also supported.

Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

解決までに読んだ記事

覚えている範囲で以下の記事を読んでいました。

-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.