WEB系エンジニアを目指す入門者から初心者へのロードマップ

0.この記事の対象者と目的

この記事はWEBのエンジニアが何してるの？とか、プログラミングって何？というレベル感の人に読んで欲しいです
本記事の目的はWEBデザイナー・WEBコーダー・WEBエンジニアなどの言葉で混乱している人の頭の中を整理することと、入門者が初心者になるためのスタートラインを明確にすることの2つです

1.マークアップ言語とGit、2つのJavascriptライブラリ

まずはHTML/CSSを学習しますが、勉強方法は書籍やYoutubeなどの動画教材、Progateやドットインストールなどの学習サービスなど何でも良いです
作ったものを表示するとか意図したものを作って表示するということを覚えます
ここで重要なのは基本的な原則やデザインの仕組みを覚えることです
細かいプロパティの使い方や様々な種類のタグの仕組みなどはあまり覚えなくても良いです
マークアップ言語による制作作業は「コーディング作業」などと呼ばれます
HTML/CSSでのコーディング作業はプログラミング言語を使用していないので狭義的な意味だとプログラミングではありません

ただしgitの使い方は必ず覚えてください
gitの難しいことを覚える必要はありませんが、学習するにしてもお仕事するにしても必須レベルで使いますので基本操作や仕組みは覚えてください

学習をしていくとたくさんの教材でJavaScriptのライブラリとしてjQueryとBootstrapという2つが登場します
これらは使い方を学んでおけば良くて細かい設定値などは覚えなくても良いです
厳密に言うとこのライブラリを使うことでJavaScriptという言語でのプログラミングができないこともありませんが、ここで入門者の学習体力を消費するデメリットの方が大きいので導入方法と使い方だけさくっと学びましょう
この2つのライブラリを使うとどういうことができるのか？を10個くらい知ってればそれで良いです

WEBデザイナー、WEBコーダーと呼ばれるジョブのメインの仕事はこちらです
CSSアートやjQueryの素敵な使い方などを研究していくことも道の1つですし、デザインテンプレートを作るのも需要があります
WEBサイトやLPページのビジュアルについて専門的な道を進みたいという方々とはここから道が分かれます
WEBデザイナーやコーダーを目指したいという人たちはUIデザインについて学習を深めてください
WEBのエンジニアに進みたいという方は次項に進んでください

2.WEBの知識とUnix系サーバー操作の知識

WEBサーバーが無ければ自分が作ったWEBサイトをインターネットの世界で公開することはできない

この言葉の意味がわからない人は調べて勉強しましょう
昨今は便利なWEBサービスが出てきて、WEBサーバーがなくても自分が作ったコンテンツ＝サイトを公開できるような時代になりました
便利なものを使うことは全くもって否定しませんが、一方で自分がやっていることがなぜ動作するのかという知識が無ければ、WEBのエンジニアとして仕事していくことは困難です
厳しいようですがこの部分の知識について何も身に付けないままプログラミング言語の学習をしたとしても、作ったものを動かすことすら難しくなるため必須知識として身に付けてください

WEBの世界ではWindows系のサーバーが使われることが少なく過半数はUnix系OSのサーバーが使われています
Unix系のサーバーを操作する際はマウスカーソルでクリックするのではなく、Commandと呼ばれるテキスト入力によるサーバー操作を行いますので、このCommand操作の知識は覚えてください（画像は参考イメージです）
WEBエンジニアになるのであれば必須ですので、プログラミング言語の学習に入るのと同時期で良いのでWEB知識とサーバー操作は必ず覚えてください

3.プログラミング言語と開発環境の構築

学習するべき言語は何でも良いですが、あえてオススメするとしたら開発環境を構築することが楽なPHPです
WEBサービスなどを利用してプログラミングの学習をしている場合は環境構築を行うことがほとんどないかもしれませんが、プログラミングをする上で開発環境を作ることは非常に重要な知識です
流行りの言語でも良いのですが知識レベルが低いうちに複数要素を同時に勉強することはお勧めできません
プログラミングが書けるようになることを学習目標においた場合、できる限り開発環境は簡単でわかりやすい方が効率が良いと考えています
たっぷり時間がある人はプログラミングをC言語から学ぶルートでいくと様々なことで使える知識と技術が身につきますが、WEBの世界ではC言語はあまり使用しません（あくまで初心者向けの話です）

【動的型付け言語】JavaScript、PHP、Ruby、Pythonなど
【静的型付け言語】C、C++、C#、Java、Scala、Kotlin、Go、Swiftなど

開発環境についてはDockerやVagrantなどの仮想環境を使うと便利なのですが初心者のうちは覚えなくて良いです
PHPであればMAMPやXAMPPというソフトを使って出来る環境で十分です
とにかくソースコードを書きまくれる環境を手に入れて書きましょう
最初は1つの機能を持つサンプルアプリを沢山作り、その後に複数の機能を持つアプリに学習をシフトさせていきます
電卓アプリなどが学習としては良いと思います

プログラミングの学習で必ず覚えて欲しいことがデバッグ方法です
言語や環境によってデバッグの方法は異なりますが、エラーを見て修正したり、自分がやりたいことが出来ているかの確認で必ず使用します
言語の中の特殊な関数よりもデバッグ方法を知っている方が圧倒的に価値が高いです

4.データの知識と取扱方法

アプリは正式名称がアプリケーションシステムという名前です
システムというのは原則としてデータ管理のために存在します
どんなに素晴らしいUIを作ったとしても、データが管理できないシステムというものは存在しませんし、WEBの世界ではデーターベースというものを使ってデータの管理をしています
このデータベースからデータを取得するSQL文を覚えましょう
加えてデータ設計の方法、アプリケーション内で呼び出して使用するプログラミングを覚えると尚良いですし、システム間のデータの受け渡しを念頭に入れて一気にRestAPIまで覚えてしまいましょう
またここで各設計書のドキュメンテーションを覚えられると飛躍的に初心者としての価値は高くなります
掲示板、TODOタスク、勤怠管理のアプリケーション開発などが学習としては良いと思います

【データ周りの知識例】
・データベース（RDBMS、NoSQLなど）
・データ問合せ（SQL/CRUDなど）
・データ設計（エンティティ抽出、共通化、正規化、ER図など）
・データ取扱（RestAPI、プログラムソース内でのORM処理など）

5.まとめ

本記事の１から４まで身に付けるとWEBエンジニアの入り口に立つことができ、エンジニアとしての道がスタートすると考えていただいて問題ありません
WEBエンジニアを目指し勉強されている各位は、本記事で紹介したものは目標項目ではなく全て必須項目として考えてください
これらの知識を身に付けてポートフォリオを作成して面接行けば採用される確率はアップすると思います
未経験、新卒でIT企業に入社されてる人たちも1年〜2年くらいの時間を使って習得している内容です

6.【番外編その１】学習と作業の違い

インプット主体の学習と、アウトプット主体の作業は行動目的が違います
入門者や初心者にありがちなのが学習と作業を同じように取り組むことです
双方は似ていますがそれぞれゴールが違いますので混同して取り組むことはあまり効果的ではありません
学習している最中にモチベが下がる要因の1つでもあります
WEBエンジニアへの道のりは学習する範囲が広く深いので、はっきりと行動の役割を分けて効率よく学習しましょう

学習はインプットが主体になりますので、時間あたりの情報量取得をKPIに設定します
本を読むなら読む、動画を見るなら見ることに集中してメモを取ることなどでインプット速度を落とさないようにしましょう
本は何度でも開くことができますし、動画も再学習が可能なアイテムです
専門的な情報は1度で覚えることが難しいものなので繰り返し学習することができるようにしましょう
今まで触れてこなかったことを試験を受けるかのように記憶するのはナンセンスです
情報量を増やすのではなく、情報に接続できる量を増やしましょう

作業はアウトプットが主体になりますが、ゴールの設定が曖昧なまま着手している人はたくさんいます
自分が手を動かすことで何をしようとしているのか？ということを明確にしてから作業に取り掛かるようにしましょう
ゴールが曖昧なうちに作業に取り掛かっても、途中でわからないことやつまづくことも多く、かえって時間がかかることが多々あります
これは我々のように仕事でエンジニアリングに従事している人間でも同様です
加えてアウトプットをするための速度も計測しましょう
タイピングスピードが遅い人は速度が上がるように練習しましょう
始めは遅くても練習すれば誰でも身に付けられる代表的な技術の1つです
手を動かしているとやった気分になれるので学習や作業の前に肩鳴らしとして練習することをオススメします

7.【番外編その２】師匠やメンターの確保

技術はトレンドの移り変わりが激しいため、何が良いのかを見極めてから学習することや、学習のロードマップを作ることは入門者が着手しても難しいものとなります
過去に経験した違う分野の学習体験などからロードマップを作れる方も稀にいらっしゃいますが、可能性が低いことに挑戦しても効果を得るのは難しいため他人の力を頼りましょう

スクールはカリキュラムというロードマップが存在し、講師の方が技術的な面で師匠やメンターとなってくれます
問題点は費用とカリキュラムと講師陣の質です
サロンは仲間と同じような出会えるという特徴がありますが、参加者は原則的に自分のことをやらないといけないですし、他人の面倒を見るにしても一度に見れる範囲は定まってしまいます
問題点は同じような仲間が集まるので自分のレベルが向上しにくいことです

自分のレベルを引き揚げてくれる人とドンドン繋がりましょう
良い師匠やメンターは無理難題を出してくれ、自分の挑戦する機能を育ててくれます
学校に通うことで仕事がレベルアップするなら私は生涯学生でいます
慰め合いで技術が向上するなら私は一生他人のお世話をします
知らないことを知る、出来ないことが出来るようになるから成長するのです