はじめてのフロントエンド開発で学んだこと
はじめまして。エンジニアのM.Fです。
１．自己紹介
私は今期弥生に中途で入社したばかりの新人で、フロント開発の経験はゼロ。前職ではいわゆるコボラー（※1）をやっておりました。
そんな正真正銘フロント初心者の私ですが、この取り組みを通じて非常に多くの知識と経験を学ぶことができたので、取り組みをご紹介したいと思います。
（※1）コボラー：COBOL言語の開発を行う人を指す言葉。
２．フェーズ2のゴール
フェーズ1（※2）では、基本的なマークアップスキルの習得として、HTML5,CSS3を活用したレスポンシブデザインの作成を行いました。 フェーズ2ではその応用として、実際に利用できるWebアプリ画面の作成をゴールとしています。
（※2）フェーズ１の詳細は「フロントエンドエンジニア育成（序章）」をご覧ください。
私のチームでは、現状メールで運用されている社内の勤怠連絡を、「Webアプリ上で一元的に管理・参照できるようにすること」を最終的なゴールとし、今回の取り組みではその一画面の作成を行うことにしました。
３．アプリのターゲットとベネフィット
そもそも、なぜこのアプリを作ろうと思ったのか？ きっかけは私の上司のこの言葉でした。
「勤怠連絡と管理をもっと楽したいよね。」
開発本部では、
メンバーの
- 休暇
- 当日の早退・遅刻
の状況が把握できるように、毎朝メールで部内に配信されています。
この一覧はすべて特定の担当者が個々のメール連絡を受けて作成します。
当然毎日のことなので作業に掛かる負荷も高く、担当者が不在の時は代行で誰かがやらねばなりません。
特にリーダーにとって、メンバーの勤怠状況は常に把握しておきたいもの。
そこで、フロント開発の勉強も兼ねて、作成してみよう！というわけです。
ただ、思い付きで作るだけではダメで、そのアプリを開発することで、
「誰にとって（ターゲット・セグメント）」
「どんな利点（ベネフィット）をもたらすか」
という視点で分析を行い、「カスタマージャーニーマップ」を作成しました。
このマップでは、想定されるユーザー（ターゲット・セグメント）がこのアプリを通じて行う行動や思考・感情などをフェーズごとにプロットしたもので、どのようにこのアプリを知り、触れて、継続して使ってもらうかというシナリオを立てています。
４．つまずいたこと
カスタマージャーニーマップも作ったし、早速画面のイメージを作ろう！となるわけです。 作成した画面カンプはこちら。
この画面は、当日の出勤状況を確認するための画面です。
- 当日の日付
- 表示したいチームや人を絞り込むための検索フィールド
- 勤怠の明細一覧
という構成になっています。
あとは作成したカンプの通り画面を作るだけ！・・・なのですが、初のフロントエンド開発ということもありなかなか思い通りにいきません。
特に、勤怠連絡を表示する明細のコンテナ部分には非常に苦労しました。
下記につまづいた点の一部をご紹介。
・IEで表示するとスペースが詰まる！
htmlでアイコンや文字の間に少し広めのスペースを入れたい。でも半角スペースだと記述が長くなってしまう･･･ そう考えた私はhtmlに"&emsp"を記述することにしました。しかし、それが裏目に。 IEで表示すると、なんと！スペースが全て詰まってしまいました。
とはいえ、" "を何回も繰り返すのもイヤだし･･･結果、下記のように記述。
こうすればIEでも空白が反映されるし、何回もhtmlに" "を繰り返す必要もありません。
・サブメニューが画面の裏に隠れる！
今回、アイコンやボタンはgoogle社が提供するMaterial Design Liteを使用。 見た目や操作時の動きをマテリアルデザインで形成しており、HTML、CSS，JavaScriptにコードをコピーするだけで簡単に作れるので便利ですが･･･
実装してみると、クリックできない（というか見えない）問題が発生。
早速F12キーを押して、ブラウザ開発者ツールで原因を特定します（使い方教えてもらいました）。
怪しいと思われるコンテナをクリックして指定を確認。
すると、cssに記述していないoverflow:hidden;が指定されていました。 Material Design Liteのコンポーネントを使用したため、cssに記述しなくてもデフォルトで指定されてしまうようです。
そこで、style.cssに以下の通り記述。
!importantルールを使うと適用するスタイルを優先させることができるため、 overflow:visible;が適用され、無事表示することができました。
最終的に完成したhtmlはこちら。
５．取り組みから学んだこと
本フェーズでは画面の枠組み作成をゴールとしたため、表示される明細の表示方法や内容の処理ロジックをどうするか？DBの管理はどうするか？等課題は山積みですが、ひとまずはhtmlとcssを使ってカンプのレイアウト通りに画面を作ることができました。 また、スケジュールも予定通り、4日間の業務時間外でなんとか作り終えることができました。
フェーズ１では調べものにかなりの時間を費やしていましたが、本フェーズではブラウザ開発者ツールを活用する、ペアプロで調べものを分担するなどを意識することで、作業を効率化できました。
簡単な画面ではありますが、この取り組みを通じてフロントエンド開発の土台となる基礎スキルを習得できたと感じています。 勤怠管理アプリの完成に向けて、引き続きトライしてゆきます。
