もりけん塾 JavaScript課題19 スライドショーとタブ切り替えの実装

もりけん塾 JavaScript課題19 スライドショーとタブ切り替えの実装

もりけん塾JavaScript課題19は、前回実装したスライドショーと課題16で実装したタブ切り替えを合わせる課題です。

難しかったところ

タブ切り替えとスライドショーの部分は、別々のjsonデータを取得しているので、エラーやローディングの表示を個別にしたいと思いました。

ローディングやエラー文は、同じ処理をするけれど、表示する箇所が違うため、共通化する部分を汎用的にするのが、なかなか難しかったです。

ローディング部分はモジュール化して、こんな感じの関数を作りました。ターゲットとなる要素は、引数parentにして、別々の箇所にそれぞれローディングを表示したい場合でも使えるようにしました。

import { createAttributedElements } from "../utils/createAttributedElements";

const showLoading = (parent) => {
    const loadingPlace = createAttributedElements({
        tag:"div",
        valuesByAttributes:{
            id:`${parent.id}-loading`,
            class:"loading-area"
        }
    })
    const loadingImage = createAttributedElements({
        tag:"div",
        valuesByAttributes:{
            class:"loading-image"
        }
    });
    parent.appendChild(loadingPlace).appendChild(loadingImage);
}

const removeLoading = (parent) => document.getElementById(`${parent.id}-loading`).remove();

export { showLoading, removeLoading };

実装箇所:

const initSlider = async () => {
    const slider = slide.sliderList;
    loading.showLoading(slider);
    try{
        const sliderData = await fetchContentsData(endPointURL.sliderData,slider,3000);
        if (!sliderData.length) {
            createErrorMessage("Sorry, we have no image.",slider);
            return;
        }
        slide.renderSliderElements(sliderData);
        slide.autoPlayById.start(sliderData.length);
    }catch(error){
        console.error(error);
    }finally{
       loading.removeLoading(slider);
    }
}

const initTab = async () => {
    const topics = tab.topicsList;
    loading.showLoading(topics);
    try{
        const newsData = await fetchContentsData(endPointURL.newsData,topics,);
        if(!newsData.length){
            createErrorMessage("Sorry, we have no news.",topics);
            return;
        }
        tab.renderTabContents(newsData);
        tab.changeTabContents(newsData);
    }catch(error){
        console.error(error);
    }finally{
        loading.removeLoading(topics);
    }
}

initSlider();
initTab();

今回は、もなかさんと、さえさんにレビューして頂きました!

まず、とにかくtypoが多すぎてさえさんに多大なレビュー負荷をかけてしまいました。申し訳ない。

typoは普通にバグになりえるし、レビューする人の負担が増えてしまうので、スペルミスを防ぐため、今後はVSCodeにスペルチェックしてくれるプラグイン入れることにします。

import,export

今回、関数を他のJavaScriptのファイルでも使うということをしました。

コードが書いてあるファイル以外で関数を使いたいときは、使いたい関数が書いてある元のファイルでexport,使いたいファイル先でimportします。

export { showLoading, removeLoading };

ワイルドカードでimportする場合

import * as loading from "./module/loading";

モジュール化した関数をimportするファイルは、type=”module”を指定してスクリプトを読み込みます。

<script type="module" src="./js/main.js"></script>

最終的な実装 CodeSandBox

最終的に、こんな感じになりました

VSCodeにCode Spell Checkerを入れる

今回、スペルミスが多発したので、少しでも未然に防げるように、VSCodeにスペルチェックできるプラグインを入れることにしました。

Code Spell Checkerというプラグインを入れると、スペルミスしている単語を波線で教えてくれます。英語以外にも、いろんな言語でチェックできるみたいですね。

こんな感じで、波線でスペルミスしている箇所を教えてくれます。便利!

Code Spell Checkerのより詳しい導入方法はこちらの記事に書きました。興味のある方は、読んでみていただけると嬉しいです。

私が所属しているフロントエンドエンジニアを目指す方のための塾 「もりけん塾」の森田賢二先生のTwitterはこちら!

先生のブログ「武骨日記」はこちら!

https://kenjimorita.jp/

まい

Webサービス制作会社で、Wordpressのテーマ開発や2Dシミュレーターの開発、JavaScriptを使用したフロントエンド周りの実装を担当しています。 JavaScriptが好きです。 最近は、3D Model Configuratorの制作にチャレンジしています。

JavaScriptカテゴリの最新記事