カレンダー作成トレーニング実施中！！

はじめまして、エンジニアのR.Oです！
前回の記事でT.Aさんが紹介したトレーニングに続き、

tech.yayoi-kk.co.jp

「カレンダー作成トレーニング」に挑戦中なので、その途中経過を報告します。

自己紹介

まずは、自己紹介をさせていただきます。

私は今年の春に弥生に中途入社し、現在はWebサービスの開発チームでフロントエンドとサーバーサイドの開発を担当しています。
プライベートではAWSを使ったWebチャットアプリケーションの開発に挑戦中です。

趣味は飲酒とボルダリングです。
ボルダリングは昔に少しやっていて、二ヶ月前に再開しました。
最近は6級であればほぼ一発で登れます。
今年中に4級を安定して登れるようになることが目標です。

因みに、ボルダリングで何が一番楽しいかというと、 難しい課題に何度も挑戦してやっと登れた時!! ではなくボルダリング終わりにお酒を飲むことです。

強化施策に参加したきっかけ

弥生に入社する前は、サーバーサイドの開発経験がメインだったので、フロントエンドの開発も行うチームに配属されたことに不安を抱いていました。
また、前述の通り、Webのチャットアプリケーションを作成したいのにフロントエンドの知識がなくて困っていました。

そんな時に本施策の第一弾が社内で行われているのを目にし、渡りに船と第二弾のメンバーとして手を上げたことが参加のきっかけです。

強化施策を通して身につけたいもの

フロントエンド開発における以下のスキルを身に着けたいと考えています。

HTMLとCSSの基礎（HTMLタグの使い方やCSSのセレクタなど）
flexbox
BEM(MindBEMding)
Sass

1.と2.に関しては前回のトレーニングで学習できたので、今回のトレーニングでは3.のBEMを身に着けたいと考えています。

BEMはクラスの命名規則の一つです。
今まではクラスに対して、フィーリングで名前をつけていたので、後で見返した時に「これってなんのために作った要素だっけ？」となってしまうことがありました。
そういった問題を、BEMの命名規則をうまく活用することで解決できるらしいです。また、チームで作業する際にクラス名のブレを防いだり、拡張性の高いコンポーネント作成を行えるようにもなるらしいので、是非身に着けたいです。

因みに、クラスの命名規則の中ではデファクトスタンダード扱いされているらしく、CSSフレームワークで人気のBootstrapでも採用されています。

BEMの詳細については以下の記事などを参考にしてください。
http://qiita.com/kitaro729/items/3189ded5647475bc2ae7

トレーニングの概要

作成するもの

卓上カレンダーをHTMLとCSSで再現します。

以下の画像が実際の卓上カレンダーの写真です。

f:id:oha-ryo-y2i:20170818194656j:plain

実施方針

ヒントや正解となるコードはなし
ペアプログラミングで作成する
クラスはBEM（MindBEMding）に則って命名する（※私のチームのみ）

実施レポート

HTMLの作成段階で悩む

「前回のトレーニングで学んだCSSセレクタやCSSプロパティの知識を総動員してサクッと作成するぞ！」と意気込んで着手したのですが、HTMLの作成段階で悩んでしまいました。
なぜならカレンダーには枠、日付、六曜、祝日などの多くの種類と要素があります。

default

また、種類が沢山ある＝要素に設定するクラスが多いので、命名するのも一苦労です。

CSSは順調！・・・かと思いきや！？

ペアとあれやこれやと相談しながらHTMLが書けたので、CSSでスタイルを適用していきます。カレンダーの様なグリッドスタイルは、前回のトレーニングで身につけた（と思い込んでいる）flexboxにとってはお手の物です。
スタイルが適用され、真っ白だったページが順調にカレンダーになっていきます。

と思いきや、問題発生です。

カレンダーの左下を再現しようとするとレイアウトが崩れてしまいます。

f:id:oha-ryo-y2i:20170809202804j:plain

原因は、HTMLの構造にありました。

修正前のHTMLとCSS

左下の日付の枠のHTML

<div class="halfbox__container boxcommon sun">
    <div class="halfbox">
        <div class="day"></div>
        <div class="rokuyou"></div>
    </div>
</div>

それ以外の日付の枠のHTML

<div class="week__body__box boxcommon sun">
    <div class="day"></div>
    <div class="rokuyou"></div>
</div>

CSS

.halfbox__container {
    padding:5px
}
.week__body__box {
    padding:5px
}

HTMLのタグ構造の深さが異なります。

修正後のHTMLとCSS

左下の日付の枠のHTML

<div class="halfbox__container boxcommon sun">
    <div class="halfbox">
        <div class="day"></div>
        <div class="rokuyou"></div>
    </div>
</div>

それ以外の日付の枠のHTML

<div class="week__body__box boxcommon sun">
    <div class="week__body__box__child">
        <div class="day"></div>
        <div class="rokuyou"></div>
    </div>
</div>

CSS

.halfbox {
    padding:5px
}
.week__body__box__child {
    padding:5px
}

HTMLの構造の深さを統一し、CSSでスタイルを適用した結果うまくいきました。

ひとまず完成

スタイルの設定も完了し、本物のカレンダーの見た目を再現できました。

スクリーンショット f:id:oha-ryo-y2i:20170809202921j:plain

なんと、上部の穴も再現しています！（無駄

ソースコード
https://github.com/ykk-pa1127/FrontEngTraining/tree/team4_calender_complete(not_responsive)

コードレビューについては次回の記事で報告します。

学んだこと

まだコードレビューが完了していませんが、今回のトレーニングでは以下のことを学びました。

事前のHTML設計が予期せぬレイアウト崩れを防ぐ

カレンダーのレイアウト崩れが発生した時に、CSSを色々変えてもうまくいかなかった原因は、CSSを適用するHTMLの構造にそもそも問題があるからでした。
歪んだ骨組みに、無理に肉付けをしてもうまくいくわけがないですね・・・。

その結果として、HTML作成→CSS適用→HTML修正→CSS適用という手戻りが発生してしまいました。

この失敗を学びとして、今後は以下の流れで画面レイアウトを作成しようと思います。

※カレンダー作成を例にしています。

作るレイアウトの構成を理解する
例：「枠が沢山並んでいて、それぞれの枠の中に日付、祝日、六曜が存在する。祝日は日付と横並びだが、六曜は日付と縦並びになっている」
理解した構成に合わせてHTMLを設計・作成する
例：「枠となる要素を沢山作り、それぞれの枠の中に日付、祝日、六曜となる要素を作る。まずは日付と祝日の要素が横並びになる要素を作り、その要素と六曜が縦並びになる要素を作る」
HTMLに合わせてCSSを適用する
例：「枠要素にはborderプロパティを適用、日付と祝日の要素が入っている要素にはflexプロパティのrowを適用、日付＋祝日の要素と六曜の要素が入っている要素にはflexプロパティのcolumnを適用」

上記の流れに則って作成すれば、今回のトレーニング実施で発生したような手戻りを防ぐことができるはずです。

また、今回の経験で、設計という工程がHTML作成においても重要だと気付くことができました。