現在、私はCBcloud株式会社でエンジニアとして、フロントエンドに限らず業務に携わっています。
今回の記事では入社当時、フロントエンドエンジニアとしてやってきたことをつらつら書いていきます。

前職の話

前職は完全にフロントエンド実装のみを専門とする会社でした。
サイトリニューアルや店舗予約系のWEBサービスのフロントエンド実装を担当していました。
jQueryを使い、モーダル、カルーセル、スムーズスクロールのようなWebサイトでよくあるコンテンツを作っていました。
実務では最後までjQuery1本でした。JSフレームワークは社内・社外の技術勉強会を通して触れていました。

一つ言えるのは、前職でのJavaScript研修がなければ、今も確実に「JavaScriptよくわからん」の状態ですし、リファレンスもまともに読めず、他の言語を学ぶ際にも応用できなかったでしょう。

転職してCBcloudに入社した

どうして入ったのか（入れたのか）

2019年12月現在、社員数を着々と伸ばし続け60人を超える会社に成長しているCBcloudですが、
私が入社する直前の2017年4月時点では10人ほどの会社でした。

CBcloudのサービスである「軽town」（のちの「PickGo」）を開発しているエンジニアは1人の状態で、
フロントエンド専門のエンジニアはおらず、サービスを紹介するウェブサイトからサービスサイトまで頑張って実装していました。

そんなわけで、「バックエンドはよくわからないけどフロントエンドならできます」という私とはちょうどタイミングや利害が一致し、入社することになりました。
「今の基準で面談・面接を受けていたら入れるかどうか」というのはたまに思います。
ともあれタイミングと、自分の強み・弱みを相手にちゃんと話せるかどうかは大事だなと思います。

私と同じ時期にもう一人デザイナー兼エンジニアが入ったことで、
2017年5月末から、PickGoのエンジニアは3人となります。

PickGoとは

荷物を送りたい人と荷物を運ぶことの出来る軽貨物者の配送ドライバーをマッチングさせ、
届けたい場所に即時でモノを届けることを実現する配送マッチングサービスです。

おおきく分けてサービスが2つに分かれています。

企業が配送依頼をするWebサービス（PickGo Business）
配送依頼をドライバーが確認し、エントリー～配送までを管理するスマートフォンアプリ（PickGo Driver）

PickGoのサブサービス的な個所のフロントエンド実装

まだあまりJavaScriptは触っておらず、HTMLとCSS修正が主でした。
バックエンド実装やJavaScriptとフロントエンドをつなぐ部分は任せきりでした。
リリース作業も任せていたため、本当にフロントエンドだけやっていました。

私のスキルがどの程度かまだ理解されていなかったので、
様子を見ながら起用されていたと思います。
フロントエンド的には「CSSの使い方を修正するだけでも割とコミットできそう」と当たりをつけたりしてました。

ウェブサイト立ち上げ

法人向けサイト作成

入社当時、既に軽townドメインを使った状態でドライバー向けWEBサイトはリリース済みでしたが、
PickGoの法人向けのPRサイトがまだありませんでした。
「デザインはあるがフロントエンド実装できる人間がいない！」という状況下で、私が入社したため実装を任されました。

当時渡されたデザインがビジネスサイトにしてはポップ過ぎたため、CEOからの要望もあり、
構成はほぼそのままで、色調を抑えつつデザイン画から実装しなおしました。

現在は完全リニューアルしており、当時の面影は微塵もありません。
ともあれpickgoドメインは継続して使っており、SEO的には少しでも長い間存続している方がいいので、
2017年時点でリリースできたのはよかったのかなと思います。

個人向けサイト作成

後述の個人向けサービス開始前の布石として、個人向けサイトをリリースしました。
こちらはほぼ出来上がっているHTML・CSSがあり、そこに必要な文言・画像・セクションを足したものをリリースした形となります。
作業自体はフロントエンドを触れる人間なら誰でも出来るもので、特別なことはありません。

リリース直前、キャッチコピーとなる言葉の添削があり、
いろいろ考えた末に、私の案である「5000円から引っ越しを始めよう！」で行くことになりました。

例によって完全リニューアルされており当時の面影はありません。

統合ページ作成＋リダイレクト

ドライバー向け
法人向け
個人向け

訴求対象が異なる3つのサイトが出来上がり、それをまとめるページも必要となったため作成しました。
3つのサイトにリンクするためのページです。

やはり完全リニューアルされていますが、トップページ → 各サービスサイトという流れはこの段階で確立しました。

ロゴ変更

入社してすぐ、「サービス名を変える」ということになり、軽townからPickGoにサービス名が変わることになります。
それに伴い、Webサービス全体のロゴを変えることになりました。
ロゴを変えるだけではなく、メイン色も緑から青に変わりました。

ログイン画面UI再実装

また、ビジネス側のログイン画面はこの時に再実装し、デザインを大幅に変えました。
要素数の少ない画面なので、当時のデザインを活かすよりも実装しやすいように完全に構造を変えました。
デザイン画は特になかったので、必要な要素を小綺麗にまとめた感じにしました。

この画面はまだ当時のデザインのままなので、ログイン画面は長く使われるし、一度リリースしたらめったに変更されないぞ！と思います。
（機能改修は何度か入っていますが、デザイン自体はそのまま保たれています）

アプリのUIデザイン変更

ドライバー向け一覧と詳細のデザインを変えました。
デザイン画があったのでその通りに実装した感じです。
UIデザインはここから後も少しずつ変わっていくことになります。
ここ以外もそうですが、とにかくCSSクラス単体での指定に置き換えていってます。

PayPal対応

PayPayじゃないよ。
PayPalAPIのバックエンド実装は（2日目の記事を書いている）徳盛氏に任せ、
HTML実装部分を担当しました。
具体的にはPayPalのAPIを使うためのHTMLの属性設定と、PayPal登録用ボタン・案内テキストのUI作成です。

UIの実装自体は苦労するところは特になかったのですが、
フレームワークや言語の解説ではないAPIドキュメントを読んで理解し、HTMLに適切な属性を当てていくのは初めての経験で、
かなり苦労しました。「この属性はこういう意味だよ」と書かれているだけで、具体的なHTML実装の例が書いているわけではないので、「結局どう実装するのが正解なんだ！」という目に何度も陥りました。

それでもドキュメントだけでなく、PayPalの担当者の方とSlack上で質問することができたこともあり、
なんとか完成することができました。

具体的には下記のようなHTMLです。nameとvalueは対応する決まったもの（適切な単語）を入れる必要がありました。
2行ならまだしも16項目分、間違えずに実装する必要がありました。

<input type="hidden" name="currency_code" value="JPY">
<input type="hidden" name="billing_country" value="JP">

PickGo Personal

ロゴの変更やアプリの改修も一段落し、次が大型の案件となるPickGoの個人向けサービスの開発でした。

メイン機能となるのはチャット機能でしたが、私はそこにはほぼ触れず、他のエンジニア2人に任せていました。
その代わり、それ以外の画面すべてのフロントエンド実装をしました（といっても10画面程度ですが）。
土壇場でヘルプページに説明を足したりしました。
PickGo Personalは結果的に3ヶ月ほどでリリースした形でした。

個人向け＝一般向けのサービスであるため、テレビで取り上げられることが多く、
アプリの画面が大きく映し出されるたびに、嬉しいやら恥ずかしいやら何とも言えない思いをしました。

取材

前職と大きく異なっていると感じたのが取材です。
10人規模だった入社当時でも既に報道各社からの取材の依頼があり、オフィス内にテレビカメラが入ってきていました。
事業として「物流クライシス」という社会問題に取り組んでいるため、物流系の雑誌はもとより、
現在でも有名なテレビ番組、ニュース番組で取り上げられることがあります。

私自身はカメラに映りこむことは多少あったものの、取材に直接応じる役目を負うことはなく、
代わりに、自分が作ったサービスや紹介ページがこれでもかと映ってくれています。

ドキュメント化

入社当時のGitHubのWikiは真っ白でした。
一人で開発している段階だと頭に入っていればよかったものも、複数人で開発するとなると話は別です。
フロントエンドのコーディングガイドラインや、ページの作り方からまとめはじめ、
自分が関わっているPickGo関係のリポジトリwikiのページ数を合計すると、現在までに60ページほど書きました。
初版はほぼ私ということになります。

一度まとめておけば、忘れても書いてあることから何とかなりますし、
細かいことをいちいち覚えておく必要がなくなる上、必要に応じて他の人が加筆することもできます。
その辺はある程度認識しているつもりでしたので、頼まれずともやっていました。自分にとって必要なので。

Slackの絵文字追加

Slackは使われていたものの、私が入った頃はカスタム絵文字がほとんどありませんでした。
なので、自分が使いたいリアクションをとにかく足していきました。
今では社員の皆さんがジェネレータを使うなどして自作することも増え、充実したラインナップになっています。

スタンプでリアクションを付けまくるというのは、前職からずっとやっている気がします。
数えてみたら、カスタム絵文字は2019年12月現在までに私一人で214個追加したようです。

採用

個人アプリのリリース後は年末まで採用活動に振り切っており、
開発した記憶があまりありません。1日中面談やソーシングをしていました。
前職ではエンジニア面談をする機会がなかったので初めての経験でした。

人を採用するって難しいと思いました。
なかなか採用内定が出ることがなく、私が良いと思っても他の人たちが首を縦に振るような人がなかなか現れませんでした。
スキルとマインドを両方見た上で判断するわけですが、
圧倒的なスキルを持つ人には合うポジションを用意することができなかったりするわけで……。

それでも他の皆さんの頑張りもあり、2017年末までに1人、2018年1月からさらに2人のエンジニアを迎えることになりました。

まとめ

つらつら書いていきましたが、採用以外は

サイトを作った
UIを作った
ドキュメント化
Slack絵文字

以上！ということになります。
前職だとそれだけでずっと働けましたが、CBcloudでは限界を感じることになります。
次の記事ではその辺りの話から続けて書いていければと思います。