初めまして、開発本部のT.Aです。突然ですが弥生では今年の3月、フロントエンジニア強化施策という取り組みが発足しました。

この3月の取り組み（第一回目）を見ていたメンバーが、自分もやりたい！と参加者を集め、先月から第二回目を開催しています。私は業務上フロントに関わりないチームなのですが、「やりたい」と周囲に話していた所、参加させていただけることになりました。

というわけで本記事では、第二回フロントエンジニア強化施策の取り組みをババーンとお伝えします！

メンバー紹介

今回は運営メンバー3名、参加メンバー4名で施策を実施しています。

簡単な自己紹介も添えているので、お時間ある方は各メンバーの欄を展開して、ご覧ください。

運営メンバー

田中さん

フロントシステム開発／UX検討チームのプロジェクトリーダー
声が大きい（物理）

K.Kさん

マイポータルWebの開発をテクニカル面でリードしている
Markdown記法の存在を私に教えてくれた人
質問すると丁寧に教えてもらえる

S.Uさん

SMARTを開発している
第一回目の参加者→今回の運営へ(前回記事)
弱音を吐くと励ましてもらえる。。。

参加メンバー

D.Kさん

入社四年目の先輩
オンライン製品を開発している
基本雑だけど本気で困ってると助けてくれる

R.Oさん

入社一年目(中途）の先輩
マイポータルWebを開発している
すごくものづくりに対する拘りがある（気がする）

R.Tさん

入社三年目の先輩
自動テスト作るチームのリーダー
入社から今に至るまでお世話になってます。。。

T.A(私)

自分の話

導入がてら自己紹介を。先に内容が気になる方は施策の内容へ

現在の業務

新卒で入社し、現在二年目です。 R.Tさんと同じチームでデスクトップ製品の自動テストを作成・実施しています。後は新卒の教育チームで後輩の研修や、ふりかえりを実施しています。

スキル

普段業務で使っているのはC#です。学生時代フリー配布のテンプレートを編集してサイトを作っていました。ただ、フロントスキルは「タグとセレクタって何？」「CSSって色変える以外に何ができるの？」というレベルでした。

施策を通じての目標

自分の作りたいもの（Webアプリ）を作るとっかかりを作る

大学時代、演劇をしていて見るのもやるのも好きでした。しかし社会人になってから忙しくなり、公演を見に行くことがめっきり減り…。好きな芝居は観たいけど、調べるために色んなサイト回るのは面倒くさい。そんな人（自分）のための小劇場・学生演劇に特化した検索アプリを作りたい！

…と思い立ったはいいのですが、Web系の技術は種類が豊富すぎるし、Gitも開発環境も良くわからない。 ①調べる → ②どの技術から勉強するか決められない → ③一先ず業務でも使うC#の勉強するそのループを今年の3月くらいから繰り返していました。

そんな時に知ったのが、このフロントエンジニア強化施策です。まずフロントエンドの技術をこの強化施策で勉強しよう！そこをきっかけにして、他（サーバーサイドとか、フレームワークとか）勉強しよう！

長くなりましたが要するに、この施策をきっかけに自主学習を進めることを目標にしています。

かっこいいサイトを作れるようになる

私が思うかっこいいサイト例：弥生30周年記念サイト自分の中で「一から自分でデザインを考えて、調べながらサイトを作れる」ことができたら、フロントエンド少しはできると言っていいんじゃないかなと思っています。ただ今まで、ネット上で配布されているテンプレートをいじってサイトを作ってきたため、一からサイトを作ったことがありません。例えば、例に出した弥生のサイトで、メニューのメインの部分はどうやって分けているのか？何も見ずに作るのは無理でも、これを使えば実現できそう！と考えられるレベルにはなりたいです。

他チームの方とたくさん話す

普段はデスクトップ製品の自動テストを作成しているため、オンラインやウェブ製品の開発をしている方と関わりがほとんどありません。それらのチームの方と話して、どんな技術を使って開発しているのか知りたいです。

施策の内容

使っているツール

バージョン管理：Git（SourceTree）
エディタ　　　：VisualStudioCode

やり方

基本定時後に行う
ペアプロで実施する
- 1人がコーディング、もう1人がそれを見てこうした方がいいんじゃないか、とかを話しながら画面を作る
成果物の作成が完了したら、レビューを行う

最初の1週間でやったこと総まとめ

第一週目は、HTMLとCSSの基礎を学べるような施策を実施しました。作ったものは全部で3つ。以下のGitに全てコミットしています。成果物置き場

レスポンシブ対応画面作成
flexboxを利用して、レスポンシブ対応した画面を作成する
作成画面ペアプロの担当：オペレーター⇒私、ドライバー⇒D.Kさん
一番印象に残っている施策です。画面自体はすぐに作成できました。意気揚々レビューに出したら、田中さんから一言「flexboxを何もわかってない！笑」この時は、アイテム(1)(2)(3)を一つのdivで囲い、 display:flexを当てていました。また、 PC用の画面はflexboxのアイテム(1)を、width:100%（横幅いっぱい）にしてアイテム(2)(3)を(1)の下に回り込ませていました。しかしそれではflexboxの良さを全く生かせていないとのこと…。頂いた指摘を元にコードを修正。元々上図の①(アイテム(1)(2)(3))しかdivで囲っていなかったのですが、②（アイテム(2)(3))もdivで囲み、それにもdisplay:flexを当てました。さらに、flex-directionプロパティの値を変えることで、widthを指定せず横並びから縦並びに簡単に変えることができました！
セレクタのトレーニング
HTMLが指定されたデザインになるように、色んなセレクタを使ってスタイルを当てる
作成画面ペアプロの担当：オペレーターD.Kさん⇒、ドライバー⇒私
ペアの先輩(D.Kさん)のすごさを実感した施策でした。この回は先輩がコーディングをしたのですが、指定されたスタイルをサクサク当てていくので、見ていて楽しかったです。ここで「詳細度」というものを教えてもらったのですが、なるほどと、わかった気になってしまい、次の施策で慌てることに…。
mock作成
弥生で実際に使われているボタンなどのUIの共通部品を利用して、画面を作成する
作成画面ペアプロの担当：オペレーター⇒私、ドライバー⇒D.Kさん
コピーペーストで部品を配置していく簡単（？）なトレーニング。なのですが、なかなかお手本のデザインにならず四苦八苦しました。上手くいかなかった原因は、 ① スタイルを当てても、より詳細度の深いものに打ち消されてしまう ② 要素の間に、開発者ツールで見ないとわからないmarginがあるセレクタのトレーニングでなんとなくしかセレクタや詳細度を理解しなかったことが仇となりましたが、開発者ツールを駆使し、なんとか完成しました！

まとめ

施策を通じて学んだこと

HTMLとCSSについて

flexboxを使った画面構成のやり方、レスポンシブ対応した画面の作り方を知った
- 画面を見たときにどう作ればいいのか、というイメージがつくようになった
CSSのセレクタの種類と詳細度について知った
- セレクタ：種類とそれぞれのセレクタの使い方は分かった
- 詳細度：概念は分かった。詳細度を意識してセレクタを使い分けできているわけではない
弥生の共通部品を使ってみた
- ※弥生標準として使われている「HTML、CSSのテンプレート」らしいです
- 弥生のフロント開発ではこういうものを使っていると知った

他チームの方と話せた

オンライン製品のソースコードを少しだけ見せてもらえた
- 使っているライブラリを知った
プログラミングする時に便利なショートカットキーや、小技を教えてもらった

サイトのデザインを見て、どう作るのかイメージできるようになれたのは嬉しかったです！ただ、flexboxの理解はまだまだ…。実際にWebサイトを作って、理解を深めていこうと思います。また、とっかかりができたと自分では思っているので、繁忙期が終わったらフレームワークの勉強に手を出したいな～と思ってます！