フロントエンドエンジニア(主にVue.js)に転職して学んだこと

はじめに

転職して1年が経ったので、個人的な振り返りです。

未経験から主にVue.jsを学び、モダンなフロントエンド開発が学べて個人的には大きな収穫となりました。

私について

• WEB制作会社出身
• 前職はコーダー
• 前前職はPHPのサーバサイドエンジニア
• 2019年に転職、フロントエンドエンジニアになる

古典的なWEB制作会社にいましたので、モダンなフロントエンドを学びたいと思い、転職活動をしました。

前前職はサーバサイドエンジニアをしていたのでプログラミングの基礎はあるものの、
フロントエンドエンジニアという職種は初めてでした。

もちろん未経験では採用してくれる企業はなかなかいないので苦戦しましたが、縁あって今の会社に転職することができました。

入社前のVue.jsの勉強方法

• 入社前、前職の有給消化期間でUdemyと本で学習
  • Udemy 「Vue JS 入門決定版」https://www.udemy.com/course/learn-vuejs/
  • 本「基礎から学ぶ Vue.js」https://www.amazon.co.jp/gp/product/4863542453/

入社まで1ヶ月ぐらい休める期間があったので、Udemyを見ながらコードを書きました。
それを2～3回繰り返しました。

移動時間など隙間の時間で本を読みました。

Udemyと本では、片方しか載ってないこともあるので、双方向から学べて良かったです。

学んだこと

主に学んだことの一覧です。

• Vue.js
• Git
• Adobe XD
• ES6
• Ajax(非同期通信)
• VueValidator
• webpack
• babel
• eslint

Vue.js

Vue.jsでデータバインディングが手軽にできるのが良いです。

Vue.jsで学んだことについては別途下記に書きました。

Vue.js私的備忘録
https://qiita.com/seki0809/items/4d6a9fa9206e381f38a4

Git

GitはGitLabを使用しています。

前職はバージョン管理はしてませんでしたし、前前職はSubversionでしたので、
gitを実務で使ったことがない状態でした。

高度な使い方はしていませんが、
基本的にはコミット&プル、ブランチを切る、マージリクエストでコードレビュー&マージをするなどです。

ES6

プロジェクト内のコードでは古い書き方も残っていますが、アロー関数やforEach系(map,filterなど)極力新しい書き方にするようにしています。

Ajax(非同期通信)

プロジェクトではaxiosを使ったAjaxでGETやPOSTを多数使ってます。

GETやPOSTでパラメーターを投げ、返ってきたJSONを受け取り、表示させます。

VueValidator

VueValidatorでフォームの入力時にリアルタイムでバリデーションができます。

日付や期間などカスタマイズしています。

Webpack

以前はGulpは使ってましたが、Webpackは初めてでした。

Babel

プロジェクトはIE11を対応しなくてならないので助かります。

ESlint

プロジェクトではESLintを使ってます。
問題があればブラウザに出るので助かりますが、WebStormであれば事前に警告が出ます。

Adobe XD

デザインをするわけではないですが、デザイナーが作ったデザインを再現するために基本操作を知る必要があります。

その他、やってること

コードを書くこと以外にやっていることです。

• サーバーサイドとの連動部分の設計やドキュメント作成
• 新規機能や追加機能の要件定義

サーバーサイドから受け渡すJSONや、コンポーネントのProps、の設計やドキュメント作成をしてます。

また、プロジェクトには企画職やディレクターはいないので、エンジニア達で作る機能を決めています。

技術以外で得た心得

意識すること

• フロントエンドとバックエンドが連動してサービスが動くことを意識する

  • 相手の心情を理解する
  • 「自分の仕事はここまで」と区切らない
  • フロントエンドとバックエンドの職種で分けた考え方をしない

• 複数人で進めていくことを意識する

  • 自分しか分からない書き方は避ける(規約等やマジックナンバー

ここまではチームとして開発をしていくために必要な意識です。

• 時間は大切

転職して一番感じたのは時間の大切さでした。
チームで作ることを決めてから共有をするするので会議は多いです。もちろん口頭でその場で浮かんだアイデアを盛り込んでいくことでスピード感を出した開発を進められます。

• コードを読む時間が長くなることを意識する

プロジェクトが進行している途中から参戦したため、動いているコードをまずは読まなければなりません。
そのため、コードを書くよりも読む時間の方が多くなります。
途中でアサインされる人もコードを読む時間が長くなりますから、その分の見積もりを考慮しなくてはなりません。

その他反省点

• モーダルにコンテンツを入れすぎない
• ボタン連打の対応
• マージンの方向は統一する

課題

• 見積もり

開発の途中で「こうした方が良い」がたくさん出てくるので、その分のバッファを取るのは必要だったかなと思います。
ただ、お尻（期限）は決まっているので、区切りや着地点を決めないといけません。

• 見積もりの見積もり

プロジェクトは途中参戦なので、自分が作ったわけではありません。そのため見積もりを把握するには挙動を理解してソースコードを読む必要があるので、時間が取られ、「見積もりの見積もり」が必要です。

• ライブラリ系

WYSIWYGなどフロントエンドではスクララッチでは作れないので、いろいろライブラリを使ってます。ですが、いろいろと使い勝手が良くないとを言われることもあり、着地点を見つけないといけません。

また、挙動を把握するのに手探りで色々試したりするので、研究職みたいな仕事だなと思うことがあります。

学びたいこと

今後、学びたいことです。

• Vuex
• nuxt.js
• Vue3系
• ユニットテスト
• StoryBook
• AtomicDesign
• TypeScript
• React
• GitHub
• アジャイル開発

以下、それぞれの理由です。

Vuex

プロジェクトではSPAではなくMPA(Multi page application)のためVuexは必要ないというのがあります。
propsとemitでコンポーネント間を受け渡せますが、Vuexもやらないとな思うところです。

Nuxt.js

やっぱVue.jsといえばNuxt.jsなので。
ローカルにインストールして動かしてしたり、Udemyの動画を観てますが、実践の場がありません。
何かアイデアあれば公開しようと思います。

Nuxt.jsをインストールしたときのメモはこちら

Nuxt.jsインストール手順備忘録
https://qiita.com/seki0809/items/5f831d63146e44dc106a

Nuxt.jsでちょっと作ってみた記事はこちら

Nuxt.jsとChart.jsとRakuten RapidAPIで新型コロナウィルス感染症のデータを表示させてみる
https://qiita.com/seki0809/items/f1759c142eedd1ae5b9d

Vue3系

Vue.jsの3系が正式リリースしているかも分からない状態なので。

ユニットテスト

「テストとは？」という状態なので。
nuxt.jsをインストールするときにJestなど聞かれるので試してみたいと思います。

StoryBook

StoryBookを使っている会社が多いと聞くので。

AtomicDesign

プロジェクトを構築する初期にはAtomicDesignを検討してたようですが、私がジョインしたころは崩壊してました。一貫性を保つって意味では必要なのかなと思います。

TypeScript

私がプロジェクトにジョインしてからはJSDocで引数や返り値に型をを書くようにしてますが、やっぱ型を見たほうが良いと思うので。

React

Reactは本を買ったりUdemyの動画を観たり、ローカルにインストールしたりしてますが、実践の場がないので。

GitHub

プロジェクトではGitLabを使ってますが、世間はGitHubが多数派なので。

アジャイル開発

今のプロジェクトはウォーターフォール寄りで、時期によってリソースにムラができていると思います。
アジャイルであれば改善できるのか、学びたいなと思います。

所感

学ぶことが多くて大変満足した1年でした。

ですが、課題もあるのでこの先に学んでいきたいです。