みなさんこんにちは。カルテット開発部でフロントエンド開発を担当しています、松岡です。 弊社はフロントエンド・バックエンドともにエンジニアを募集していますが、興味を持っていただいた方から業務内容について質問を受ける事がよくあります。 そこで、この記事でカルテット開発部のフロントエンドのお仕事を簡単に紹介したいと思います。
３つの種類のタスク
私達が主に開発しているのはリスティング広告の運用者向けツール Lisket です。このツールの一番のヘビーユーザーは広告の運用代行を専門とする自社の部署です。Lisketの開発は、主に３つの種類のタスクに分類されます。
通常タスク
Lisketの新規開発や改善について、運営事務局・カスタマーサポート・開発部のメンバーが集まり話し合う定例会議が週1回のペースで設けられています。 ここで決定したタスクは「通常タスク」と呼ばれ、開発部で持ち帰ってどれくらいの開発工数がかかるのか、またインフラ整備など付随するサブタスクがあるのか等の詳細を検討します。そして作業単位で細分化されたタスクは、フロントエンド・バックエンド・インフラの各チームに割り振られ、チーム内で担当者が割り振られます。
開発部発タスク
Lisketの開発では、エンジニア側からもかなり頻繁に提案をしています。「この機能は使いづらいよね」とか「こうしたらもっと時間のロスが減らせるかも」とか、日々システムを使い倒しているエンジニアだからこそ感じる不便さに対する改善のアイデアなどです。
こうした効率の良い開発体制を維持するためのタスクは、トップダウンだとなかなか発生しません。これも開発部の大切な役割のひとつだと捉えています。
こうして発案したタスクは「開発部発タスク」として、定例会議の場に持ち込まれます。そこで承認を得た後は「通常タスク」と同じように手順を踏んでリリースまで進んでいきます。
DX向上タスク
（このタスクはメインのお仕事ではないので参考までに）その他に Developer Experience（開発体験）を向上させるものがあります。これ明確に名前は付いていないのですが個人的に「DX向上タスク」と呼ぶことにします。
最近の例を紹介すると、開発部ではLisketの新規開発にかかった時間とバグ修正にかかった時間を、業務時間の内訳として記録しているんですね。毎日「えーと今日はバグ修正が2時間で、新規開発が…」なんて頭で計算するのはとても面倒くさい訳です。ところがある日「Slackの Slash Commands で簡単便利に時間計測できるカスタムコマンド作りましたー！」なんて嬉しいお知らせがあったんです。さすがエンジニアの集団、プログラマの三大美徳 の「怠惰」を地で行ってます。何度も同じことを繰り返す面倒な時間が大嫌いなんですね。
こういう「自分たちの作業をちょっと便利にしたい」活動はわりと頻繁に発生します。業務時間を割くような大きな開発であればもちろん承認を得てからの新規開発になりますが、小さなものであれば趣味プログラミングを兼ねて楽しみながらいろいろなツールが作られていきます。
よく使うツール達
ソースコードの管理は GitHub で行っています。 カルテット開発部では、以下のようなルールを習慣としています。
- コーダー以外の人がソースコードのレビューをする事
- テストを書く事
- リリース時の動作確認の内容をコーダー自身が考える事
またルールづくりだけでなく、ミスなく効率よく開発を進めるためのオリジナルな工夫も取り入れています。 例えば、リリース準備では個々のプルリクエストのDescription欄の内容を人の目でチェックしていて時間がかかっていたところ、先に紹介したDX向上タスクの一環で作成したツールによって動作確認項目を一括でissueに書き出したり、リリース申請書を自動生成したりするようになりました。
カルテット開発部にはリモートワーカーも数名在籍しています。テキストベースのコミュニケーションには Slack を使っています。
Lisket開発専用のチャンネルやシステムのアラートを流すチャンネルもあれば、詰まった時に「誰か解決方法を教えて！」を聞くためのヘルプチャンネルもあります。またエンジニアはそれぞれ自分専用のチャンネルを持っていて「あーこのテスト書くのつらい」とか「仕様ワカラン」とかぼやくと誰かが拾ってコメントを書いてくれたり、そんなコミュニケーションに役立っています。
ちょっとした仕様のまとめやマニュアル的なもの、またミーティングの議事録や日報を書いたりと、ドキュメント管理には esa を使っています。 自社カスタマーサポート向けのFAQページなど、他部署とのドキュメント共有にも使われます。
開発部内のミーティングは基本的にオンラインで行います。Googleハングアウト・Slackビデオ通話とあれこれ試した結果、今は zoom に落ち着いています。
フロントエンドのお仕事
2019/08現在、フロントエンドエンジニア2名・デザイナー1名の体制でフロントエンドの開発を行っています。JavaScript や AngularJS の保守や改善が7割、TypeScript や Anuglar での新規開発が3割、といったところでしょうか。CSSフレームワークは共通して Bootstrap を使っています。またLisketにおけるフロントエンド開発は Symfony というPHPのフレームワーク上のアセットという位置付けのためこの辺りの知識も必要になります。（業務上覚えていける程度でバックエンドエンジニア並みの知識がなくても開発できます）
フロントエンドチームでは週1回、直近の作業の共有や困りごとなどを話す場としてのチームミーティングを設けています。
通常タスクや開発部発タスクでフロントエンドチームに降りてきたものは、お互いの作業状況を見て割り振りを決めます。機能の保守やバグ修正などコードの追加・変更中心であればフロントエンドエンジニアだけで実施し、ユーザーの使いやすさ（UI）を変更する作業はデザイナーと共同作業になることが多いです。
人数が少ないとリソース不足などの問題はありますが、逆に密にコミュニケーションが取りやすい環境にあると思うんです。社員インタビュー にも書きましたが、ユーザーと直に対話するものづくりの楽しさがフロントエンド開発にはあります。どう見せるのか、どうやって設計したら再利用性の高いパーツになるのか、情報共有や相談をしながら作業を進めるようにしていて、こういったディスカッションの時間を大事にしたいと考えています。
技術的負債への取り組み
もう少し人数が増えたらスピードアップしたいのが、レガシーな仕組みやコードを新しい技術に置き換えていく「技術的負債への取り組み」というものです。例えば少し前までパッケージ管理でよく使われていた bower が未だ現役稼働中なのですが、これを npm に置き換える作業を地道に進めています。
また、Lisketのユーザーの中には最新のECMAScriptに追随しない古いブラウザを使っている人もいます。ここで「新しいシンタックスやオブジェクトを使いたいけど古いブラウザを全く考慮しない訳にいかないよね」って問題がでてきます。解決方法はたくさんあるんです。TypeScriptだったり Babel だったり core-js だったり。一気に全部のソースコードをリプレイスする事はできないので、何を選択しどうやって段取りして改善していくか、という計画が必要なんですね。（この問題について詳しく知りたい方は過去記事 「そのコード、開発環境と異なるブラウザでも動作しますか？」 をご覧ください）
技術的負債への取り組みは単純作業ではなく、意外と高度なスキルを要する作業です。良かれと思って実施したアップデートが謎のエラーを生みだしてシステムの画面が真っ白になる、なんてリスクもあります。反面、普段何気なくキャッチアップした知識を活かせたり、新しい仕組みを入れる事によって便利さがアップしたり、こういうところもシステム開発という仕事の楽しさではないかと思っています。
UI・UX改善
技術的負債はシステムのUIにも蓄積しています。カルテット開発部にデザイナーが入社したのはほんの1年前で、それまではエンジニアがそれぞれにUIを考えていました。そうすると画面によって見た目や操作にばらつきがでるのは当然の事で、この問題を抜本的に見直すために「UI・UX改善」というひとつの大きなプロジェクトとして捉えています。
個人で作った趣味プログラミングの画面改善ならまだしも、ビジネス要件の詰まったシステムの画面の改善は本当に難しいです。デザイン的な見た目の部分と、プログラムの修正にかかる工数的な部分、それとシステムが提供するサービス要件の3つのバランスを崩さずに進んでいく必要があるからです。
具体的な作業は、レイアウト改善の他、デザインのガイドライン策定や、CSSフレームワークのアップデート、フロントエンドのコンポーネントの作り変えなどがあります。こうした改善は、デザイナーだけに任せるのではなく、エンジニアの手も必要です。現時点ではどこから手を付けてどうやって段階的に改善していくのか、やり方を模索している状況です。私達が目指すのは「かっこいい」システムではなく「使いやすい、そしてかっこいい」システムで、ユーザー体験の向上に直接関われるのもフロントエンド開発の大きな魅力です。
フロントエンドエンジニアに求める人物像
カルテット開発部のフロントエンドエンジニアは、とにかくいろいろなものに触れます。Symfonyをバックエンドとしているためローカル開発環境をセットアップする時にはその設定も触りますし、何かうまく動かない時はPHPのコードリーディングもします。またフロントエンドの開発環境を整えるため、GitHubと連携させたCIの設定を触ったり、部分的に webpack を導入する事もあります。
そして先に書いたようにLisketの開発は決定済みのタスクが降りてくるだけではなく、エンジニア自身もシステムがどうあるべきか考えますし改善を提案します。それにはリスティング広告の知識も少なからず必要です。
最初から全てのスキルを持っている必要はありません。私も最初は全てにおいて初心者でしたし今でも勉強中です。ただ、特定の分野に固執するのではなく、広くいろいろな事に興味を持って意欲的にチャレンジできる方を求めています。
おわりに
フロントエンドのお仕事、またカルテット開発部について雰囲気だけでも感じていただけたでしょうか。 カルテット開発部では、ちょっと気になったという方をSlackにゲスト招待してバンバン質問してもらう、なんて取り組みも行っています。応募前提ではなく質問だけでも結構ですので、ぜひお気軽にお声がけください。
本記事を読んで、弊社フロントエンドエンジニアのお仕事に興味を持っていただけたら幸いです。
