【Udemy講座】サンプルサイト制作

2024-11-07
2024-11-27

ご覧いただきありがとうございます。
コーダーの、まついちです。

この記事では、元ソフトバンクのエンジニアであるCodeMafiaさんのUdemy講座の中から、

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
を受講した際に制作したサンプルサイトを通じて学んだ技術について紹介します。

今回制作したサンプルサイトURL:
https://sample-site-01.vercel.app/

この講座を受講した目的は、実践的なサイト制作を通してプロのノウハウを１つでも多く会得することです。

講座を一周して満足するのではなく、理解ができているか怪しいと感じる部分は繰り返し手を動かし、曖昧な部分があれば再度取り組むなど、確実に技術が身になるよう努めました。

そうすることで、コーディング工程全体の流れを掴み、最初は少し理解するのに時間がかかった部分もスムーズに出来るようになりました！

また、余談ですがCodeMafiaさんの全講座8本中、今回のコース含めて6本を受講済みです。

その中の1つに、JavaScript専用のコースがあります。難解ですが有益な内容で有名です。
JavaScriptを仕組みから理解しようとする内容となっているため本当に難しかったのですが、繰り返しトライすることで何とか最後までついていくことが出来るようになりました。

今回の制作とは直接関係のない話でしたが、JavaScriptに対する関心が強く自主的に学習をしてきているのでそのアピールとなれば幸いです。

この記事で扱う内容

当記事で扱うのは、Web制作技術の中でもメンテナンス性や制作フローの効率化などの、発展よりの内容です。

反対に、当記事で扱わないのは、HTML,CSS,JavaScriptのコード理解のような基礎の部分です。

もし基礎力を見てみたいと感じられた場合は、今回の講座の制作経験を活かして新たに制作したオリジナルサンプルサイトをご覧ください。そのサイト制作の解説記事も見ていただけたら参考になるかと思います。

実践的なフォルダ管理

コーディングしていく際のフォルダ管理については、常日頃からより良いやり方がないかと考えています。
そんな中で、今回の講座で制作したサイト内のフォルダ構成がかなり参考になりました。

階層の一番上は、「index.html」ファイルと、「images」フォルダ、「scripts」フォルダ、「styles」フォルダのみで、とても分かりやすく美しいです。

「scripts」の中は、すべてのプログラムの起点となる「main.js」ファイルと、自作のクラスファイルが入る「libs」フォルダ、さらに第三者の開発したライブラリーが入る「vendors」フォルダが同階層に並びます。

「styles」の中まで説明すると、かなり長文になりそうなのでこの辺りでやめておきます。

「自作」と「他作」で分けることで、デバッグ時にバグの原因の当たりをつけやすいなと感じました。もしもバグがあっても大抵は自作の方にあると分かるので、バグ修正までの時間短縮に繋がります。

他にも「styles」の中では、汎用類、パーツ類、ページ類などの分け方があり、影響範囲の規模で分けるという視点も学びとなりました。

実践的なSassの活用

Sassの経験は今までもありましたが、この講座は特に実践的なプロのテクニックを知る機会となりました。

変数で値を一括管理

サイトのテーマカラーや、メインコンテンツの最大幅のような制作中に頻出するスタイルを変数として一元管理することでメンテナンス性がアップすることを学びました。

サイト全体で同じスタイルを当てている部分を一箇所の編集で一気に更新することが出来るので、非常に効率的で今後もぜひ使っていきたい機能です。

mixinでプロパティのセットを一元管理

本来、アニメーションを設定するときに使用するanimationプロパティは、多くの値を指定する必要があります。

しかし、今回のサイトでは、頻出するスタイルをあらかじめセットしておき、animationプロパティの使用が簡単になるテクニックが採用されていました。

さらに、引数で任意の値を渡すことでanimationプロパティの値を柔軟にカスタマイズできるので、その点が使いやすいと感じました。

他には、サイト制作中に多用するメディアクエリの記述を簡略化するmixinの使い方です。このテクニックを使うか使わないかでサイト全体のコーディングスピードにかなり差が出てきそうだと実感しました。

パーシャルファイルでコードを分割管理

各ファイルのボリュームが小さく内容が理解しやすかったり、他プロジェクトで再利用しやすい、または小さな変更が全体に影響を与えにくいのでデバッグが容易になるなどメリットが多いと感じました。
（例：ボタン専用のような小規模のファイルなど）

実践的なJavaScriptの活用

クラス単位でのファイル分割

この方法は、ファイル名を見るだけでそのファイルの役割や扱う範囲が容易に想像できて良かったです。

例えば、ヒーロースライダー専用のファイルhero-slider.jsを作成し、その中で専用のクラスHeroSliderを作り、さらにその中には専用のメソッドやプロパティを登録し一元管理します。すると、スライダーに関わるデバッグなら真っ先にこのファイルをチェックすれば良いですし、ヒーロースライダーに新たな機能を追加したいときもここにメソッドを追加すれば良いことがすぐに分かります。

上記は、呼び出される側のファイルと言えますが、それらを呼び出すのは（今回であれば）main.jsという1つのファイルです。このように役割分担がハッキリしていると混乱せず効率的にデバッグやメンテナンスをすることができるので制作中も快適でした。

また、クラス単位でのファイル分割は、別のプロジェクトへ持ち込みやすく再利用しやすい点も嬉しいです。

外部ライブラリをさらに便利に使う

ライブラリーを自作のクラスやメソッドに内包することで、プロジェクトに応じてより扱いやすいものに出来ることを学びました。短く分かりやすいメソッド名でライブラリの関数を内包することで、呼び出しやすくできます。

また、プロジェクト内で頻出の設定をデフォルト値として登録しておくことで利便性を向上させるテクニックも今後使っていきたいです。

実装したアニメーション

ローディングアニメーション

ローディングのPace.jsというライブラリーの機能を一部利用し実装しました。オブジェクトが立体的に回転する3Dアニメーションも組み込んでいます。

モバイルメニューの開閉

当サイトのモバイルメニューは、開閉時にメインコンテンツ全体がアニメーションしながら移動することで、裏側からメニューが登場または隠れる仕掛けになっています。

スライドショー

スライドショーはswiperライブラリーを利用しています。
レスポンシブ対応、ユーザーがドラッグ・アンド・ドロップで画像をつかみ、左右任意の画像に移動させる機能、さらに3Dアニメーションなど実装しました。

これらは全てプログラム上のオプションから設定するだけでいいので非常に簡単でした。

スライドショーに重ったタイトル部分と、スクロール誘致のアニメーションはcssで制作しています。

まとめ

ここまで、ご覧いただきありがとうございました。

今回のサンプルサイトの制作を通じて、最新のWeb技術を実践的に学ぶことができました。

特にSassやJavaScriptの高度な使い方、アニメーションの実装方法など、多くの技術的な知見を得ることができました。

また、今回学んだスキルをさっそく活用して、完全オリジナルのサンプルサイトを制作しました！

オリジナルサイトについての解説記事もあります。
実践的な内容をイメージして制作しているので、こちらもよかったらご参照ください。

もし、ご質問やご意見などございましたら、お気軽にこちらからお問い合わせください。
ここまで目を通して下さりありがとうございました！