初めまして！12月よりウエブルのフロントエンドエンジニア兼サブディレクターとして入社しました中里です。
私は元々翻訳のフリーランスを行なっていて、むしろPC操作は苦手な方でした。
そんな私でも、独学で学習に取り組み、フロントエンドエンジニアとしてウエブルに入社することができました！
以前上田が「完全未経験からフロントエンドエンジニアへ転職するまでの過程」をアップしておりますが、今回は
「まだ何のプログラミングがやりたいかはわからないけど、とりあえずプログラミングをお仕事にしたい！」
という方に向けて、1つの可能性としてのフロントエンドエンジニアという職種としてご紹介していけたらなと思います！
アプローチ方法も勉強方法も様々あるので、上田の記事や私の記事のご自身に合う部分をMIXしていただけたらなと思います。
01.フロントエンドエンジニアとしてウエブルに転職するまでの道のり
フロントエンドエンジニアを目指したきっかけ
実は、最初からフロントエンドエンジニアを目指していたわけではありませんでした。
最初は「プログラミング」というもの自体に興味はあったのですが、プログラミングの種類や言語も色々あり、全部やってみたい気持ちがあって、自分が何をやりたいのかが明確にはなっていませんでした。
色々な言語を少しだけ勉強してみて、それぞれの言語が何をするためにあるのかを調べた結果、オシャレなウェブサイトを作りたい！と気持ちが固まり、フロントエンドエンジニアを目指そうと決めました。
フロントエンドエンジニアを目指すためにやったこと
基礎学習
まずは知識をつけるために基礎学習を始めました。私が行った学習は大きく分けると以下の4つです。
- IT関係の基礎知識の学習
- HTML、CSS、Bootstrapの学習
- Javascript(jQuery)の学習
- PHPの基礎学習
一つずつ解説していきます！
✔️IT関係の基礎知識の学習
何せPC自体が苦手で、むしろ機械音痴よりだったので、まずはIT関連の基礎知識を知りたかったので、ITパスポートの勉強をして、資格を取りました。（基本情報技術者資格の簡単版のようなものです）
正直、資格自体はあってもなくても一緒かなと思いますが、勉強をしたことは実務でもとても役に立っていると思います！
特に、サーバー関連でしたり、プロトコル関連はしっかり勉強しておくといいかなと思います。
私が勉強に使用した教材はこちらです。
イラストが多く、わかりにくいIT系の知識も、わかりやすい言葉とイラストで説明してくれるので、理論だけでなく、イメージで理解することができます。
✔️HTML、CSS、Bootstrapの学習
私はとにかく「やりきること」を目標にしていたので、挫折しにくく、楽しめそうな教材を選びました。
そこで私が使用した教材は以下です。
私のおすすめの順番が、Progate → ドットインストール です。
好みにもよりますが、私の感覚では、ドットインストールは少し勉強をしたレベルの知識がある前提で動画が進んでいくことが多い印象なので、一旦基礎を付けてから、復習も兼ねて取り組むのがいいかと思います。
最初はProgateもドットインストールも無料で使用していましたが、有料の方が今後も使える学習内容が豊富なので、有料会員になりました。
HTMLとCSSを一通り学習した後は、Webサイトの模写コーディングに挑戦しました。
実際のWebサイトを見ながらコーディングを行う模写から始めましたが、実務ではデザインカンプからコーディングをするので、デザインカンプを見ながらのコーディングがおすすめです。
デザインカンプからの模写コーディングを行う際に、「デザインの余白の確認方法」や「画像の書き出し方法」など、カンプの使用方法も一緒に勉強しておくと、実務で役に立つと思います。
私の場合、模写では「レスポンシブデザインを考えた骨組み(HTML)の作成」で苦戦しました。なので、模写コーディングをする際には以下のことに注意しながらやってみていただけるといいかなと思います。
- PCファースト、スマホファーストのどちらでも対応できるようにする
- 骨組み(HTML)をしっかり考える
会社によって、PCファーストかスマホファーストかは変わるので、どちらでも対応できるように練習しておくといいかと思います。また、私は余りしっかり考えずにHTMLをいきなり組み始めて、何度も手戻りをしたことがあるので、最初はノートなどを使って大まかな骨組みを考えて、慣れたら頭の中で組み立てるのがいいと思います。
模写を完成させた後は、CSSで記述したものをBootstrapというフレームワークで書き直してみました。
実務では自分で1からコードを書くこともありますが、既にあるものを修正することも多々あるので、ただのCSSだけではなく、「あ、これはBootstrapを使っているな」とわかるだけで全然違います。
私はBootstrapの学習の際には特に教材は使わず、全てやりたいことをネットで検索しました。例えば、display: flex をBootstrapで実装したい場合は、「flex bootstrap」で検索して実際にやってみるなどです。
✔️Javascript(jQuery)の学習
JavascriptとjQueryの学習については、基礎をある程度学習したら、実際に実務でよく使われそうなものの実装方法や仕組みを学習するのがおすすめです。
私は以下の教材を使用しました。
Progate→基礎、ドットインストール→実際に実務でよく使われそうなもの を学習しました。
ドットインストールで勉強したものは「ハンバーガーメニュー」や「モーダルウィンドウ」「タブメニュー」などです。
jQuery自体の勉強や、JavaScriptの勉強もいいのですが、ライブラリを使えるようになっておくととても便利です。
私がよく使うのは、slickやswiperなどのスライドのライブラリです。大体のものが、ダウンロードやCDNを利用してライブラリを読み込み、コードをコピペすれば動きますが、たまに思った通りに上手くいかない時や、カスタマイズしたい時もあるので、そういった場合に対応できるよう、ライブラリにも触れておくといいのではと思います。
✔️PHPの基礎学習
PHPとWordPressも勉強をしておくととても役に立つと思います。
私はWordPressにとても苦戦しました、、。未だに何度も調べ直しては日々学習です。何度も調べることもとっても良い勉強になってます！（笑）
学習する際に活用した主な教材は以下のとおりです。
- Progate(PHP)
- Udemy(ちゃんと学ぶ、PHP + MySQL(MariaDB) 入門講座)
Progateは今までの紹介で、もう言うまでもないですね！Udemyですが、講座を買いました。普段は凄く高いのですが、よくブラックフライデーなどでセールをやっていて、90%OFFなどをやっているので、そこが狙い目です！(笑)
WordPressは残念なことに、いきなり実務で勉強期間がほとんどなかったため、説明を割愛させていただきます、、
✔️余裕があったらGitにも少し触れておくのもおすすめです。
ここは会社によりけりですが、進捗の管理でGitを使用することもあります。「Gitって何？」「どうやって使うの？」そのくらいアバウトでもいいので、頭の片隅に入れておくのもおすすめです。
転職に向けた情報収集
何よりも未経験業種への就職活動になるので、私が考えた方法は以下の2通りでした。
- 未経験可の自社開発 or 受託制作会社を目指す
- 未経験可のSES企業を目指し、スキルアップを目指す
大きく分けると、①自社開発、②受託開発、③SESの3つになるのかなと思っていますが、まず最初にどこを目指すのかがとても重要だったなと今になって思います。
私は結果的に、自分のスキルに自信が無く、SES企業に就職しました。
ですが、あくまで個人的意見ですが、最初から自社開発 or 受託制作会社に入社すればよかったな、、と思いました。
こういった後悔の無いように、この記事を読んでいただいている皆さんには、それぞれの会社の特徴をよく調べてから、自分に合ったところを選んでもらえたらと思います！
いざ、転職活動開始です
実務経験なしでアピールできる材料は、「ポートフォリオ」「意欲」だと思います。特にポートフォリオは、自分がどんな勉強をどれだけやって、どれだけのスキルを付けられて、どれだけのものを作れるのかのとても良い指標になります！まずは楽しみながら、自分のポートフォリオサイトを作ってみるのはいかがでしょうか？
それと、もちろん意欲もとても大切です。何社か経験させていただきましたが、受け身ではダメなんだと何度も思い知りました。日進月歩の業界なので、きっと一生勉強は必要ですし、わからない部分をわからないままにしてはいけないんだと知りました。そうやって勉強を続け、意欲を見せ続けた結果、ウエブルに入社することができました！！これから転職を考えてる方はよければ参考にして下さい！
02.ウエブルに転職して感じたこと
もともと私がプログラミングというお仕事に興味を持ったきっかけは、「場所に囚われず、自由に働きたい」という思いからでした。
ウエブルに転職できてから現在、私は私情でカンボジアに住んでいますが、それでもウエブルの皆さんのおかげでとても素敵な環境で勤務することができています！
まだまだ未熟者の私なので、これからもエンジニアとして技術を高め続け、お客様にご満足いただけるものをたくさん作れるように日々成長していきます。
また、新しい技術もどんどん取り入れて、自分のできることを増やしていきたいです。
皆さんも、自分のやりたいことを目指して、全力で努力を続ければ、必ず叶うはずです。
この記事がこれから未経験のことに挑戦する皆さんの勇気に少しでも繋がれば嬉しいです！
