勉強会はじめまして、エンジニアのR.Oです!前回の記事でT.Aさんが紹介したトレーニングに続き、tech.yayoi-kk.co.jp「カレンダー作成トレーニング」に挑戦中なので、その途中経過を報告します。自己紹介まずは、自己紹介をさせていただきます。私は今年の春に弥生に中途入社し、現在はWebサービスの開発チームでフロントエンドとサーバーサイドの開発を担当しています。プライベートではAWSを使ったWebチャットアプリケーションの開発に挑戦中です。趣味は飲酒とボルダリングです。ボルダリングは昔に少しやっていて、二ヶ月前に再開しました。最近は6級であればほぼ一発で登れます。今年中に4級を安定して登れるようになることが目標です。なくボルダリング終わりにお酒を飲むことです。強化施策に参加したきっかけ弥生に入社する前は、サーバーサイドの開発経験がメインだったので、フロントエンドの開発も行うチームに配属されたことに不安を抱いていました。前述の通り、Webのチャットアプリケーションを作成したいのにフロントエンドの知識がなくて困っていました。そんな時に本施策の第一弾が社内で行われているのを目にし、渡りに船と第二弾のメンバーとして手を上げたことが参加のきっかけです。強化施策を通して身につけたいものフロントエンド開発における以下のスキルを身に着けたいと考えています。HTMLとCSSの基礎(HTMLタグの使い方やCSSのセレクタなど)flexboxBEM(MindBEMding)Sass1.と2.に関しては前回のトレーニングで学習できたので、今回のトレーニングでは3.のBEMを身に着けたいと考えています。BEMはクラスの命名規則の一つです。今まではクラスに対して、フィーリングで名前をつけていたので、後で見返した時に「これってなんのために作った要素だっけ?」となってしまうことがありました。いった問題を、BEMの命名規則をうまく活用することで解決できるらしいです。チームで作業する際にクラス名のブレを防いだり、拡張性の高いコンポーネント作成を行えるようにもなるらしいので、是非身に着けたいです。因みに、クラスの命名規則の中ではデファクトスタンダード扱いされているらしく、CSSフレームワークで人気のBootstrapでも採用されています。BEMの詳細については以下の記事などを参考にしてください。作成するもの卓上カレンダーをHTMLとCSSで再現します。以下の画像が実際の卓上カレンダーの写真です。実施方針ヒントや正解となるコードはなしペアプログラミングで作成するクラスはBEM(MindBEMding)に則って命名する(※私のチームのみ)実施レポートHTMLの作成段階で悩む「前回のトレーニングで学んだCSSセレクタやCSSプロパティの知識を総動員してサクッと作成するぞ!」と意気込んで着手したのですが、HTMLの作成段階で悩んでしまいました。多くの種類と要素があります。種類が沢山ある=要素に設定するクラスが多いので、命名するのも一苦労です。CSSは順調!・・・かと思いきや!?ペアとあれやこれやと相談しながらHTMLが書けたので、CSSでスタイルを適用していきます。カレンダーの様なグリッドスタイルは、前回のトレーニングで身につけた(と思い込んでいる)flexboxにとってはお手の物です。スタイルが適用され、真っ白だったページが順調にカレンダーになっていきます。思いきや、問題発生です。カレンダーの左下を再現しようとするとレイアウトが崩れてしまいます。原因は、HTMLの構造にありました。padding:5px}HTMLのタグ構造の深さが異なります。padding:5px}HTMLの構造の深さを統一し、CSSでスタイルを適用した結果うまくいきました。完成スタイルの設定も完了し、本物のカレンダーの見た目を再現できました。スクリーンショットなんと、上部の穴も再現しています!(無駄ソースコードhttps://github.com/ykk-pa1127/FrontEngTraining/tree/team4_calender_complete(not_responsive)コードレビューについては次回の記事で報告します。学んだことまだコードレビューが完了していませんが、今回のトレーニングでは以下のことを学びました。事前のHTML設計が予期せぬレイアウト崩れを防ぐカレンダーのレイアウト崩れが発生した時に、CSSを色々変えてもうまくいかなかった原因は、CSSを適用するHTMLの構造にそもそも問題があるからでした。歪んだ骨組みに、無理に肉付けをしてもうまくいくわけがないですね・・・。その結果として、HTML作成→CSS適用→HTML修正→CSS適用という手戻りが発生してしまいました。この失敗を学びとして、今後は以下の流れで画面レイアウトを作成しようと思います。※カレンダー作成を例にしています。作るレイアウトの構成を理解する例:「枠が沢山並んでいて、それぞれの枠の中に日付、祝日、六曜が存在する。理解した構成に合わせてHTMLを設計・作成する例:「枠となる要素を沢山作り、それぞれの枠の中に日付、祝日、六曜となる要素を作る。上記の流れに則って作成すれば、今回のトレーニング実施で発生したような手戻りを防ぐことができるはずです。今回の経験で、設計という工程がHTML作成においても重要だと気付くことができました。次回は、カレンダートレーニングの実施完了報告として、コードレビューの結果とレビュー指摘への対応、カレンダー作成トレーニングを通して学んだことを報告する予定です。VBAアプリケーションを作った話こんにちは。この記事はMisoca+弥生+ALTO...2017-12-11カレンダー作成トレーニング完成!!こんにちは、近頃体重が増えたせいで趣味のボルダリングに支障...2017-08-18初めてのフロントエンド初めまして、開発本部のT.Aです。弥生では今年の3月...2017-03-24はじめてのフロントエンド開発で学んだことはじめまして。エンジニアのM.Fです。私は今期弥...2017-03-10フロントエンジニア育成の取り組みの中でつまずいたことこんにちは!S.Fです。アーカイブはてなブログをはじめよう!yayoiTechさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。