こんにちは、近頃体重が増えたせいで趣味のボルダリングに支障を来しているエンジニアのR.Oです！

現在引っ越しを検討しているのですが、検討先の家のすぐ近くにボルダリングジムがあることを知り、「通いすぎて上達しちゃうかな～」と妄想することが最近のマイブームです。

★宣伝★12/21（木）に社外向け勉強会を開催します。

冒頭からタイトルと関係がなくてすみませんm(＿＿)m

弥生では毎月第３木曜日の夜に外部のエンジニア向けの勉強会「もくテク」を開催しているのですが、今月も開催するのでその宣伝です。
今回の勉強会のタイトルは「弥生のフロントシステムって？～UX向上と品質改善の取り組みについて～」です。

以下のURLから詳細の参照と参加が可能なのでご興味のある方は是非！！

https://mokuteku.connpass.com/event/73499/

セッション内容は、弥生が取り組んだUX改善や品質改善、ヒートマップを使った自社サービス解析などを予定していて、私R.Oも「AWSを使ったメッセージングサービスの性能改善で苦労したこと」についての発表を行います。

カレンダートレーニング完了報告

本題のカレンダートレーニングの後半についてです。

前回の内容

前回は、カレンダーを一先ず完成させました。
2017-12-05_184524

そこで得た学びは「事前のHTML設計が予期せぬレイアウト崩れを防ぐ」です。
HTML作成とCSS適用の作業を交互に行う手間を減らすためにはHTML設計が重要であることを痛感しました。

今回の内容

今回は、カレンダートレーニングの完成報告と、フロントエンジニア強化施策全体を通して得た学びや気づきについて報告の行います。

カレンダー完成報告

前回作成したカレンダーに対する運営チームからレビュー指摘があったので、対応して完成させました。
指摘内容は、主に以下の２点です。
1. クラス名がBEMに則っていない
2. レスポンシブデザイン対応してみよう

クラス名がBEMに則っていない

BEMは「block」、「element」、「modifier」という3つの概念をアンスコやハイフンで繋げることでクラス名を作るのですが、「各概念はクラス名の中に一つまで」というルールに違反するクラス名がいくつか存在したため修正しました。
今後は以下の形式以外の名前をクラスにつけないように気をつけます。

「block」
「block_element」
「block--modifier」
「block_element--modifier」

※BEMの概要やメリットについては前回の記事を参照してください。

レスポンシブデザイン対応

前回作成したカレンダーは卓上カレンダーを原寸大で再現しただけなので、レスポンシブデザイン対応してみようと指示されました。

レスポンシブデザインとは、ウィンドウサイズ（ブラウザサイズ）によってWebページのレイアウトが最適の形で調整されるデザインのことです。
具体例は、完成したソースコードを後述のURLからダウンロードして確認してみてください。
※因みに、ウィンドウサイズに合わせて単にフォントが大きくなったりするものはレスポンシブデザインとは呼びません。

最近のWebサービスではレスポンシブデザイン対応していることが当たり前になっていて、弥生のポータルサイトマイポータルWebでも今年の春に対応しました。
※マイポータルWebはログインが必要ですが、ログイン画面もレスポンシブデザインです。

実現イメージ

レスポンシブデザインの実現イメージですが、ウィンドウサイズによって以下の三段階のレイアウトに変わるようにします。

ウィンドウサイズ大(横530px以上&縦710px以上)：卓上カレンダーを原寸大で再現
ウィンドウサイズ中(横380px以上&縦530px以下 or 横710px以下&縦380px以上)：ウィンドウサイズによって要素のサイズが動的に変わる
ウィンドウサイズ小(横380px以下&縦380px以下)：作成元カレンダー上部の小さなカレンダーを再現(画像参照)

実現に必要なもの

今回レスポンシブデザイン対応を実現するにあたって利用したのは、CSSのメディアクエリとflexboxです。以下の手順でウィンドウサイズによって各要素のサイズを動的に変えることができました。

メディアクエリを使って３つのウィンドウサイズ毎にCSSを適用できるようにする
３つのウィンドウサイズ毎にflexプロパティを適用する

完成したカレンダー

以上の対応でカレンダーは完成です！各ウィンドウサイズのレイアウトはこちらです。

ウィンドウサイズ大

2017-12-05_184524

ウィンドウサイズ中

2017-12-05_184518

ウィンドウサイズ小

2017-12-05_184511

ソースコードはこちらからダウンロードできます。 ※マルチブラウザ対応していないので、必ずGoogle Chromeで確認してください。

フロントエンジニア強化施策を通して得たこと

今回のカレンダートレーニングの終了をもって、フロントエンジニア強化施策の第二弾は終了です。
施策全体を通して得た学びもまとめたいと思います。　

施策参加時に習得したいと思っていたスキル

4.のSass以外のスキルは本施策を通して身につけることが出来ました。

HTMLとCSSの基礎
今回のカレンダーをイチから作成する技術を身につけることができた。
また、疑似クラスを使えばJavaScriptなしでhoverやfocusを検知してレイアウトを動的に変更できることなども知ることができた。
flexbox
カレンダー作成ではflexboxが大きく威力を発揮した。例えば、日付や祝日などの要素を縦並びや横並びで配置するのはflex-directionプロパティで実現。
また、レスポンシブデザイン対応に必要な、ウィンドウサイズによる要素の伸縮の割合もflexプロパティで実現した。
弥生のWebサービスも引き続きレスポンシブデザイン対応していく予定なので、積極的にflexboxを利用していきたい。 ※ただしflexboxにはバグが存在するようなので過信は禁物。詳しくはコチラの記事などを参照。
BEM(MindBEMding)
カレンダーは、「外枠（月）の中に日付用の枠」、「日付用の枠に日付や六曜」と階層がどんどん深くなっていったので、 HTMLを作成していて混乱することがあったが、BEMを使うことでHTMLの構造がわかりやすくなった。
Sass
今回はスケジュールの関係上利用することができなかったが、業務で機会があったので学習中。BEMとの親和性が高いことを知り感動。

気付き

ペアプロの効果

今回ペアプロで施策を実施しましたが、当初は「普段関わりのないメンバーと仲良くなれるきっかけになるな」程度にしか思っていませんでした。ところが、以下のようなメリットがあることを知りました。

お互いのスキルや知識の把握と共有がスムーズになる
→躓いたらすぐ相手に分かるので、後輩の「わからないけど聞きにくい」や先輩の「ちゃんと理解できているのかな」が防ぐことができる。
ナビゲータは、人に指示したり教えることを経験できる
ドライバは、一人では気付くのに時間がかかる「勘所」や「経験者にとっての常識」をナビゲータから教わることができる
→初心者が「CSSが想定通りに適用されない原因がブラウザだった」などで大きくハマってしまうのはあるある
「自分がしっかりしないと」という責任感（ペアもしっかりしていましたが笑）や「一緒に成し遂げよう」といった連帯感が生まれてモチベーションが上がる
などなど...

ただし、ペアプロでの開発のみだけではなく、ドライバ一人での開発もさせたほうが一人で達成する力などが身に付いていいのかなと思いました。（ナビゲータのハンドリングが上手ければ必要ないかも？？）

総括

今回報告したカレンダートレーニングで、フロントエンジニア強化施策第二回は完了となりました。
弥生はこれからWebサービスを拡張していく予定なので、今回身につけたフロントエンド開発のスキルや知識をゴリゴリ活用していくつもりです。
また、施策の中ではほぼ使用しなかったJavaScriptも使ってリッチなWebサービスの開発を目指していきたいです。