未経験からのWebエンジニア転職体験記

はじめに

こんにちは。
僕は現在、東京都内の自社サービスを展開している企業でWebエンジニアを1年半ほどやっています。

今回、Webエンジニアへの転職について、僕自身が知りうる限りの情報と僕自身の転職体験をもとに発信していこうと思います。
僕がWebエンジニアを目指して本格的に行動を始めたのは2021年8月くらいで、転職活動が2022年2月末〜4月までだったと記憶してます。
全体としては、約8ヶ月くらいかかったかと思います。

なぜ、僕がこの記事を書こうと思ったのかという経緯について、少しだけ説明させてください。
僕がWebエンジニア転職を行なっていた時に、プログラミングスクールやメンターサービスなどを利用するお金が無いほど人生のどん底にいました。
そこで、お金をかけずに完全に独学で学習や転職を行なっていましたが、転職成功までに至るまでそれなりに苦労しました。
同じような境遇の方に少しでも力になれたらと思い、今回執筆することにしました。

当時のことを思い出し、できる限り具体的にどのような道を辿ったのかについて書いていきたいと思います。
この記事を最後まで読んでいただければ、どのようなロードマップで学習していき、どれくらいのレベルのポートフォリオを作成し、どのように転職活動を行なっていけば自社開発系企業に転職することができるようになるのかということがお分かりいただけると思います。
また、できる限りお金をかけずに独学で進めていたので、同じような条件でこれからWebエンジニア転職に挑戦する方にとっては有益な情報になるのではないかと思います。

本記事は大きく以下の順番で、体験記的に説明していきます。

・リサーチ
・転職計画
・東京に引っ越す
・プログラミング学習
・ポートフォリオ作成
・転職活動

リサーチ

Webエンジニアになることを決めて、僕が最初に行ったのが「リサーチ」です。
僕が何か新しいことを始めるときは、必ずと言ってもいいほどリサーチから入ります。
正しく情報収集ができていないと、間違った方向に進んでいたり、効率の悪いやり方をしていたりなどありますし、そもそも何から手をつければいいのかすらわからないからです。

プログラミング学習方法

僕は、Youtubeやネット記事などから情報収集を行なっていました。
Youtubeだとyujiさんやマナブさんやケンタさんなど、非常に有益な情報を発信している方がたくさんいらっしゃり、とても参考になりました。

そして、プログラミング学習において、以下が王道の学習ロードマップだと知りました。

1. コンピュータサイエンス基礎
2. Progate HTML/CSSコース 2周
3. Progate PHPコース 2周
4. Progate JavaScriptコース 2周
5. Progate Git,コマンドラインコース 1周
6. 書籍やUdemyでデモアプリ開発
7. ポートフォリオ作成
8. 転職活動

既に転職を成功している方や再現率の高さが立証されている学習方法があるのであれば、それをそのままやるだけで成功確率は高いはずです。
そう考え、僕はこれをそのまま踏襲することに決めました。

業界調査

次にYoutubeやネット記事などで業界調査を行なっていきました。
一口にIT業界と言っても、その中にはSIer系・Web系・組み込み系など複数の分野が入っていることや、それぞれの分野の性質などもこの段階で初めて知りました。

また、Webサイト制作とWebアプリ開発では分野が全く違うもので、どちらに行きたいかをあらかじめ決めておかなければならないということも、ここで初めて知りました。
僕の場合はより単価が高く、参入障壁が高いWebアプリ開発の分野に進みたいと考え、Webアプリ開発を選択しました。

求人

次に、実際の求人を求人サイトから調査していました。
調査の際には、以下の点を中心に見ていました。

・企業が具体的にどのような人を求めているのか
・どのプログラミング言語が多いか
・どれくらいの技術レベルが求められているのか
・未経験でも採用している企業がどれくらいの数あるのか
・どの地域の企業が多いか

この時に、未経験者を積極的に採用しようとしている企業はあまりいい企業ではないという情報をYoutubeやネット記事から得ていたので、基本的には経験者の採用を行なっている企業について見ていました。

この調査の結果、以下のようなことがわかりました。

・基本的に経験年数2〜3年以上が求められている
・JavaとPHPの求人件数が非常に多い
・具体的なプログラミング言語や設計能力が求められている
・少ないが、経験年数が浅い人を募集している企業もある
・Web系の企業は東京都に一極集中している

僕の中では、この求人情報から得た情報は非常に価値が高かったです。
そして、これらの調査をもとに、簡易的な計画を立てていきました。

転職計画

次に、大雑把な計画を立てました。
「大雑把に」というのがポイントで、大学受験期の経験から、計画を細かく立てすぎても挫折する可能性が高く、かえって逆効果になりやすいということがわかっていました。
そこで、大枠を決めるだけの大雑把な転職計画を立てました。

僕が決めたのは次の4つです。

・転職は1年以内に決める
・東京に引っ越す
・プログラミング言語はPHPを選択
・ポートフォリオはある程度完成したらすぐに転職活動を始める

まずは、今の仕事をダラダラと続けていても仕方がないので、転職は1年以内に決めようと決心しました。

また、転職活動の主戦場とするのは東京一択です。
これは、東京で転職活動した方が圧倒的に有利になるというのは、求人の調査から明らかだったためです。
そのため、当時名古屋に住んでいた僕は、東京に引っ越すことに決めました。

また、プログラミング言語はPHPを選択しました。
理由は、Web系企業の求人件数が圧倒的に多かったことと、初学者からだと最も企業に入りやすい言語がPHPだという情報も入手していたからです。

これは僕の考えですが、他のPythonやRubyなどの言語を学習したかったとしても、まずは開発者としてどこかの企業に転職するということの方が優先度としては圧倒的に高いはずです。
また、他の言語を学習したかったとしても、転職してから学習すれば良いだけだと思います。
なので、Webエンジニアに転職希望の未経験者が一番最初にやらなければならないのは、「最も転職成功確率の高い選択肢を選択していくこと」だと僕は思います。

また、ポートフォリオは多少細かいところの実装が入っていなかったとしても、ある程度完成したらすぐに転職活動を始めようと決めました。
これは、実際にポートフォリオを企業に提出しても細かい点までは見られないことがほとんどだということが事前調査でわかっていたためです。
ポートフォリオというのは、あくまである程度の技術力とやる気の証明です。

東京に引っ越す

計画立案まで固めたところで、東京に引っ越しをする準備を始めました。
東京に引っ越すことは自分の中では確定していたので、ここは迷いがなかったです。
僕の場合は、訳あって本業を先に辞めてきてしまっていたので、お金がなかったですが、時間だけはたくさんありました。

まずは、東京の物件探しや仕事などを決めていきました。
とにかくお金がなかったため、不動産仲介業者さんとのやり取りや物件の下見などのために、東京まで全て夜行バスを使って行き来していました。
こうして、無事に引っ越しを完了させることができました。

重要なのが仕事ですが、これから勉強時間を確保していかなくてはならないので、定時で帰れる仕事に絞って選びました。
とにかくどこかしらで働かなくてはならなかったので、半分アルバイトのような仕事でしたが、約8ヶ月程その職場で働くことになりました。
幸いなことに、当時勤めていた職場には集中できる休憩スペースのような場所が開放されており、そこで勉強してから帰宅するというのが日課になっていきました。

プログラミング学習

コンピュータサイエンス基礎とHTML/CSS

ここまでで、事前調査と計画立案で土台は固まっていたので、ここでいよいよプログラミングの本格的な学習に進んでいきました。

まず、書店で「キタミ式イラスト塾　基本情報技術者」を購入し、コンピュータサイエンスの基礎を学習しつつ、同時並行でProgateに課金し、HTML/CSSコースを進めていきました。

Progateは噂に聞いていた通りで、非常に素晴らしいサービスでした。
ゲーム感覚でプログラミングを学習することができ、また、僕にとっては新しい体験ばかりで非常に新鮮で刺激的でした。
まるで初めてゲームを買ってもらった子どものように、僕はプログラミング学習にのめり込んでいきました。

Progateには、道場コースというのもあり、今まで講師のような人がずっと教えてくれてたのに、突然一人でやってみろと言われます。
正直、道場コースで何度も挫折しかけました。
今思えば、最初の1周目で道場コースまでやる必要はなかったと思います。
これから取り組む人は、1周目は道場コースを飛ばしても大丈夫です。
その代わり、最終的には必ず道場コースまで終わらせたほうが良いです。

「キタミ式イラスト塾　基本情報技術者」の書籍もイラストがふんだんに使われており、わかりやすかったです。特に未経験者がコンピュータサイエンスの基礎を固めるにはうってつけの書籍だと思います。

ただし、書籍を読み進めていくスタイルになるので、当然眠たくなります。
そこで、「キタミ式イラスト塾　基本情報技術者」を読み進めて、眠たくなってきたらProgateを進める、というように交互にローテーションを組んで学習を進めていました。

そして、1ヶ月後くらいにProgate HTML/CSSコース2周、「キタミ式イラスト塾　基本情報技術者」を2周読了しました。
この段階で、コンピュータサイエンスとHTML/CSSの地盤はある程度固まりました。
ここで、僕はHTML/CSSを確実なものにするために、「模写コーディング」に入っていきます。

模写コーディング

僕が最初にやったことは、模写コーディング用に作られた本当に簡単なデモサイトを作ってみました。
模写コーディング用の簡単なサイトは世の中に出ており、ググればたくさん出てくると思います。

その後に、模写コーディングの公開OKで有名な「iSara」や、確かデイトラで模写コーディング用のデザインカンプが公開されており、そのサイトの模写コーディングなどを行なっていたかと思います。
また、模写コーディング用素材だけではなく、Airbnbの公式サイトやペプシの公式サイトなど、あらゆる題材を模写コーディングしてました。
模写コーディングの数で言うと、おそらく20〜30サイトくらいかと思います。

もちろん、こんな数を模写する必要はないと思います。
ただし、僕はこれだけ実践を重ねたことで、HTML/CSSでほとんどのサイトを作れるようになっていました。

模写コーディングのポイントとして、「いきなり難しいサイトを模写しようとしない」というのが挙げられます。
これをすると、確実に挫折します。
僕も何度も挫折しかけました。
学習には必ず段階があります。
最初は、簡単すぎるくらいでちょうどいいです。
そこから段階を踏んで、難しいサイトに挑戦していきましょう。

僕はこの段階で、学習開始から2ヶ月程度費やしていたかと思います。

JavaScript

次に、Web系では必須ともいうべき言語である「JavaScript」の基礎について勉強していきました。
僕はバックエンドエンジニアを目指していたので、JavaScriptはそこまで深くは勉強していなかったですが、それなりに扱えるように基礎的な部分は学習していきました。

まずは、やはりProgateです。
ProgateのJavaScriptコースを2周ほどしました。
次に、YoutubeなどでJavaScriptで簡単なゲームを作ったりすることで、理解を深めていきました。
ある程度扱えるようになった自信がついたところで、次のステップにいきました。

PHP

次に、メイン言語として使う予定のPHPの学習に入っていきます。

ここも、最初に取り組んだのはProgateです。
ProgateにはPHPの学習コースも用意されているので、PHPの学習コースを2周程度しました。

これである程度PHPの基礎が学習できましたが、確実なものにするためにデモアプリの開発を行いました。
MAMP環境でデモアプリの環境構築を行い、PHPを使って簡単なECサイトを作りました。
特に環境構築でつまづきましたが、MAMPを使えばそれなりに簡単に環境構築できることと、つまづいたところをググることによって何とか解決していきました。

また、PHPの方も、実際にアプリを作るとなると分からなくてつまづくことも非常に多かったです。
その都度、Progateに戻ってみたり、ひたすらググって解決しようとしたりなど苦労して作っていました。
ただこの過程で、エンジニアとして一番重要な「ググって課題解決していく力」がとても身についたと思います。

ある程度PHPでアプリが作れるようになった後にフレームワークである「Laravel」の学習に入っていきます。

Laravel

Ruby on Railsでは、「Railsチュートリアル」という有名な学習サイトがあったりするのですが、Laravelにはありませんでした。
そこで、僕は書籍とYoutubeで学習することにしました。

まずは基本書として有名な「PHPフレームワーク　Laravel入門」という書籍を購入し学習しました。
通称「青本」とも呼ばれている有名な書籍です。
次に、Youtubeで具体的なアプリ制作を解説している動画を視聴しつつ、自分でも作っていくことでLaravelの理解を深めていきました。

ここまでで、Laravelの基本的な書き方や扱い方は理解できていたかと思います。
そして、Laravelを使って具体的なデモアプリ制作に入りました。
一番最初に作ったアプリはメモアプリだったかと思います。
ここでも、最初は絶対に高度なアプリを制作しようとしないことが重要だと思います。
簡単なアプリ制作から始めていき、徐々にレベル上げていくのが正しい取り組み方です。
ソースコードは基本的にGitで管理し、Githubに上げておくことで、制作してきたアプリが自分のポートフォリオになるようにしていました。

あまり正確ではないですが、アプリ制作の数は全体で5〜10くらいだったと思います。

Git、Linuxコマンド

ポートフォリオ制作に入る前に、チーム開発する現場ではGitが必須になることを知っていたので、GitやLinuxコマンドを学習していました。
ポートフォリオのソースコードをGithubにアップロードできるので、一人での開発であってもGitを使用してポートフォリオを制作しようと決めていました。

GitやLinuxコマンドの学習量はそこまで多くはないので、サクッと終わらせていたと思います。

この時点で、約4ヶ月程度費やしていたかと思います。

ポートフォリオ制作

ポートフォリオ紹介

転職活動時にポートフォリオとして出していたアプリは以下の2つです。
・書籍要約アプリ
・家計簿アプリ

これ以外にも、模写コーディングしていたサイトの中から、できのいいものを2〜3サイトほどを提出していたかと思います。

どちらも技術構成は同じだったかと思うので、ここでは書籍要約アプリを例にとって説明していきます。
概要としては、ユーザーが読んだ書籍を要約・レビューして、他のユーザーに共有できるという趣旨のアプリです。

機能としては、以下の通りです。

・ログイン/ログアウト
・アカウント登録
・アカウント一覧
・アカウント詳細
・アカウント編集
・レビュー作成
・レビュー一覧
・レビュー詳細
・レビュー編集
・レビュー評価（星5段階）
・コメント追加
・コメント編集
・コメント削除
・ブックマーク追加
・ブックマーク削除
・画像アップロード
・フォーム生成
・ページネーション

アプリの技術構成は以下の通りです。

フロントエンド言語: HTML/CSS/JavaScript
バックエンド言語: PHP
フレームワーク: Laravel、Bootstrap
開発環境: MAMP
本番環境: heroku
ソースコード管理: Git,Github

GithubのURLです。
https://github.com/tarao96/BookStack2

特に変わったところはなく、非常にシンプルで、普通といえば普通のアプリですね。
強いて言えば、書籍の要約ポイントのフォームをJavaScriptで生成できるようになっている点ですかね。
今振り返ると、これでよく転職できたものだと思います。

当時は本番環境にherokuというサービスを利用していましたが、現在はサービスが終了しており、URLが公開できないのは申し訳ないです。

僕はここまでで約6〜7ヶ月程度費やしていたかと思います。

ポートフォリオ制作の進め方

まず、非常に重要な点として、機能数が少なくてもアプリがしっかりと機能しているというのが重要かと思います。

具体的には、ユーザーインターフェースが使いやすくてきれい、記事の閲覧や作成などに不具合がない、ページ遷移にも問題がないなどです。
当たり前のことではありますが、機能数は多いがバグだらけのアプリよりも、機能数はそこまで多くないがしっかりと作り込まれているアプリの方が評価が高いです。
なぜかというと、実際の開発現場ではアプリケーション全体を担当するということはまずなく、与えられた担当範囲をバグなく確実に実装できる方が良いからです。

実際にはポートフォリオはそこまで詳細には見られないですが、ページを開いたらいきなりデザインが崩れているや、ページ遷移したら開けないページがあるなど、致命的な何かがあるとその時点で見る気がなくなってしまいます。

また、バックエンドエンジニア志望であっても、ユーザーインターフェースにはこだわった方が得だと思います。
開いてパッと見た印象で、優れたデザインやきれいなインターフェースだと評価が高くなりやすいので、使いやすくてきれいなインターフェースにはこだわりましょう。

また、場合によってはソースコードを見られることもあるので、なぜそのライブラリを使ったのかや、なぜこのような組み方をしているのかなどは自分の言葉で説明できるようにしておいた方が良いかと思います。

ポートフォリオ制作の過程では、実装方法がわからないや、エラーが直せないなど数多くの壁にぶつかることになるかと思います。
基本的にはひたすらググって解決しながら、知識をつけていくしかなく、僕自身も非常に苦労しました。
そこで、本格的なポートフォリオ制作に入る前に「デバッグ方法の知識」を身につけることを強くお勧めします。

デバッグを行うことで、具体的にどの行でエラーが発生しているのかや、エラー原因は何かなどを特定することができます。
この技術をいち早く身につけておくと、あとが楽になります。
具体的なデバッグ方法の解説はここではしないですが、ググればたくさんの方法が紹介されているかと思いますので、学習しておきましょう。

転職活動

戦績

ポートフォリオが2つできた段階で、いよいよ転職活動に挑みます。
一番最初に、僕の戦績を載せてしまいます。

応募数: 15〜20社程度
書類選考通過: 8〜10社程度
1次面接通過: 3〜4社程度
内定: 2社
転職活動期間はおよそ1ヶ月程度です。

ただし、第一希望の企業から一番最初に内定を頂いたので、それ以降は選考自体を止めていました。
なので、実際にはもう少し応募しているはずですし、面接はほぼ通過していたので、書類選考は通過したが面接に進んでいない企業も何社かありました。

求人媒体

当時、僕が利用していた転職サービスは以下です。

・マイナビ転職
・リクナビ転職
・Green
・ワークポート
・Wantedly

中でも、「Green」と「ワークポート」を中心に使っていました。
マイナビやリクナビなどは大手ですが、IT転職に特化したサービスではなく、かつ掲載や採用に結構なお金がかかるらしいです。
そのため、小規模の企業はそもそも掲載できなかったりするという情報を入手していたので、求人情報をチェックするくらいで、積極的に使ってはいなかったです。
また、Wantedlyも有名ですが、あまりに未経験者が殺到するため、利用を控えている企業などもあると聞いていました。
そこで、主戦場としては、企業にとって経費がそこまでかからない「Green」、そしてIT特化かつエージェント経由で企業を紹介&手続きしてくれる「ワークポート」を中心に利用することにしていました。
ちなみに、今僕が勤めている企業はGreen経由で入社しています。

また、実際に応募する企業について、「未経験者大歓迎！」みたいなところは意識的に避けていました。
基本的に企業側には未経験者を採用するメリットがないはずです。
それでも採用しようとしているということは、開発以外の仕事を押し付けようとしているか、本当に人手が足りなくて困っているかのどちらかだと考えたからです。
どちらにしても、入社するメリットはないと判断し、避けるようにしていました。

なので、狙い目としては、経験者を採用したいが経験が浅くてもOKという企業です。
経験が浅くてもOKという企業は数としてはそこまで多くないですが、確実に存在してます。
実際には未経験なので実務経験は浅いどころかないのですが、それでも今まで学習してきた成果などをアピールして積極的に応募していけば採用を獲得することは十分に可能です。

また、未経験者は基本的に立場が下だと考えた方が良いです。
なので、実際に内定をいただいた今の会社には、面接時に「入ってから色々なプロジェクトがあるがどこに入りたいか？」という質問を受けたときに、「開発ができるのであれば、どこでも入りたいです！」と答えたのを覚えています。
これくらいの姿勢で臨んだ方が良いかと思います。

書類選考

ここで、転職活動時のエントリーシートや職務経歴書の書き方で意識していた点を書いておこうと思います。
以下の点に注意して書いていました。

・自己紹介欄などアピールできる項目は原則として制限文字数まで全て埋める
・ポートフォリオサイトURLやGithubのURLなどは必ず貼る
・志望動機はどの会社にも言えてしまうようなことは書かない（応募した会社だからこそ言えることを書く）

特に、文字数をかけて熱意を伝えるというのは非常に重要だと思います。
企業からの返信率が明らかに違うのと、文字数が少ないとその時点で見込みなしと判断されてしまう可能性が高いです。
また、ポートフォリオ関係のURLがないと、門前払いされてしまう可能性が高いです。必ず貼るようにした方がいいかと思います。

また、Webエンジニアになりたいと思う理由はあらかじめ自分の中で整理しておいた方が良いです。
具体的にどんなきっかけがあってWebエンジニアへの転職を目指したのか、どのような考えや思いがあって前職を辞めたのかなどをストーリーで語れるようになれるのがベストです。
この時に、できる限り前向きな理由を語れるようになれると良いのと、ただ出来事を時系列でつないでいくのではなく、出来事とその時の自分の感情をセットで語っていくようにするのが良いです。

あとは、これらの媒体から企業情報収集→志望動機など作成→応募を繰り返し行うだけです。

面接

面接時によく聞かれる質問というのは、ある程度相場が決まっています。
自分の場合に多かった質問は以下です。

・ポートフォリオで技術的に工夫した点
・前職を辞めた理由
・会社に入ってからやりたいこと
・どういった技術を持っているか
・逆に質問はあるか

もちろんよく聞かれる質問はこれらだけではありません。
大事なのは、これらの質問にただ答えるのではなく、質問の裏側にある意図をしっかりと考えることです。

また、自分はなぜ落とされたのか、書類選考や面接を通過している人はどうやって通過しているのかなど、自分なりの研究を怠らないようにすることが大事です。

僕は結果的に上手く進み、技術的な好奇心や勤勉さなどを高く評価していただき、第一希望の企業に入ることができました。

最後に

完全に未経験からWebエンジニアに転職することは非常に長い道のりで、苦労することも非常に多いかと思います。
僕自身もWebエンジニアに転職するまでに約8ヶ月程かかっています。

最後にこんなこと言うのもあれなのですが、Webエンジニアは好きじゃなきゃやってられない世界なのかもしれません。
ただ、技術や物作りが好きな人にとってはこんな楽園は他にはないのではないかと思います。
僕は現在、現役のWebエンジニアとして、楽しく仕事ができています。
それはプログラミングが好きであり、物作りが好きであり、自分にとって苦ではない世界だからだと思っています。

だからこそ、Webエンジニアという職種が自分にとって本当に最適な職なのかというのは、よくよく考える必要があると思います。
今はWebエンジニアしか見えていないだけで、実は他の分野の才能があるケースも普通にあると思います。
ただ、それでも自分はWebエンジニアになりたいと思うのであれば、挑戦する価値は十分にあると思います。

この記事がこれから挑戦する方の力になれていたらこんなに嬉しいことはありません。
僕はこれからWebエンジニア転職に挑戦される方を全力で応援していきたいです。
転職を成功されることを切に願っております。