Web系エンジニアとは

WebサイトやWebサービスを制作するエンジニアのこと

Web系エンジニアに必要な知識・技術

Web系エンジニアに必要となる知識・技術は、以下の通り。

HTML・CSSの知識
JavaScriptの知識
JavaScriptライブラリの知識 (React,Vue)
サーバーサイド向けの言語(PHPやRubyなど)の知識
レンタルサーバーの知識
クラウドサービス(AWS・Firebaseなど)の知識
Gitの知識
コミュニケーション能力
発想力・論理的思考能力

フロントエンドからバックエンドまで1人から少数でやることがあるため、
それらを網羅する知識が必要です。
また、クライアントとも直接やりとりする事も多いため、
コミュニケーション能力は必須です。
さらにクライアントのニーズに応える上でも、
柔軟な発想力は必要でしょう。

無課金でWeb系エンジニアになるためのロードマップ

Progateでプログラミング知る (推定学習時間: 50時間)

まずは、プログラミングでどういう事ができるのかと、プログラミングはどうやってやるのかというのをProgateを使って学びます。この段階で面白くないという人は、正直エンジニアになる事をオススメしません。おそらくあなたには別の仕事が合っていると思います。

Progateの活用法としては、

無料で出来る所を全て1周してみる。
全て理解しようとせず、何となく理解していく
同じような書き方をするのも多い事も気がつくと思うので、それはよく使うと思っておく
書き方はいつでも調べれば良いので、書き方はメモ等しなくて良い
1周して全く分からない状態なら、もう1周だけしてみる(3周以上はしなくてOK)

Progate

Twiiterで勉強仲間を作る

Twitterでは、新しくプログラミングを始めた人が大勢います。なので是非その人たちと交流をしましょう。
また、Twitterにはプログラミングの有益な情報を発信している方も多くいます。その人たちは必ずフォローしておきましょう。

Twitterの活用法としては、

勉強した事をツイートする
自分と似たような人との繋がりを5〜10人位は作る
有益な情報を発信している方をフォローしておく → そして毎日チェック

Qiitaで成果報告をする

Qiitaというのは、今あなたが見ているこちらのサイトの事で、エンジニア向けの記事共有プラットフォームです。
このQiitaは、人の記事を読むだけでなく、自分で記事を書くことができます。
なので是非、このQiitaで学んだことをアウトプットしていきましょう。
誰かに読ませるためじゃなくても良いです。自分の備忘録として残しておくだけでも、あの時もこういうエラーあったな、あ、Qiitaに書いたんだってなって自分も助かるかも知れません。
割とその人が持ってるスキルが分かってくるので、ちゃんと書いてあれば自分のポートフォリオとしても企業面接の時に提出しても良いかも知れません。

Qiitaの活用法としては、

プログラミングに関する事で調べる
大変だったエラーの備忘録を残す
自分の持っているスキルの証明として使う

サルワカでWebサイトの作り方を学ぶ (推定学習時間: 50時間)

サルワカは、図解解説で初心者でも絶対に分かるようにプログラミングやデザインに関すること等をまとめてくれているサイトです。今回、特にこのサイトで活用したいのが、Webサイトの作り方を学べるページです。

サルワカの活用法としては、

サルワカの記事を見ながら実際にWebサイトを作っていく
サルワカは永久保存な記事多数なのでブクマしておく

サルワカ
 HTML/CSS入門〜ゼロからのWEB制作 ← こちらをやります

DarkCodeで模写&オリジナルサイトを作る (推定学習時間: 50時間)

DarkCodeは、HTMLやCSSを使って色々なデザインのものをコーディングしていく動画をあげているYouTubeチャンネルです。
デザインは実践でも通用するレベルなので、これを見ながらまずはコーディングしていく事をやっていくとレベルアップしていけると思います。

DarkCodeの活用法としては、

Darkcodeを見ながら、動画通りにコードを書いていく
その中でこのCSSはこういう動きをするのかと理解していく
20動画ぶんくらいコードを書いたら、上手く組み合わせて、オリジナルなサイト(ポートフォリオサイト)を作っていく

DarkCode

しまぶーのIT大学を見て静的サイトを公開する (推定学習時間: 10時間)

しまぶーさんの動画は本当にタメになります。無料でこんなに有益な情報出して良いのかレベルで有難い情報たくさんです。YouTubeのチャンネル登録は必須ですね(^^)
今回は特に、GitHub Pagesを使った静的サイトの公開の動画を使って貰いたいです。

しまぶーのIT大学の活用法としては、

GitHub Pagesで静的サイトを公開出来るようにする(先程のポートフォリオサイトを公開しましょう)
その他の動画も気になるのがあれば全て見てみましょう(全部良いです)

しまぶーのIT大学

コレワカを見ながらWordPressサイトを公開する (推定学習時間: 5時間)

独自ドメインを取得して、エックスサーバーでWordPressサイトを作成するというのをやっていきましょう。

エックスサーバー契約までの手順
 ドメインとサーバーの紐付け
 WordPressのインストール方法

Plusersを見ながらWordPressテーマを作成する (推定学習時間: 20時間)

PlusersのWordPressテーマを自作していく記事が分かりやすいので、これを使って1度WordPressテーマを作っていきましょう。
WordPressテーマは、WordPressで作成されているサイトのデザインや機能等を変える事が出来るもので、このテーマによってWordPressのサイトは成り立っています。
WordPressテーマを自作出来るようになる事でWordPressの6割以上の理解は深まるでしょう。→ 案件取れるレベル (最初のうちは、有料テンプレを導入してそれを少しカスタムして納品というスタンスが良いです)

Plusersの活用法としては、

WordPressテーマを自作する
WordPressテーマのカスタム方法を知っていく
競合は非常に非常に多いですが、案件も取っていけます

初心者必見！自作のWordPressオリジナルテーマを作成する方法を徹底解説

たにぐちまことのともすたチャンネルを見ながらReactを学ぶ (推定学習時間: 30時間)

たにぐちまことさんは書籍の出版やUdemyという動画プラットフォームでいくつも解説動画を出すくらい、知識のある方です。
たにぐちまことさんもYouTubeで色々な動画を出していますが、Reactについての情報をここではピックアップして学びます。

たにぐちまことさんの活用法としては、

Reactの動画を見ながら実際にコードを書いていく
その他の動画も気になるのがあれば全て見てみましょう(全部良いです)

たにぐちまことのともすたチャンネル

基礎から学ぶVue.jsを見ながらVue.jsを学ぶ (推定学習時間: 30時間)

こちらは非常に最初にVueを学ぶには良いです。
Vue自体、日本語のドキュメントが結構あるので良いんですが、特にこのサイトは実践的なコードでVueを学べます。

基礎から学ぶVue.jsの活用法としては、

ページにあるプログラムを自分で作ってみる
VueだけでなくFirebaseの知識もここで少し触れておく

基礎から学ぶVue.js

僕のQiitaを見ながらSEO、webpack、Sassを学ぶ (推定学習時間: 10時間)

僕のQiitaでは過去にSEOとwebpackとSassに関してまとめた記事を公開しているので、それをここでフル活用して頂こうと思います。
書いてあるコードをそのまま咀嚼していけばOKです。

コードで解決するSEO対策
 webpack はじめ方
 SCSS記法チートシート

ランサーズで実績を積む

ランサーズは、クラウドソーシングと呼ばれるもので、仕事を頼みたい人と仕事を受けたい人をマッチングするサービスです。
こちらで自分のできそうな案件(HTML&CSSのコーディング、WordPressサイト構築など)を2,3件やれたら上出来です。実際は競合が多過ぎて、単価を安くしていくしかないので、実績を積む程度に活用します。
ただ、案件が取れなさそうであれば、スキップしてOKです。

ランサーズ

就職して、実務を積む

会社への就職を目指していきます。就活の方法は何でも良いです。Greenなどのエンジニア向け求人サイトでも良いですし、エージェントを使っても良いです。

ここで言っておきたいのが、最初は期待し過ぎない事です。
会社に就職したらエンジニアだし30万くらい貰えるんだろうなとか、メルカリみたいなサービス作れるんだろうなとか、リモートで働くの当たり前なんだろうなとか…

大抵の場合、給料20万くらいだし、最初はコード書かないでテストや仕様書を読み込むだけというのもあるだろうし、9時出社毎日3時間以上残業なんかもザラです。ですが、2年目からは全てが追い風なので、それを期待しながらそのままスキルアップしていきましょう。

エンジニアの良い点としては、技術さえあれば、好きな環境で働く事も選べます。しかしながら、まずは経験、それが何よりも指標となります。
実際の仕事を経験して、仕事で使うスキルと自分が学んできたスキルのギャップもあると思います。
その中で、自分のより良いと思う道に進んでいきましょう。

まとめ

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)