見出し画像

未経験からフロントエンドエンジニアへの道のり

ふぉい

1週間ぶりの投稿です( ＾∀＾)
これからは最低でも週1ペースで投稿したいと思ってます！
ぜひ気楽に読んでいただけますと幸いです🙌

今回は、これからフロントエンドエンジニア（以下、FE）になりたいと思っている方に向けて記事を書きたいと思います！
私が未経験からフロントエンドエンニアになった経緯や学習方法について綴っていきたいと思います。
主観的な考えも幾らか入っていると思うので、100%全員にとって有益！という訳では無いですが、一意見として読み進めてみてください👍
「そこは違うよ！！」なんてことがあったらコメントで教えてください🙏

フロントエンドエンジニアを目指した経緯🚀

私がFEを目指した詳しい経緯は自己紹介の記事に書いているので、ご興味ある方は見てみてください✍️
かなり大雑把に書きますと・・・

ユーザに目で見て刺激や心揺さぶるモノを作りたい！！

これに尽きる訳です。
もちろん、そんな理由なら動画クリエーターやデザイナー等、
他にも手段はたくさんあったのですが、やはりそこがITエンジニア・・・。
コードを書かない上流工程のSEでしたが、コードを学習することや書くことにアレルギーは一切ありませんでした。むしろ、コードが書けるエンジニアになりたい！というのがFEを目指したきっかけでした。

ただし、当時から今も変わらず「モダンで動きがめちゃくちゃあるサイトが作りたい！！」とか「めちゃんこカワイイサイトが作りたい！！」などの拘りは全く無いです・・・。

単純にユーザの要望に沿ったサイトが作れれば満足！！

という、すごい脳筋な考え方で・・・
もしかしたら、FEの中でもレアな考え方かもしれません（笑）
だけど、そんな理由でも良いと思っていて、大切なのは・・・

自分がどんなエンジニアになりたいか？

これに尽きると思っています！！
自分の周囲にも色々な考え方を持ったエンジニアがいます。
👉デザインに拘りがあり自分の思い通りのサイトが作りたい人
👉お客様の要望にとにかく応えいくことが好きな人
👉とにかく色んな技術に触れたい人！
私自身はデザインのセンスは皆無であるため、どちらかというとお客様の要望に沿ったサイトを作りたい派です。
お客様の要望に応えていくうちに自然と技術も向上していくので、忙しくて苦しい時もありますが、常にスキルが向上している感じがします🔥

長くなってしまいましたが、
これからFEを目指す方も様々な自分のなりたい自分像があると思うので、
その像に合った職場や環境に身を置くことが大切だと思います👍👍

フロントエンドエンジニアの仕事内容💻

この記事を読んでいらっしゃる方は、ある程度FEについて調べている方が多いと思いますが、改めて私なりの解釈と私の経験を元に説明していきます！
大きく分けると・・・
①WEBサイト制作
②WEBアプリ開発
この２つに分類されると思います。
私自身は①WEBサイト制作をしております🐶
①と②について説明していきます。

WEBサイト制作

企業のホームページやECサイトなどの見た目を作るお仕事。
主にHTML、CSS、JavaScript、PHPをベースにして見た目を作っていきます。WordPressなどのCMSを同時に構築して、ユーザ自身がコンテンツを自由に作れるようなシステムの構築も行うケースが多いです。
基本的にはディレクターやデザイナーが要件の定義まで完了させているケースがあるので、FEは如何に要件を忠実に再現していくかが肝（やりがい！！）になってきます。

WEBアプリ開発

こちらは自分自身経験がないので、詳しい説明は割愛させていただきます🙇
世の中にあるWEBアプリの例としては「Youtube」、「Twitter」、「Instagram」、「Gmail」などです。
WEBサイトと異なるのは、WEBサイトはサイト運営者が見せたい情報だけを静的に表示しており、WEBアプリはサイト運営者⇆ユーザの双方向で動的なコンテンツを表示できること、かなと思っています🤔（違ってたらスミマセン）

上記の説明だけでも、同じFEにおいてもだいぶ異なる分野があるんだな〜と思っていただけたのではないでしょうか？
将来的に「サイト制作、アプリ開発どちらを仕事にしていきたいか」は学習開始以前に決めておいた方が良いと思います🤓（両者は学習する言語がかなり異なってくるので・・・）

未経験からFE（WEBサイト制作者）になるための学習方法📚

私自身は上述の通りWEBサイトを主に制作しているので、
どのようにしてサイト制作のFEになれたのか！！を書いていきますので、
ぜひ参考にしてみてください！
以下に具体的なスクール名やサブスク制のサービスを書いていますが、案件や広告ではないので安心してみてくださいm(_ _)m

私なりのロードマップ🗺️

※以下に記述する「学習期間」は会社員の方を基準にしているので、職業や年齢によっても前後はするので、ご了承ください🙆‍♂️

  1. Progate（https://prog-8.com/）で、基本的なHTML、CSS、JavaScriptを学習する。学習期間：1ヶ月

  2. ドットインストール（https://dotinstall.com/）にてProgateで学んだ内容をより難易度高くして特訓する！！学習期間：0.5ヶ月

  3. ここまででTOPページ含めて1〜3枚程度の静的なWEBサイトを作れるようになっています！そのため、自分の実力を測るためにも一度簡単な架空サイトを作成してみるのも良いと思います😊
    とは言っても、デザインセンスないし・・・という方が多いと思うので（私自身そうです！）、デザインカンプ（≒WEBサイトのデザインのこと）を無料で配布してくれているサイトを以下にまとめましたので、ぜひ１からコーディングしてみてください！！学習期間：1ヶ月

    ・PENGINブログさん
    👉こちらは、私も活用させていただきました！
    1ページあたりのボリュームもそこそこあるので、かなり実践的なテクニックが身に付きます！！
    デザインカンプのみならず解説動画まであり、答え合わせまでできちゃいます💯

    ・Codejumpさん
    👉こちらも活用させていただきました！1カラムサイト、2カラムサイト、ECサイト用・・・など様々なジャンルのサイト制作が体験できます✍️

  4. デイトラにてより網羅的で実践的な学習をすることをおすすめします！
    オススメと書いていますが、デイトラに入るか否かでだいぶ他の駆け出しエンジニアとスタートダッシュに差がつきます。学習期間：1ヶ月
    オススメする理由を上げると・・・
    👉サイト制作を1〜100まで体系的に説明、実践させてくれる。
    👉CMS（WordPress）を実践レベルで細かく丁寧に学習できる。
    👉Slackにていつでも質問ができる環境がある💯
    デイトラがあったから今の私がいる・・・というくらい転職する直前まではとてもお世話になりました🤓（何度も言いますが、宣伝でも案件でもありません！（笑））
    サブスクではなく買い切りのため正直・・・高いです。
    ただ、その他のスクールより圧倒的に安いです。
    恐らくですが、講師がカリキュラムを1から作って卒業までサポート・・・という最近ありがちなスクール🙅ではないので、安くできているのかなと思います。

    とにかく自走！！わからなければチャットで質問！！

    というスタンスのため、安いのかなと思います。
    一見、普通のスクールと変わらないんじゃ？と思いますよね。
    他のスクールとの差は初めから教科書が全て閲覧できどこから始めてもOK🙆‍♂️わからなければチャットでいつでも質問OK👍
    ただし・・・ここがデイトラの最強に良いポイントなのですが・・・
    質問の仕方が悪いと講師の方に指導される・・・・という何とも厳しい環境なのです！だけど、よくよく考えると実務で質問の仕方を工夫しないと先輩社員にも伝わらないですよね？そういった質問の工夫がスクール内で学習できるので、何から何まで教えてくれるスクールよりよっぽど僕は良いと思います。質問を工夫して解決・・・一見、他力本願に見えますが立派に自走できていると思います🤓
    デイトラの最終課題でサイト1本作成したらいよいよポートフォリオ作成に移りましょう！！！

  5. ここまで来たらようやく、ポートフォリオ作成！！学習期間：1.5ヶ月
    デイトラの最終課題はポートフォリオとしても使えるので、も〜+1本くらいは最低でもサイトを丸々１本作っておきましょう！！
    ここで注意していただきたいのが、WordPressで作成しましょう🔨
    せっかくデイトラでWordPressについて学んだのですから、ポートフォリオにぜひ組み込みましょう！！実務で静的サイトを作る割合はLPを除きほとんどない（体感的には10本に1本くらい）ので、WordPressを組み込んでいると自信を持ってアピールできます💯

  6. 最後に・・・ここまでできれば自分にかなりの自信がついています🔥🔥
    しかしこの時の実力って・・・

    マジで大したことないです！！！

    少し厳しい感じがしますが、制作会社にいると本当に実感します。
    大したことはないですが、制作会社でスタートが出来るレベル感ではあるので、その点は安心してください😁
    つまり何が言いたいかというと・・・

    いきなるフリーランスになってはいけない！！！

    よく「3ヶ月学習してフリーランス！」なんてキャッチフレーズを耳にしますが、95%くらいの方は厳しいので実務未経験でフリーランスはやめましょう。まずは制作会社などでバリバリに経験を積んで、フリーランスになりたければなる！で良いと思います😁
    正社員になることで、同僚からアドバイスや刺激をたくさんもらえます。
    あまり大きな声では言えませんが・・・同僚全員が無料のメンター（小声）という感じです。正社員になれさえすれば、その後の成長は急速に加速します💯

まとめ📝

ここまで読んでくださった方、本当にありがとうございます！！
ロードマップに関してはオリジナル要素がかなり強くステップ数も多いですが、着実に基礎を積み上げる&それなりのスピード感で学習を進めていく！というのがとても大切です🙆‍♂️

正直、実務経験を積めば1年ほどで1人前にはなるので、

学習を完遂することをゴールにせず、
エンジニアになることを常に意識して🔥

学習に取り組んでみてください！！

それでは( ＾∀＾)

この記事が気に入ったらサポートをしてみませんか？