未経験からフロントエンドエンジニアになるまでの個人的ロードマップ

未経験からフロントエンドエンジニアになるまでの個人的ロードマップ

未経験の自分がエンジニアとして働くためには

どんな学習が必要で、どこまで学習しておくべきか。

悩んでないですか?

効率よく学習したかった僕は悩んでました。

今回は、未経験からフロントエンドエンジニアに

なるまでに歩んできた僕の個人的ロードマップを

ご紹介します。

僕は現在、フロントエンドエンジニアとして

Web制作会社に勤務する

業界2年目のペラッペラのWebエンジニアです。

未経験から独学でWeb制作会社へ就職しました。

この記事のテーマ

・未経験時に独学で行った学習手順を解説

・独学で最低限必要なこと

(やってて良かったこと)がわかる

未経験時に行った学習手順

タイトル画像

就職までの学習期間は3ヶ月間でした。

その後Web制作会社へ就職しました。

※3ヶ月間でエンジニアになれるということでは

ありません。

では、僕が実際に行った学習手順です。

1. Progate

はい、王道ですね。

そうなんです。大して特別な学習方法してないです。

まず、ProgateでHTMLとCSSを一通り学習しました。

ノートにガツガツとメモりながら進めました。

結論として、メモする必要はないかなと

個人的には思いました。

理由は、たいしてメモでは身につかなかったからです。

とりあえず一周学習しましたが

ここでの理解度はかなり低かったです。

なんとなく、うす〜く雰囲気を感じられたら

次に進んでOKだと思います。

2. ドットインストール

動画で学習できる便利サイトです!

Progateの次はここでHTMLとCSSを学習しました。

細かく動画が用意されているので

ある程度理解できるまで

ひとつの項目を何度も見てました。

ひとつポイントとして

動画の内容のこと以外で悩みたくなかったので

自分が使うエディタは動画で使用しているエディタと

同じものを使うようにしました。

(たしかAtomエディタだったかな?)

エディタは使っていればそのうち慣れるので

最初はこだわらなくていいと思います。

(いまはVisual Studio Code使ってます。

無料で使い勝手はかなり良いので最高。)

動画でやっていることを実際に自分も

エディタを使いながら実践していました。

動画と同じことをしているはずなのに

自分の方では違う…なんてこともよくありましたが。(汗

3. 模写

雰囲気はなんとなくわかってきた。という段階に

なったところでWebサイトを見ながら

自分で模写をしてみました。

模写したサイトをひとつご紹介します。

・PAS-POL https://pas-pol.jp/

このサイトを選んだ理由は、

このサイトが初心者にはちょうどいいレベルと

どこかの記事でみたからです。笑

たしかにちょうどいいレベルだと思いました。

でもこれを作り終わるまでに1週間以上かかりました…。

4. 模写完成前に、

再びProgateとドットインストール

先程紹介したサイトの

・PAS-POL https://pas-pol.jp/

トップにスライダーがあり、

JavaScriptを使う必要があったので

Progateに帰ってきました。

ここでもとりあえず一周しました。

(※ちなみに最終的にはProgate有料プランに

2~3ヶ月程入っていました。

入社後もPHPの学習などで活用してました。)

ドットインストールは、視聴しながら

繰り返し練習してました。

学習時間的には、

Progate3割・ドットインストール7割

くらいのイメージです。

HTML/CSSと違って、JavaScriptは

なかなか理解できず、やりたいことが出来るまでに

かなり学習時間がかかりました。

100%理解することはかなりハードルが高く

そもそも100%理解しなくても

Webエンジニアとしては成り立つので

まずは無理せず、

「いま必要な知識を学ぶ

が大事です。

結果的にいちばん自分のスキルアップに

繋がった学習法は

「模写」

でした。

HTML/CSSに関しては、ドットインストール等で

ある程度学習したら、

模写にフルコミットで良いと思います。

とにかく色々なレイアウトのデザインを経験しておくと

実務で手応えを感じられると思います。

JavaScriptに関しては、

・必要なタイミングでググりながらやってみる

が結局は実務でのやり方なので

根詰めずボチボチやっていくくらいで良いと思います。笑

その他にやってみたこと

・フロントエンド学習のオンラインサロン

・勉強会への参加

オンラインサロンは、

¥5,000/月くらいだったはずです。

2ヶ月くらい利用してたんですが、

あまりサロン生同士が

アクティブではなかったことと、

サロン内のサービスを

ほとんど活用できない状態だったので

サクッと辞めてしまいました。

勉強会は、「Webエンジニアが集う」

という理由だけで参加していました。

実際に仕事にして生活している方々の生の声を

聞けるチャンスだったということと

「繋がりを増やして仕事もらいたい。」という

下心バリバリの理由です。

それぞれやってみた結論としては、

オンラインサロンは、自分にあったサロンが見つかれば

モチベーション維持にも繋がり良いかなと思います。

独学だとどうしても詰まったときに

聞くことができないので

オンラインサロンだと不明点を質問できる安心感は

ハンパないですね。ただオンラインサロンに入る前に

できることもたくさんあるなと思いました。

すべてはタイミングが大事なんですね。

勉強になります。

勉強会は、リアル・オンラインどちらも

たくさんあるのでいちど参加してみることを

オススメします。

勉強会自体の内容は理解できなくても

自分の行こうとしている業界には

どういう人たちがいて、どんな日常を送っているのか

みたいなスキル以外のことを知れる場所でもあるので

参加してみるといいと思います。

まとめ

未経験からの学習は

・模写がスキルアップには最適!

・まずどんな業界なのか知ってみるのもいいかも

(勉強会参加してみたりしてね!)

その他にも職業訓練校という選択肢もあると思います。

実際に職業訓練校の卒業生は優秀な人が多いです。

あれ、なんか最後に大事なこと言っている気がする。笑

質問があれば、コメント・お問い合わせいただければ

お答えします!

それでは!