未経験からフロントエンドエンジニアとして自社開発企業へ転職するまでにやったこと

はじめに

こんにちは。
このたび、働きながら独学5ヶ月でフロントエンドエンジニアとして自社開発企業へ転職することができました。

この度、自社開発企業に内定をいただき、来年1月からフロントエンドエンジニアとして勤務することになりました！

5月から勉強を始め、32歳+未経験+独学+働きながらでしたが、諦めずに続けてよかったです。

転職はゴールではなくスタートなので、今まで以上に勉強に励みます😠🔥

— meg@未経験からフロントエンドエンジニア (@MegEngineer) September 25, 2020

今回は、**学習開始から転職活動〜内定までを振り返ってみたいと思います。**

フロントエンドエンジニアの転職活動についてまとめたものをあまり見なかったので、誰かの参考になれば嬉しいです。

目次

• [未経験から内定をもらうには？](## 未経験から内定をもらうには？)
• [経歴について](## わたしの経歴について)
• [準備（2020年4月頃）](## 準備（2020年4月頃）)
• 1ヶ月目（2020年5月）：Webデザイン＆コーディング
• [2ヶ月目（2020年6月）：アプリ開発、ポートフォリオ検討](## 2ヶ月目（2020年6月）：アプリ開発、ポートフォリオ検討)
• [3ヶ月目（2020年7月）：ポートフォリオ作成](## 3ヶ月目（2020年７月）：ポートフォリオ作成)
• [4ヶ月目（2020年8月）:転職活動開始](## 4ヶ月目（2020年8月）：転職活動開始)
• [5ヶ月目（2020年9月）：内定](## 5ヶ月目（2020年9月）：内定)
• [学習に使用した教材やサービスについて](## 学習に使用した教材やサービスについて)
• [Udemy](### Udemy)
• [書籍](### 書籍)
• [公式ドキュメント](### 公式ドキュメント)
• [ドットインストール](### ドットインストール)
• [MENTA!](### MENTA!)
• [Youtube](### Youtube)
• [転職活動について] (## 転職活動について)
• [まとめ](## まとめ)

未経験から内定をもらうには？

未経験からエンジニア転職は難しいと言われていますが、文系未経験30代でも自社開発企業に転職することができました！

働きながら学習＆転職活動を進めましたが、

・フロントエンドエンジニア志望でもしっかりポートフォリオを作成すること(=自走力のアピール)

・自己分析を行い、過去の職歴に基づく強みをアピールすること(=自分の強み、会社への適正のアピール)

が重要だと思いました。　

わたしの経歴について

地方国立大学文系学部卒業後、法律事務所勤務を経て地方公務員として働いています。
学生の頃、趣味でホームページを作成した経験はあるものの、HTML/CSS以外のプログラミング言語についてはまったく知らない状態でした。

準備（2020年4月頃）

まずはじめに以下の環境を整えました。

・PCを購入（MacBook Air)
・VScodeインストール
・iTerm2インストール
・学習用Twitterアカウント開設

また、短期目標として下記を設定しました。
・5月でインプット
・6〜7月でポートフォリオ作成
・8月〜転職活動開始、年内に転職先決定

1ヶ月目（2020年5月）：Webデザイン＆コーディング

まず最初にWebデザインとコーディングの学習から始めました。
**[書籍](### 書籍)や[Udemy](### Udemy)**でインプットし、まずはサイト模写などのアウトプットを行いました。

また、学習用に開設したTwitterアカウントで日々の積み上げやトレースしたバナーをつぶやいたり、自分と同じように勉強している方を見つけたりしてモチベーションを上げていました。

#今日の積み上げ

udemy講座
「JavaScriptをとことんやってみよう」
56〜98回

《学び》
・非同期処理の復習(Promiseが基礎になっている)
・Ajax通信
・クラス
・webpackなどの環境設定

js基礎は一通りインプット完了✨
今日一番の驚きはiterm2😳やっとインストールしたけど魔法みたい😳

— meg@未経験からフロントエンドエンジニア (@MegEngineer) May 30, 2020

2ヶ月目（2020年6月）：Webアプリ開発

フロントエンドエンジニアは幅広いので、その中で自分がどの道へ進みたいのか考えました。
ざっくり分けるとLP制作などのコーディングをメインにしたWeb制作か、Webアプリ開発か。
ここでWeb制作だとWordPressなどの学習を進めるようになります。

わたしはWebアプリやシステム開発したい！と思ったので、Webアプリ開発の学習へ！

JavaScriptで簡単なToDoリストを作ったり、チュートリアルを参考にJavaScriptフレームワークのVue.jsでチャットアプリを作ったりしました。

3ヶ月目（2020年７月）：ポートフォリオ作成

未経験から転職活動を行うにあたり、学習の成果や技術レベルを客観的に証明できるポートフォリオは必須です。

わたしは

①ログイン認証のない、誰でも気軽に利用できるWebアプリ : YATTA!

②ログイン認証があり、データベースへのCRUD処理ができるWebアプリ : Kusuri

③ポートフォリオサイト : Meg's Portfolio

の３つを作成しました。

###ポートフォリオのアイデア
チュートリアルをそのままポートフォリオにするのではなく、「なにか困っていることを解決したい」というような自分でアイデアを考え工夫して開発することが大切だと思います。
面接では必ずポートフォリオについて質問があるためです。

わたしは、”誰もが簡単に発言できる時代だからこそ、ひと手間かけて相手に気持ちを伝えることの大切さ”や”嬉しいできごとを共有して皆がHappyになってほしい”という想いから
①のアプリについては嬉しい出来事をカードにしてTwitterでシェアできるアプリ
②のアプリは嬉しい出来事をユーザーで投稿して共有できるアプリ
を考え、ユーザーフレンドリーを意識してあえてログイン認証のないものにしたりデザインを工夫しながら開発しました。

###使用言語
JavaScriptのフレームワークやライブラリであるVue.jsやReactなどを使用するのがよいと思います。
わたしは
・日本語の公式ドキュメントが充実している
・学習コストが低い
などの理由からVue.jsを選びました。
バックエンドについてはBaaS（Backend as a Service)であるFirebaseを利用しました。

コードはすべてGitHubへ

ポートフォリオで作成したWebアプリのコードはすべてGitHubにpushしました。
選考の段階でGitHubのURLを送ってほしいと依頼されることもあったので、すべてpushしておいたほうがよいと思います。

4ヶ月目（2020年8月）：転職活動スタート

ポートフォリオが完成したため、さっそく転職活動開始。
実務経験必須の求人にも積極的に応募しました！

5ヶ月目（2020年9月）：内定

転職活動開始から１ヶ月、面談や面接は５社ほど受け、第一希望の企業より内定をいただきました。

学習に使用した教材やサービスについて

基本的に書籍とUdemyを利用しインプットして、チュートリアル等でコードを書いていくようにしました。
また、仕事の休み時間などのスキマ時間はQiitaの記事を読んだり、そのときわからないことを調べてまとめるようにしました。

Udemy

幅広い講座の中から、目的や好みに合った講座を購入できます。
セール時の購入がオススメです！

下記、わたしが購入した講座の一部です。

• [HTML/CSS/JavaScript]フロントエンドエンジニアになりたい人のWebプラグラミング講座/たにぐちまこと
• JavaScriptをとことんやってみよう/世界のアオキ
• 誰でも簡単に学べるAdobeXD入門講座/濱野将
• 最短・最速で学ぶFirebase Hosting+Vue Todoアプリ実装/Daiz Academy

書籍

◯1冊ですべて身につくHTML&CSSとWebデザイン入門講座（Mana著）

第一歩はここから!

◯JavaScript本格入門

THE入門書。基礎が大事なので、理解できないところは時間をかけて読み込みました。
ポートフォリオ作成と並行してもOKだと思います。

◯Vue.js入門

Udemy講座終了後、ポートフォリオ作成中こちらで復習しました。

◯Webを支える技術

Webサービス設計の基礎について学ぶことができます。

◯リーダブルコード

独学でコードを書くことに不安があったため読みました。
読みやすいコードはどうあるべきか？さまざまなパターンが紹介されています。

公式ドキュメント

コードを書いていてわからなければまず公式ドキュメントを確認！

MENTA!

自分に合ったメンターさんと契約できるサービスです。
コードレビューや転職サポート（職務経歴書の添削など）をしてもらったり、メンターさんによってはチーム開発にも参加できるので、独学の方は利用をオススメします！

Youtube

しまぶーのIT大学さんのYouTube講座は全体像がわかりやすく、オススメです！

転職活動について

利用した転職エージェント

Wantedly

「まずは話を聞きたい」から企業に連絡をとることができるので、カジュアル面談から入るところが多く気軽に話を聞きやすい。

Green

初回応募時に選考理由等フォーム入力するため敷居が高い印象だが、そのぶん初回応募で通ると面接に進みやすい。

履歴書、職務経歴書

まず面接の前に提出を求められることが多いため、履歴書と職務経歴書も用意しておきます。
できれば第三者に見てもらって意見をもらい、校正したほうがよいと思います。

面接対策

面接では自己紹介やエンジニア転職を決めた理由は必ず聞かれるので、あらかじめ準備しておきます。

また、前述のとおり面接では、ポートフォリオについて質問があります。
ただ学習の成果をアピールするだけでなく、
・なぜこのアプリを作ったのか
・何を解決したいのか
・工夫した点はどこか
など説明できるように整理しました。

まとめ

いつ転職を目指すか、どのような学習方法が合っているかは個人によって異なりますので、自分に合ったやり方が一番です。
わたしの場合は転職先決定までの期間を短く設定していますが、長期目標として基礎をしっかり身につけた上でポートフォリオ作成してもよいと思いますし、いきなり正社員でなくともインターンをしながら学習するのもよいと思います。

ただ、やると決めたら徹底的にやること、それだけです！

少しでも参考になれば嬉しいです☺