はじめに
記事の内容
この記事はオンラインスクール「デイトラ」様の企画、第2回コーディング #実案件チャレンジ に挑戦して感じたこと、学んだことをまとめています。
参加の経緯
元々第1回 #実案件チャレンジ が開催されていたことは知ってたのですが、当時X(Twitter)の発信やアカウント自体作成していない状況でした。
2024年4月に学習記録も兼ねてXアカウント作成・発信を始めたのですが、頭の片隅で「第2回、開催するなら挑戦してみたいなー」と思っていたところ、以下のポストを発見。
「これはやるしかない！」と思って早速挑戦してみたのでした。
コーディング環境について
使用した技術と選定理由
・Pug(テンプレートエンジン)
→条件分岐で表示したりオブジェクトをループ表示できるから
→タグの閉じ忘れやインデントミスを防ぎやすいから
(本当はAstro使ってみたかったけど時間が無く断念)
・Pure CSS(SCSSは使わない)
→CSSカスタムプロパティを使ったコーディングの練習がしたかったから
・Vanilla JS(jQueryは使わない)
→ページ軽量化のため
・Splide.js(スライドショー)
→Swiper.jsより軽量だから
→シンプルな挙動のスライドだったので、Swiper.jsを使わなくても実装できると思ったから
工夫したこと
画像コーディング部分はスクリーンリーダーで文章を読み上げられるようにする
例えばサムネイルにもあるファーストビュー、私は画像1枚で実装しました。
そしてaltタグにFVの内容を全て記述する…のではなく、HTMLでマークアップした後にCSSで視覚的に隠すようにしました。
ちなみに display: none; はそもそも読み上げられないので注意。
基本はdisplay: grid;でレイアウトを組む
今回、SPとPCで要素の表示順序が変わる箇所がありました。
display: flex; でも表示順序を変えることはできますが、基本的に grid を使って実装しました。
要素の幅が変わっても綺麗にレイアウトを整えてくれるので便利。
関数や変数を使ってアコーディオン要素を作成
今回アコーディオン要素が16個ありました。
全部コピペしても良いけど、ペーストする場所間違えそうだしどこまでコピペしたか分からなくなりそう…
なので、pugを使ってデータ部分を別に定義して、ループ内で各アイテムを生成しました。
コードの可読性や保守性も良くなったと思います。
CSSカスタムプロパティ便利
これは私が文章に起こすよりも他の強強エンジニアさんの記事を参考にしていただければと思うのですが、CSS変数を再設定できるのは便利！
ちなみに…SCSSはmixinを使って色んなプロパティのclampを自動計算できるのに、CSSはそれが出来ない！(実際は出来なくはないけど、コードの記述が長くなりすぎる)
font-sizeをclampで実装する以外にもmarginやpaddingなど色んなプロパティをclampで実装したいのに！
この点はSCSS便利だなーと思ったのでした。
採点結果と総評
デイトラからのレビュー
採点結果と総評コメントをお送りいたします。
デザイン再現レベル：90％以上
仕様をみたしているか：満たしている合格判定：合格
レビューの基準：
・期限内に提出すること
・デザインの再現度高くコーディングできていること
・仕様に準ずる動き（アニメーション）が問題なく表現できていること総評：
見栄えの再現度も高く、仕様も十分に反映されています！仕様面の細かいところですが、
・「お客様の声」のスライダーで文章を開いた時の行間が狭い（1.7の指定がない？）。また。×アイコンの丸の中での位置が少しずれていました。・スマホハンバーガーメニューを下までスクロールした際に、「資料請求」と「新規お申込」ボタンが下部の一番下に張り付いているので、デザインカンプ程度の余白があると良いかなと思います
細かいところはありますが、全体的に高い品質でコーディングされていました！
この意識で引き続きコーディングしていただければと思います！
レビューを踏まえて
3箇所、修正が必要な点がありました。。
行間の指定ミス、スマホハンバーガーメニューは完全にこちらのチェックが漏れてました。。
×アイコンの位置ずれについては「うーん、これズレてる？どっちだ？でもやっぱりズレてる気がする…」
と思いながらも、締切も迫っていたので提出してしまいましたが、これは自分の落ち度。
忙しい時こそ丁寧な対応をする！
これを実際にやるのが大変だけど、意識することがとても大事だなと教訓になりました！
最後に
コードストックは定期的に見直そう
今回のLPはボリュームが多く、締切が(個人的体感として)短かったので、自分のコードストックにはとても助けられました！
特にスライドショーを複数実装するところは、事前にストックがあったのであまり時間をかけずに実装できました。
もちろん実装方法がわからず沼にハマるところもありましたが…(テーブル要素のあしらい部分とか)
パソコンのメモリは多ければ多いほど良い
私のパソコンはメモリ：8GBなのですが、これがもうFigma開きながらVSCodeでタスクランナー(Gulp)走らせてコーディングするとまぁフリーズするわ重すぎるわ…
頭の中ではどうコーディングすればいいかわかってるのにパソコンが動かない！
パソコンのメモリは16GB以上にしましょう。
(この後パソコン買い替えました)
お礼
今回合格 & 優秀賞をいただけたことで、多くの方々からXでいいね！やフォローをいただけました。
デイトラさんの影響力すごすぎる…！
今回のチャレンジを通して、実案件を受けられる実力がついたんだと自信がつきましたし、何より企画していただいたデイトラおよび関係者の皆様方には感謝の気持ちでいっぱいです！
本当にありがとうございます！
この記事を読んで、実際に実案件チャレンジをチャレンジされた方、これから実案件チャレンジを挑戦しようと思っている方など色んな方々の励みになれば幸いです。
ここまでお読みいただきありがとうございました！
