スライダーの作成!デバッグ力を鍛えねば

date_range 2023/08/16
サムネ

こんにちは!

マーケティング部受託プロダクトチームのインターン生、村高歩夢です!


ガーディアンお盆明け!!!


ガーディアンのお盆が終わってメンバーが帰ってきました!!

僕はお盆期間も勤務していたんですが、もうその時の寂しさったら


思い出すだけで震えが止まりませんね!!

朝礼とか7人しかいなかったんですから!!


今日は朝礼も人数が多く久しぶりの温かみを感じました




さて、本日は、スライダーというパーツの作成を行いました!


スライダーとは画像がスライドショーのようにスライドするwebサイトのパーツを指します。

スライダーの利点は複数枚の画像を画像一つ分のスペースで表示できるので、

情報を効率良く伝えることができます。


この動くスライダーはJavaScriptを使うので他の基礎的なパーツを作成するよりも本の少しだけ難易度が高いのです。


まぁ、何が言いたいかと言うとここで躓いてるので言い訳をこぼしてるわけです笑

僕にとって難易度が少し上がったように見えるだけでそんなことはないんですよね。

実際、同じアドバンス隊の鈴木さんに見てもらったら、すぐに解決してしまいました。。


基本的なスライダーは僕も作ることができたんです。

しかし、OWLet言語が入ってコードの量が長くなったため、自分でどの部分がエラーを引き起こしているのか、考えられなくなってしまいました。

まるで、英語の簡単な第五文型はわかるのに関係代名詞とかto不定詞とか”,”も入ってどこがVでどこがOでどこがCなのかごちゃごちゃになる感じでした。


エラーを解決するとき、「仮説を立てる」「検証する」ことがとても重要だと考えております。

何かうまくいかない時に

恐らくここの記述が原因だからここの記述を書き直してみる


そうやってエラーを解決していくのですが、

僕はエラーした後、「なんだこれ ??」でストップしてしまったり、見当違いな仮説を立ててしまうことが良くあります。


正しい仮説を立てられるようになるには何が必要なのか、これが何を表しているのかを理解できないといけません。

スライダーの構造はどうなっているのか、もっと言うとどうなっていないといけないのかをちゃんと理解できていませんでした。

今回はswiperと言うスライダーを作るためのJavaScriptのライブラリを使用したのですが、このドキュメントをしっかり読んでいればすぐ解決したと思います。


スライダーに限らず、これから





■ガーディアン主力ソリューション→OWLet

■新サービスリリースのお知らせ

WEB業界を変える!育てて成果を上げるサブスク型HPサービス

SCSC (スクスク)

ガーディアンのインターン制度→こちら

村高歩夢の紹介ページこちら

*COMMENT*

    *コメント*

    *ログイン*

    メールアドレス
    パスワード