【複数ページの動的コーディング】1つのjsファイルにまとめていたらエラー出現【解決済み】

現在、取り組んでいるしょーごさんのコーディング課題【中級Ex編】は下層ページを含めて4ページを作成します「。

今、動的なコーディングを実装していっていますが、様子をみるため1つのjsファイルにまとめてコーディングしていました(一応webpackでバンドル環境は構築していたのですが・・・)

すると、トップページや下層ページのコンソール出力がエラーで真っ赤なことに気づきましたΣ(ﾟ∀ﾟﾉ)ﾉｷｬｰ

しょーごさんが「提出時にはコンソール欄にエラーがないこと」とブログで書かれていたのを思い出しました。。。

結果的には、

const 定数名 = document.getElementById("top")
  //↑トップページのヘッダーあたりのdivにid属性を指定
if(!定数名){return:false;}

というような条件を該当するコード部分の中に組み込むことで無事解決しました。

これでトップページだけに動作させることが可能となり、エラー文も消えました。

ちなみに、swiperを使ってトップページのfvをアニメーションさせたい部分は

windows.onload = finction() {
　if(!定数名){return:false;}
　// 処理をかく
}

とwindows.onload=function()｛｝で囲みました。

【ただ・・・他にもっとちゃんとした解決策があるはず】

今回、チキンな私はモジュール化せずに(機能ごとに複数のjsファイルに分けずに)1つのファイルに書いていきました。だからこそ起こったエラーたちなのかもしれません。

ちゃんと機能ごとにモジュール化して、webpack(環境構築は済ませてある)を用いてバンドルすれば解決するのかも(これからやってみます)。

簡単なコードではバンドルツールを使ってみたことはありますが、実際の制作を前にして少し弱気になってしまい、今回のエラーに直面しました。ただ、1つのファイルで複数ページのコーディングをしなければ経験できなかったことだと、前向きに考えることにします。

今回のエラーはCSSの詳細度でぶつかる壁に似たものを感じました。

モジュール化してバンドルした時にこれが解決出来れば良いなと思います。

まだまだ勉強不足なので、モジュール化も頑張ります。

解決出来れば、また記事にまとめてみようと思います。