Webエンジニアになるまでの学習ロードマップをまとめてみた!

こんにちは!Webエンジニアのたけです!

最近、ネット上で副業・フリーランス・プログラミングだったりを多く見るようになってきましたね!僕自身も企業に依存しないスキルを身に付けたいと思いエンジニアの勉強を始めたという経緯があります。(その他にも理由はありましたが)

僕の場合は、独学で本やネットの情報をベースにプログラミングの学習を始めたのですが色々回り道をしたなぁ・・と思うことが多々ありました。困った顔で働く会社員のイラスト(男性)

そこで、今回はプログラミングド素人の私立文系大学生だった僕が実際にWebエンジニアになるまでに学習した内容をロードマップにして順次詳しく紹介していこうと思いまとめてみました!

大きく分けると7つの行程があると考えております。

〜Webエンジニアになるための7つの行程〜

  1. コーダーのスキルを身につける(HTML/CSS)
  2. JavaScript(jQuery)で動きのあるページを作ることができる
  3. PHP(Ruby)で動的なページを作ることができるようになる
  4. SQLを使ってデータを扱うページを動かすことができるようになる
  5. JavaScriptのフレームワークを扱えるようになる(React.js, Vue.js等)
  6. 通信周りを抑える(Ajax, XHR (非同期通信)) APIを扱うアプリの作成など
  7. サーバーサイドの言語を覚えAPIを実装してみる

これらの行程をこの記事ではザックリと説明させていただき、各パートを個別の記事で更新していきたいと思います!

1. コーダーのスキルを身につける(HTML/CSS)

ウェブデザイン, デザイン, Web, ウェブサイト, テンプレート, レイアウト, 技術, 開発, メディア

タイトル通りコーダーとしてのスキルを身につけます。Webページがどのような構成になって出来ているかを理解するためです。これが分かっていないと先には進めません。(進んでも結局は戻ってくる)なので、しっかりと基本を押さえましょう!

目標としては自分のポートフォリオのページを作ることを目標とするといいと思います!(コーダーの仕事の営業をする時にも役立ちます)

個別記事はこちら!

コーダーのスキルを身につけよう!(HTML編)

コーダーのスキルを身につけよう!(CSS編)

2.JavaScript(jQuery)で動きのあるページを作ることができる

ジャバスクリプト, Js, ロゴ, ソース コード, プログラミング, 開発

HTML+CSSで静的なページを作ることができるようになったら、次は動きのあるページを作ってみましょう!

写真をスライドさせるスライダーの実装やTODOアプリを作ることを目標にするといいと思います!

JavaScriptの教材を購入し手を動かしながら覚えるといいと思います。僕が使用した教材も個別記事にて紹介しますね。ここをクリアするといよいよプログラミングの入り口に入ります!

3.PHP(Ruby)で動的なページを作ることができるようになる

Elephpant, Php, コンピューティング, 開発者, 象, Io, リアルタイム, アプリ

いよいよWebアプリっぽくなってきましたね!

ここでは目標を2ちゃんねるのような掲示板の作成またはTODOアプリの実装を目標にしたらいいと思います。サーバーサイドの言語なのでついにデータの送受信を行えるようになります!自分の投稿した内容が記憶され、その内容がページに反映されるといったことが可能になります!

4.SQLを使ってデータを扱うページを動かすことができるようになる

データベース検索, データベース検索アイコン, 統計データ検索サイト, クエリ, データベース

ここさえクリアすればもう個人でWebアプリを作れるようになります!

前の章では一時的にデータを保存するといった手法でしたが、SQLに保存すると永続的にデータが保存できるようになり本格的なアプリが作れるようになります!例えばユーザーのデータを保存して操作できるようになればログインの機能を実装できたり、退会するといった機能を実装できるようになったりとできることの幅が大きく広がります!

SQLは単純に見えて奥が深いので興味のある方は深く学んでみるといいかもしれません。個別の記事ではMySQLを利用したデータベースの操作を取り扱います。

5.JavaScriptのフレームワークを扱えるようになる(React.js, Vue.js等)

「react.js」の画像検索結果

いよいよ、フロントエンドエンジニアとして需要の高い分野に入ってきました!

正直この章は鬼門です。学習コストが高いですが身につければエンジニアとしての市場価値は非常に高くなります!実際僕も普段はReact.jsでの制作の案件を多く受けています!Web制作をされる方ならMVCという概念を学ぶのですが、React.jsではViewの管理が非常に優れています。コンポーネントを用いることで構造的にアプリを作ることができるので集団開発に適しています。

覚えることや理解しなければならないことはとても多いですが、将来性があるので是非挑戦してみてください!この章の個別記事ではではReact.jsについて触れます。

6.通信周りを抑える(Ajax, XHR (非同期通信)) APIを扱うアプリの作成などが作れるようになる

ネットワーク, サーバー, システム, インフラストラクチャ, 管理サービス

ここの章もつまずきやすいポイントです。実際にアプリを制作していく上で通信は不可欠となるのですが、非同期通信の手法を身につけることでサーバーの負荷を減らしたり、ユーザビリティの高いアプリの作成が可能になります。実際にAPIサーバーにアクセスをしてアプリの実装をしてみましょう!

ここまで出来ていればフロントエンドのことはほとんどできるようになっています!この章では、React.jsでAPIを利用したアプリの作成を行います!

7.サーバーサイドの言語を覚えAPIを実装してみる

Node.js on light background

いよいよ最終章です。前回までは既存のAPIを利用してアプリを構築しましたが、今回は自分でバックエンドの処理を実装します。

ここまでできるようになれば基本的なアプリはほとんど作ることが可能です!もはや発想次第です!

この章では、Node.jsのExpressというフレームワークを用いてAPIの実装を行います!


いかがでしたか?

今回は自分が素人の状態から独学でWebエンジニアとして仕事をするまでに経た学習の経路をざっくりとまとめてみました!

エンジニアの学習をする上で一番効率がいいのは基本を軽く抑えてとにかく何かを制作してみることです。

次回以降は、各章をより細かく記事にしてまとめていきます!次回はコーダーのスキルを身につける編です!お楽しみに〜👋

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です