【Webコーディング】無料コーディング練習所 上級編 : Webサイト制作会社の公式サイト
背景
無料コーディング練習所 に取り組み、中級編3まで進めてきました。
今回、ついに上級編への挑戦です！
課題元 :
webdesigner-go.com
成果物
8月終わり以来久しぶりのツイート。本日までに+16時間でようやく上級編、完成です！👏 ほとんど機能実装と細かい修正をたっぷりと...！#無料コーディング練習所 での学習は学びも多く、楽しみながら新しい経験をさせていただきました！ありがとうございました😊https://t.co/2tm83BZOlW
— ふーしゃ@web (@fuchsia_84) 2023年9月13日
GitHub - fuchsia-84/PON_DESIGN: Webコーディング練習用課題 : PON DISIGN
課題要件以外の実施事項
- float使用不可縛り(工数が増大しない程度で)
未実施の事項
- IE11対応(2022年6月16日サポート終了につき)
- フォントサイズへのフォールバック設定
制作スケジュールと工数
制作期間
2023/8/16 から 9/13 (実働: 11日間)
スケジュールと工数
8/16
- Sass/BEM/FLOCSSについてドキュメントから情報収集
8/17
8/21
- トップページ: News/Service/Company/Recruitセクション PC版 完成
8/22
- トップページ: OGP追加
- ページトップボタン追加
- リンクホバー時のアニメーション追加
- トップページ: スクロール案内のアニメーション追加
- トップページ: Contactセクション PC版 完成
- トップページ: Worksセクション PC版 完成
- Serviceページ: PC版 完成
8/25
- AutoPrefixerを追加
- Worksページ: PC版 完成
- Companyページ: PC版 完成
- Recruitページ PC版 完成
8/26
- Newsページ: PC版 完成
- ニュース記事ページ: PC版 完成
8/28
- Contactページ: PC版 作成 (Netlifyデプロイ・フォーム機能を除く)
- ヘッダー SP版 完成
- トップページ: Top/News/Service/Works/Companyセクション SP版 完成
8/29
- トップページ: ヘッダー・フッター、Recruit/Contact/セクション SP版 完成
- SP版改行位置調整
- News/ニュース記事/Service/Worksページ: SP版 完成
9/5
- Recruitページ: SP版 完成
9/6
- Favicon追加
- ロゴ修正
- Contactページ: SP版 完成 (Netlifyデプロイ)
- フォーム送信完了ページ作成
- ぱんくずリスト: SP版 完成
9/13
【実装工数】
合計 38.0h / 4.75人日
学習事項
- VSCodeにおけるDartSass開発環境の設定: 拡張機能「DartJS Sass Compiler and Sass Watcher」の使用。AutoPrefixerはjson記述でONにする。SCSSファイル更新して保存 → 設定通りにCSSファイルが生成される
- CSS設計の破綻を防ぐために: FLOCSSのファイル構成、BEMの命名規則に則って作成。コンポーネントの上書きはクラスの親子関係から。ID付与は詳細度を上げるので基本ダメ
- OGPに使用する画像パスは絶対パス
- 画面リサイズ時も処理を適用する場合: f(); $(window).resize(function(){ f(); })
- Undefined mixin : 定義できてない。use mixin置き場/mixin as m; を忘れずに
参考
今後＆おわりに
今回の制作ではなんといってもはじめてのDartSass、FLOCSSでのファイル構成、BEM命名規則に則った開発への挑戦が最大のテーマでした。
Webサイト開発の勉強に手をつけ始めたのが2018年終わりあたりでその時から書籍等で知ってはいたものの、当時はHTML/CSSのみでごく簡単なLP1つをようやく作れる程度だったので導入する力もなければ何がいいのかもわからず。本格的に0から自力で作成するのは初挑戦となりました。
とにかく運用方法(更新保存したら自動にコンパイルされてCSS生成、という流れ)とFLOCSSのファイル構成(基本の考え方はあれど開発者や所属組織ごとにガイドラインが派生して発展してきていること)を理解するまでに初日をまるまる費やしました。
開発環境の構築事態はコマンドを叩くこと等にはあまり抵抗がない方なので、手を動かせばストンと。
PC版を大体形作っていくまではとにかく労力がかかった印象でしたが、スタイルの記述やアニメーション、スクリプト記述については既知の範囲が多かったこともあり、レスポンシブ化をはじめるまでにはスラスラと書いてゆけました。
特に複数ページ制作にあたっては共通パーツが多いデザインとなっていたためにほとんどHTMLを揃えていけばよいだけとなったので、かなり効率良く作っていくことができて感動しました。
制作中気になった点は主に2つです。
まず、ルールの明確化についてです。ある程度コンテンツが増えてくると接頭語の追加を忘れていた部分があったりクラス名の重複部分があると途端にファイルの可読性も悪くなり、メンテナンスしにくくなるという発見がありました。ルールは徹底するべきで、そのためにガイドラインをはっきり作るべきなのだなと。
そこで、自分なりのガイドラインを作ることについて調べてみると、参考に上げた3サイト(「FLOCSS設計におけるルール明確化」の3つ)を見つけました。
一番最初のものは制作経験の少ない自分でもわかりやすく思え、今回の制作のファイル構成はこちらに則ったものとさせていただきました。
改めて見てみると便利クラス、調整用クラスと言われるUtilityの使いどころは考えてみればよくわからず。
今回はfloatを使うことになればと毎回一応用意しているclearfixと改行位置をレスポンシブ対応させるための調整クラスを入れておきましたが...
もっと役割を明確に設けて運用するには？と調べた結果、Utilityを削除して運用している方のまとめたページを見つけました。(参考の2番目)
Utilityが削除された上、MixinとSetting(今回でいうglobal)が外に出して設けられていました。
こちらが書かれたのが2019年ということで現在2023年のこの4年間のあいだにもさらに変遷がありそうなものの、自分の感じたモヤモヤに答えてくれたページでありました。
さらに、参考3番目のものではJavaScriptで動かすものに「js-」をつけるルールを設けておりました。
今回は例えばトグルボタンのクラス(「c-」から始まるクラス)にスクリプトで開閉の動きを付与するなどしていましたが、ルールを明確化した運用をするなら開閉の動きのクラスを「js-～」でまとめるということでしょうか。スクリプト制作中にもこれでいいのか？はて～？と悩んだところでしたので、スッキリ。
次回以降はこれらを参考に、より自分なりにまとまった設計で制作できそうです。
もう一つ気になった点は、コンポーネントの上書きとそのやり方についてです。
共通のスタイルではあるがほんの一部だけ変更したい場合はけっこうたくさんあると思うのですが、今回の制作の中でもネストを深くするか(親クラスにある「c-」は～と書く)、時にはIDを付与して詳細度を上げて記述した部分がありました。
調べてみると参考の一番最後にサイトにまとまっており、親の「Project」から上書きはOKとのこと。ID付与については詳細度を均一にしてメンテナンス性を保つのがFLOCSS利点の一つであるので非推奨のようでした。なるほど、どうしてもこうするんじゃ～とID付与、果てには!importantなどやりだしたら元も子もない...
ということで詳細度についてはよくよく頭に置きながら、あくまでクラスの階層で指定していくのが大事ということで腑に落ちました。
このようにFLOCSS設計のルール、ガイドランについては基本から派生したものまで自分の中に落とし込むまでに時間がかかり苦労しましたが、ページを増やす作業やレスポンシブ化していく作業自体はあっという間に終わり、DartSassとFLOCSS/BEM導入での制作効率の良さを大いに感じるとともに、現在の開発のスタンダードやそのバックにある思想という部分に一歩近づけたのではないかと嬉しくなりました。(少なくとも5年分は浦島太郎だった)
今回も良い学びの機会を与えてくださった無料コーディング練習所 (制作者Twitter : @webdesigner_go) さま に感謝申し上げます。(RTといいねも大変力になりました！)
今後直近の予定としまして、次回の自作サイトは複数ページ構成のものとし、DartSassでコーディングしてみようと思っております。 今回の制作を元に、今後も進めて参ります！
ありがとうございました。
