フロントエンドエンジニアとして入社して２ヶ月が経ちました。

EDOCODE株式会社でフロントエンドエンジニアをしている、kaoriです。
この記事は **Wano Group Advent Calendar 2019** の16日目の記事となります。
EDOCODE に入社したのは、ちょうど２ヶ月前。入社してから今日までのお話です。
社員のみなさんはこんな奴が最近エンジニアになって頑張ってるんだなと暖かい目で読んでいただければ。
社外の方やエンジニアを目指している方は少しでも EDOCODE に興味を持っていただければと思います。

#前職の簡単な話と入社した経緯
社会人3年目、中途入社で EDOCODE にフロントエンドエンジニアとして入社しました。前職はエンジニアではなく、はたまたIT業界でもなく、金融機関で個人担当の営業職として働いていました。

最近は社会人になってからエンジニアを目指す人が増えている傾向にあると思いますが、前職とは業界も職種も全く違うので、エンジニアを目指す人の中では珍しいタイプだったかもしれません。なので、転職活動の時には、面接の都度それはもうたくさん突っ込まれたし、Web製作会社の選考では高確率で「元営業ならディレクターはどう？」と言われたり。。
##そもそものきっかけは大学の先輩
前職の会社を辞める決意をした原因・理由はいろいろありますが、エンジニアを目指そうと思ったのは、安直な考えですが、手に職をつけたいと思ったからです。大学生の時の就職活動の際、お世話になっていた先輩が サイボウズ に入社したことがきっかけで、IT業界も見始め、その中でも **SIer** に興味を持っていたことがありました。

そこで転職を考え始めたタイミングでもう一度、IT業界について調べていたところ、**WEB業界**があることを知りました。ちなみに、私は文系でかつ大学も経済学部卒、HTML すら何かわからないくらいプログラミングとは無縁の人生を歩んでいました。

転職活動をするにあたって、未経験者はエンジニアとして中途入社するのは簡単ではないこと、WEBのプログラミング言語の方が、自己学習するツールがネット上にたくさんあることが分かり、まずはオンラインでプログラミング学習をはじめます。コンテンツとしては、フロントの技術に重きを置いたもので、HTML、CSS、JS、PHPを中心に3ヶ月ほど学習、その後転職活動を経て、**2ヶ月前にEDOCODEに入社**することになりました。
#入社してから
EDOCODEでは入社してからいくつかの研修が準備されています。Web業界ということや、会社の規模を考えてもこれは非常に珍しいですよね。エンジニア実務未経験ということもあり、研修のおかげで業務をスムーズに理解することができたと思います。簡単に研修概要を紹介します。
##ポイントモール研修
EDOCODEは基幹事業として、**複数の国内クレジットカード会社との協業によるポイントモールサイトを開発・運用しています。**ECショップなどでお買い物をするときにこのサイトを経由してECサイトへ遷移後、いつも通り買い物をするだけで通常よりたくさんのクレジットカードのポイントを貯めることができるサービスです。
この事業内容に関しては以下のような内容を中心に研修が行われ、サービス内容についての理解を深めることができます。

- ポイントーモール事業のステークホルダーと資金の流れ
- ポイントモールサイトの仕組み
- ユーザーへポイントを還元するまで
- ポイント集計方法
- ポイントモールサイトのコンテンツ内容

<img width="743" alt="スクリーンショット 2019-12-16 3.54.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536926/387d2929-a547-e849-bca8-2f881664c0ef.png">
上記のフロー図は簡単なものですが、実際は思っていたよりもたくさんの関係者がいて、お金の流れやユーザーにポイントが還元されるまでは、少し複雑なプロセスを踏んでいることが分かりました。私は、前職のグループ会社にクレジットカード会社があったので、ポイントモールサイトの存在は知っていたこともあり、比較的理解しやすかったかもしれません。

##フロントエンド研修
基本的にポイントモールサイトの運営に必要なフロントエンドに関わることを研修で教えていただきました。
研修内容としては以下のような内容。

- Perlテンプレートの基本的な書き方。
- 開発環境に関して
- Adobe ツールのレクチャー
- コーディングガイドライン
- Sass
- HTML、CSS、jQueryのコーディング課題

フロントエンドの一般的な技術の話だけでなく、ポイントモールサイトでのルールや書き方など、社内でしか学べないこともたくさんありました。

ちなみにコーディング課題で作成したページはこんな感じ。
![assignment.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536926/6fb454bb-35b6-e9b4-e457-643d5671675b.gif)


**レスポンシブ対応、スライダー、モーダル画面、ハンバーガーメニュー**などの実装を行いました。独学の時にはできないコードレビューもしていただけたことは本当にありがたいと感じました。


###Perlテンプレート
ポイントモールサイトはPerlのテンプレートで実装されています。そもそもPerlという言語も入社するまで知らなかったくらい、全く馴染みのない言語。
Perlは基本的 % でコードを囲んで書きますね。
`[% ○○○○○ %]`
こんな感じ。
初めは、自己学習で学んだPHPの知識を元に、「ああ〜、PHPの`<? ○○○○○ ?>`と同じ感じね〜」と思って、読んでたけど、他の書き方は結構違いました。。。

###コーディングガイドライン
ポイントモールサイトに関しては社内で定めているコーディングガイドラインがあります。
ドキュメントにまとめてあり、ここでは、HTML、CSS、JS、ttに関して、クラス名や関数名の付け方、プロパティの記述順、画像名の付け方、JSでクラス名を使用するときのルールなどが定められています。
私は、直感でクラス名とかをつけてしまうので、ある程度、ルールが決まってる方が書きやすい。:)

##サーバー構成/DB研修
ポイントモール事業で使用しているデータベースやテーブル構造に関しての研修です。
以前、学習のために簡単なwebサービスを作るためにphpMyAdminを使用して、テーブルを作ったことがありますが、それとは比にならないくらい、テーブル数が多い。そして複数のテーブルと関係を持ってるので、複雑に感じました。。。X(

##実務の案件にも参加
入社して2週間後あたりから、研修と並行しながら実務のコーディング等もさせていただきました。初めはHTMLとCSSの簡単な修正から、jQueryやAjaxを使ったログインページなどの実装もさせていただきました。初めてlocalStorageも使用して、少し複雑な条件分岐の実装もして、思ったような結果が出なかったり大変でしたが、やっぱり動いた時はとても嬉しいです。それも、それがただ、自分の勉強のために作ったサイトではなくて、これから多くのユーザーが使うものってことがさらにワクワク感を増してくれます。


#入社して感じたこと
入社してまだ2ヶ月ほどですが、エンジニアの職種としてだけでなく、前職の業界と比較しただけでも、初めてのことや、これいいなと思ったことがいくつかあります。
##ググれば答えが出てくる
きっとエンジニアにとっては当たり前のことだと思いますが、これって改めてすごいことです。これってどうしたらいいんだろうと思ったことも基本的には、ググればヒントや答えが見つかります。コードは公開されているし、まとめサイトもたくさん見つかります。

ただ、調べても解決できないものの時も、根気強く調べた結果、社内の設定の問題だったりした時は、早く聞けばよかったともなります。そこの区別はまだ難しいです。

入社して一番感じたのは、隣にすぐ聞ける人がいることや自分のコードのレビューをしていただけること。これは一人で勉強をしていた時には、経験できなかったことです。お時間をいただいてしていただけること、本当にありがたい。
##初めまして Slack
当たり前のように使われているSlackですが、私は、入社して初めて使用しました。業務の情報共有はもちろん、業務外のコミュニケーションもこれでとったり。いや、すごい便利。ただ、最初はすぐ近くにいるのに、Slackで連絡をとるというのに違和感を感じることもありましたが、慣れたら、効率的以外のなんでもないです。
<img width="743" alt="スクリーンショット 2019-12-16 4.48.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536926/c038e456-89bc-9dad-56d1-2ed2eb65f0d1.png">
今思えば、前職はなんて非効率な、、何事も書面が当たり前だったし、報告は対面だったし、メールよりも電話中心。一日中、内線・外線問わず、電話がなってたな〜、電話出たら仕事進まないし、でも、若手は電話出ないと怒られるし、そして仕事進まなし、、、。Slack以外にもタスク管理ツールやドキュメント管理ツールなど、初めて使用するツールがいくつか。ツールはもっと使いこなせるようになりたいです。

##今までとは違いすぎたオフィス環境
**社内で音楽が流れているなんて**、、、想像もしてませんでした。コーヒーメーカーはやたら充実しているし、電話は外部委託してて来訪以外鳴らないし、テレビ会議が当たり前だし、懸垂ができるバーあるし、アドビクッション可愛いし。:D
国際色豊かで、日本以外の国籍の方もいて、英語のレッスンもあったり。
オフィスに行くのが楽しいと思えるなんて、前の職場にいる時は想像もできなかったです。
![Image from iOS.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536926/da0b7b97-e873-4990-4ff6-b16ef4e0efb3.jpeg)
#これからしたいこと
##ポイントモール事業において
ポイントモール事業自体は数年前から続いているもので、コードの中身が事業初期のものを続けて使ってるところが見受けられます。またポイントモールに関しては定期的に修正があるのですが、何度か実際に修正をさせていただいたときに、意外にも保守性が高くなかったりする箇所もあることがわかりました。

これからもポイントモールサイトを運営していくのであれば、ここはさらに課題になっていくと思うので、モダンな技術も取り入れていきたし、保守性の高いコードに少しずつ修正をしていければと考えています。
##エンジニアとして
今はFLOCSSの書き方を習得中で奮闘しています。まだまだ初めてのことがたくさんありますが、選り好みせずに積極的に技術習得をしていきたい。自己学習の時、PHPを触るのは結構好きだったので、ゆくゆくはフロントもバックもわかるエンジニアを目指していきたいです。


#最後に
Qiita の記事を書くのはそもそも初めてで、何を書いたらいいのかわからなかったですが、Wano の@fukubaka0825さんや EDOCODE の@maido_yamada_desuさんのアドバイスのおかげで、無事投稿することができました。ありがとうございました。:)

今回弊社のアドベントカレンダー参加者は焼肉を食べることができるそうです。グループ会社のエンジニアの方々とはまだ面識がない方がほとんどなので、焼肉の際にはお話できることを楽しみにしています!:D

![Image from iOS (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536926/7df3581b-5943-b683-bbdd-937de55418ed.jpeg)