もくテクvol.14「ゼロから始める自動テスト~10日で実践!自動テスト開発 製品開発での活用方法もお話しします~」を開催しました

勉強会を開催しました

2018/05/24(木)に第14回もくテク 「ゼロから始める自動テスト~10日で実践!自動テスト開発 製品開発での活用方法もお話しします~」を開催しました。

f:id:yayoiTech:20180531180348j:plain

今回は入社2~3年目の若手社員で構成される「テスト自動化チーム」から、
簡単な自動テストの作成方法やプロセスへの取り入れ方をご紹介しました。

前回のテスト自動化チームがもくテクで登壇した時(http://tech.yayoi-kk.co.jp/entry/2017/07/19/140734)以上に多くの方にご来場頂くことができ、自動化に興味を持たれている方が多いことを実感しました。

f:id:yayoiTech:20180531180425j:plain

セッション後にご参加いただいた方々とお話してみて、まだまだ自動化は手探りで進める方が多い分野のように感じました。
ご参加いただいた方々にとって少しでも参考になれば幸いです。

f:id:yayoiTech:20180531180409j:plain

また、今回はLT枠として@nihonbuson様に「ほどよく自動テストする」と題して、
自動テストのメリットと陥りがちな問題についてお話していただきました。
ご協力いただき誠にありがとうございました!



次回のもくテクは06/14(木)を予定しています。
近日中にconnpassに公開予定ですので、ご興味のある方は、connpassよりお申し込みください。

詳細はこちら▼▼▼
https://mokuteku.connpass.com/



「Toolsの杜」に登壇します

2018/07/10(火)にグレープシティ株式会社様主催の「Toolsの杜」に弊社社員が登壇します。
ご興味のある方は是非ご参加ください!
www.grapecity.co.jp

もくテク「品質について悩める人の会 vol.2」を開催しました

弥生ではもくテクと題した勉強会を開催しており、 2018/3/15(木)には第11回目となる「品質について悩める人の会 vol.2」を開催しました。

品質をテーマとしたもくテクは2017年10月以来の2回目です。

今回は講義型ではなく、ワークショップ形式で参加者同士でのディスカッションを行いました。

f:id:yayoi_kusaka:20180322182127j:plain

ワークショップではグループを作り、お題(品質に関するデータ)に対して、 企業文化やプロジェクトにおける役割、品質に対する見方が異なる方同士で積極的に意見を交わしていただきました。

f:id:yayoi_kusaka:20180322182156j:plain

ご参加いただいた方のご協力によって予想以上に盛り上がり、 休憩時間やもくテク終了後も会話が止まらない状態でした。

ご参加いただいた皆様、ご協力ありがとうございました!

次回は04/12(木)に「技術、品質担当が考えるモノづくりのポイント」のテーマで、 弥生の開発プロジェクトのリーダー陣から各ポジションで意識していることや取り組みをご紹介する予定です。

ご興味のある方は、connpassよりお申し込みをお願いします。

詳細はこちら▼▼▼ https://mokuteku.connpass.com/event/82349/

カレンダー作成トレーニング完成!!

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

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

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

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

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

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

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

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

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

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

前回の内容

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

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

今回の内容

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

カレンダー完成報告

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

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

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

「block」
「block_element」
「block--modifier」
「block_
element--modifier」

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

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

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

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

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

実現イメージ

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

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

実現に必要なもの

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

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

完成したカレンダー

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

ウィンドウサイズ大

2017-12-05_184524

ウィンドウサイズ中

2017-12-05_184518

ウィンドウサイズ小

2017-12-05_184511

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

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

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

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

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

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

気付き

ペアプロの効果

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

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

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

総括

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

今後について

フロントエンド関連以外のテーマでも記事を投稿していきたいと思っているので、引き続きよろしくお願い致します!