初めまして！6月よりウエブルのフロントエンドエンジニアとして入社しました上田です。
私は元々公務員でして、今の職種とは全く違う分野で働いていました。
しかし、昨年から独学でWeb制作の学習に取り組み、フロントエンドエンジニアとしてウエブルに入社することができました。
2021年6月第2週目のウエブル週報は、完全未経験からフロントエンドエンジニアとしてウエブルに転職するまでの過程をお届けします。
「Web制作の学習ってどうやって進めていけばいいんだろう…」
「未経験だけどできるようになるのかなぁ」
「未経験からエンジニアへ転職した人はどうやって学習していたのかな」
本記事はこういった疑問を解決します！
01.完全未経験からウエブルにエンジニアとして転職するまでの学習過程
基礎学習編【2020年11月〜2021年4月】
✔️基礎学習を３つのステップに分けると下記のとおり。
- HTML、CSS、Bootstrapを学習して模写に挑戦
- Javascript(jQuery)を学習して模写したサイトに動きを付けてみる
- PHPの基礎学習に取り組んだ後、模写サイトをWordPress化（WordPressオリジナルテーマ作成）
一つずつ解説していきます。
HTML、CSS、Bootstrapを学習して模写に挑戦
✔️HTML、CSSを学習する際に活用した主な教材は以下のとおり。
HTML、CSSはご存知の方も多いと思いますが、Progateとドットインストールから始めました。
好みにもよりますが、どちらから取り組もうか迷ったらProgateがおすすめです。
理由は単純で、ゲーム感覚で取り組めるので学習の継続につながると思います。
もちろん他の教材に手を出すのもありだと思いますが、まずは無料で取り組めるところから始めるのがおすすめです。
私は有料の教材にもいくつか手を出しましたが、結論、無料も有料も教材によって優劣はそれほどないと感じました。
有料の教材も、基礎的な内容に関してはネット上に載っていることが大半なので、とにかくわからなければ調べていくことが大切かなと。
HTMLとCSSを一通り学習した後は、さっそくWebサイトの模写に挑戦しました。
コーディングの練習におすすめのサイトはこちら
私は模写から始めましたが、実務ではデザインカンプからコーディングをするので、こちらの方がいいかなと。
初級、中級、上級と段階的に学習でき、コーディングの解説付きです。
私の場合、基礎学習と違い模写は苦戦しまくりでした。
いざ、挑戦→手が動かないという状態。
そのため、Youtubeなどの動画を見ながら、同じように手を動かしてみることから始めていきました。
動画のとおり手を動かすだけでも徐々に慣れていきました。
初めはこちらの動画通りに写経するだけでも身についていくかなと思います。
もし、同じように基礎学習をやってもコーディングで手が動かない方は参考にしてみてください。
模写を２つほど完成させた後は、Bootstrapというフレームワークを学習しました。
実務であまり使わないと謳っていることもありますが、覚えれば爆速でカッコいいサイトを制作できるようになります。
学習をしてみたところ、「簡単にきれいなサイトが作れる！楽しい！すごい！」という感じでした。
✔️Bootstrapを学習する際に活用した主な教材は以下のとおり。
Bootstrapの便利な点として、Webサイトを12分割してコーディングする「グリッドシステム」があります。
「グリッドシステム」以外にも色々と便利な機能がありますが、たくさんありすぎるので、まずは「グリッドシステム」の概念だけ理解しようという意気込みでいいかと思います。
Bootstrapが使われているサイトで、有名どころだとAirbnbですね。
私もBootstrapを使用して模写しました。
学習の参考になればと思います。
Javascript(jQuery)を学習して模写したサイトに動きを付けてみる
✔️使用した教材は下記のとおり。
やはり学習の取り掛かりやすさはProgateがダントツですね。
Progateを一通り取り組んだ後は、たにぐちまことさんのjQuery入門を見ながら、模写したサイトに実装してみました。
こちらも、動画のとおりに手を動かして実装してみました。
ただjQueryは概念的な部分をさらっと学習すればオッケーかなと思います。
というのも、実際にWebサイトに動きをつける際は、ネット上にあがっているソースをコピペすることが大半な気がします。
（むしろ始めの学習以外は全部コピペor改変してるだけかも…）
もちろん、深く学ぶことも大切ですし、0から自分でコードを書いて実装できることは強みになると思いますが、ハマりすぎて次に進めないと本末転倒かなと思います。
車輪の再発明は良くないともいいますし…
※あくまで個人的な見解です。
PHPの基礎学習に取り組んだ後、模写サイトをWordPress化
PHPとWordPressにはとても苦戦しました。
むしろ未だに自信を持って取り組めません（笑）
しかし、学習に終わりがないのも事実です。
これまでの学習より難易度は上がるかと思いますが、調べればなんとか実装できるはず。
最初はかなり苦戦すると思いますが、根気強く続けていけば必ずできるようになるので、めげずに頑張りましょう。
✔️学習する際に活用した主な教材は以下のとおり。
他にも書籍を購入したりしましたが、主にこれらをメインに活用しました。
こちらも一通り学習をしたら、模写サイトをWordPress化してみました。
これまでの学習を振り返ると、インプット→アウトプットが効率よくできたのかなと思います。
基礎学習→手を動かす（模写したサイトで実装してみる）
を繰り返すことで徐々にできるようになっていきました。
✔️ここまで取り組んでみたらご自身のポートフォリオサイトを自作してみるのもおすすめです。
これまでの学習の総括として、楽しみつつコードを書いてみてください。
自分なりのサイトを作成してみると、一つ達成感もあるかなと思います。
作成できたら、ぜひネットに公開してみてください。
Webサイトの作成からネット上への公開まで、一通りの手順に取り組むことができるのでおすすめです。
私もポートフォリオサイトを自作してネットに公開まで取り掛かりました。
自作したポートフォリオサイトが後々、ウエブルに入社する足掛かりになるとは思いませんでした。（笑）
転職活動編【2021年4月〜2021年6月】
長くなりそうなので簡潔にまとめます。
私ごとですが、2021年の3月末に公務員を退職し、転職活動に取り組み始めました。
実務経験なし、スキル不足も否めませんでしたが、「Web制作に本気で取り組みたい」「環境を変えてスキルアップしたい」という気持ちから転職を決意しました。
結果的に、内定を数社からいただくことができ、ウエブルに入社することができました。
また、ウエブル入社にあたって、評価されたポイントは
- ポートフォリオサイトでのソースの品質
- 自ら情報を取りに行き、スキルを身につける主体的な行動力
- 成果に対してベクトルを同じくできる姿勢
だとお聞きしました。これから転職を考えてる方はよければ参考にして下さい！
コードに初めて触れてから半年ちょっと、人生激変しました。
本記事が、これからWeb制作に取り組みたい方、エンジニアへの転職を考えている方へ参考になったら幸いです。
02.所感
一通り学習に取り組み、理想の環境に飛び込むことはできましたが、まだスタートラインに立ったばかり。
これからはエンジニアとしてのプロ意識を忘れず、お客様に対して価値提供できるよう成長していきます。
また、スキルを高めるための努力も怠らず、継続して取り組んでいく所存です。
