ITコラム

column_main25849

スキルアップ

2020.09.13

【未経験・初心者向け】Webエンジニアになりたい人のための勉強ロードマップ

「Webエンジニアになりたいけれど、学習・勉強の進め方が分からない」「HTML・CSSなど基礎学習を終えた後、何を学べばいいのか分からない」という方は少なくありません。
今回は主にプログラミング未経験者の方に向け、フロントエンドエンジニア・バックエンドエンジニアに必要なスキルセットを紹介。Webエンジニアになるための有効な勉強方法を5ステップで解説します。
記事の後半では、脱初心者を目指す人向けの身につけるべきおすすめスキルも紹介します。

最終更新日:2020年11月2日

目次

1. Webエンジニアとは
 1-1. フロントエンドエンジニアに必要なスキルセット
  1-1-1. HTML/CSS/JavaScript
  1-1-2. jQuery
  1-1-3. Vue.js/React.js
  1-1-4. Git
 1-2. バックエンドエンジニアに必要なスキルセット
  1-2-1. サーバーサイド向け言語(Ruby/PHPなど)
  1-2-2. データベース
  1-2-3. Webアプリケーション向けフレームワーク
  1-2-4. Git
2. Webエンジニアになるための有効な勉強方法 5STEP
 2-1. 【前提】天才と呼ばれるには、1万時間の学習が必要
 2-2. 【前提】得意になるには、1000時間の学習が必要
 2-3. 【STEP1】どんなエンジニアを目指すのかを決める
 2-4. 【STEP2】HTML/CSS/JavaScriptを学習する
 2-5. 【STEP3】サーバーサイドの言語を1つ習得する
 2-6. 【STEP4】クローンアプリを開発する
 2-7. 【STEP5】オリジナルアプリを開発する
3. 【脱初心者】Webエンジニア志望者が覚えておきたいスキル
 3-1. UNIXのコマンド操作
 3-2. セキュリティ
 3-3. リーダブルコード
4. おすすめ書籍/学習サイト
 4-1. ドットインストール
 4-2. Progate
 4-3. 世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書
5. よくある質問
 5-1. 文系・未経験からでもWebエンジニアになることはできる?
 5-2. 最初に選ぶサーバーサイドの言語は何がおすすめ?
 5-3. Webエンジニアになるにはプログラミングスクールに行くべき?
6. まとめ

1. Webエンジニアとは


Webエンジニアの仕事はWebサイトやWebアプリケーションの設計・開発・運用・保守などを主に行うことです。

例えば食べログも「Ruby」という言語で作成されたWebアプリケーションの1つです。

Webサイトやアプリ制作に関わるエンジニアは、基本的に「フロントエンドエンジニア」と「バックエンドエンジニア」に分けられます。

「フロントエンジニア」は、サイトやアプリのユーザーから見える部分のコーティングなどを行います。一方、「バックエンドエンジニア」は、一般ユーザーから見えないデータベースやサーバーと関わる部分のコーディングを担っています。

▲目次へ戻る

1-1. フロントエンドエンジニアに必要なスキルセット

まずはフロントエンドエンジニアに必要なスキルセットを見ていきましょう。「スキルセット」と少しむずかしい言葉ですが「できること」と簡単に考えていただければ問題ありません。

▲目次へ戻る

1-1-1. HTML/CSS/JavaScript


HTMLはWebページに表示される内容(文字・画像・リスト・リンクなど)を定義する言語です。

最新バージョンはHTML5。ページの骨組みを形作る役割があります。

CSSはHTMLで作られたページの骨組みに対して、装飾(幅・高さ・色などの指定)を行う役割があります。最新バージョンはCSS3です。

HTML/CSSはともにマークアップ言語でありプログラミング言語とは区別されています。条件分岐などは存在せず、視覚表現や文章構造を指定するための言語に当たります。

JavaScriptはブラウザを操作することができるプログラミング言語で、HTML/CSSでできたWebサイトに動きをつけることが可能です。

▸参考記事:HTML入門を果たすために知るべき、たった3つの重要ポイント

▲目次へ戻る

1-1-2. jQuery


jQueryは、JavaScirptの書き方を簡単にすることができるライブラリ。2006年にリリースされました。

ライブラリとはよく使われる機能やプログラミングの部品をひとまとめにして扱いやすくしたもののこと。JavaScirptはブラウザごとに対応可能なメソッドが微妙に異なりますが、jQueryはブラウザごとの差異を吸収するため、ほとんどブラウザの差異を気にせずにプログラミングできるのが特徴。

その他DOM操作が簡単になるなどのメリットがあり、JavaScriptライブラリのデファクトスタンダードとして開発現場で使用されています。

▸参考記事:jQuery【 入門 】短い記述で命令を実現

▲目次へ戻る

1-1-3. Vue.js/React.js


近年採用例が増えてきた例として、Vue.jsとReact.jsがあります。

Vue.jsはPHPも高速でコンポーネント化による管理がしやすいなどの特徴があります。事例としては  noteやrettyなどでフロントエンド開発に利用されています。

参照元:noteのフロントエンドをNuxt.jsへ刷新します
参照元:Webサービスを支えるユーザログ基盤開発@Retty

対してReact.jsはjQueryを使わなくていいのでシンプルなプログラムになり、サクサク動く。などのメリットがあります。

利用された事例としてはクラウド会計ソフトのfreeeやクラウドソーシングのランサーズなどで使われています。

参照元:「React」を導入している3社 − ランサーズ・Mozilla・freee − による実践勉強会!

▲目次へ戻る

1-1-4. Git


Gitとはファイルのバージョン管理を簡単に行うことができるツールのことです。例えばあなたのスマホを最新のバージョンにアップデートした場合、古いバージョンに戻すことはできませんが、こういった古いバージョンをGitで管理することで編集履歴をさかのぼって修正することなどが可能になります。

▸参考記事:GitHub 入門 ~アカウントを作成する方法~

▲目次へ戻る

1-2. バックエンドエンジニアに必要なスキルセット

次はバックエンドエンジニアに必要なスキルセットを見てみましょう。フロントエンドエンジニアと比べてどう違うのかも注意深く読んでいただけると理解が深まると思いますよ。

▲目次へ戻る

1-2-1. サーバーサイド向け言語(Ruby/PHPなど)


バックエンドを作る際のサーバーサイド向け言語は、HTML/CSS/JavaScriptなどフロント向け言語と異なりユーザーからどの様に動いているか見ることができません。

主にWebサイトやアプリケーションの裏側の処理を担当する言語になります。

例えばRubyは日本最大のグルメサイトの食べログ。PHPは世界最大級のSNS、Facebookで使われています。

▲目次へ戻る

1-2-2. データベース

データベースでは主にSQLというデータベース言語を使い以下の物を操作します。

  • データの検索
  • データの追加
  • データの更新
  • データの削除
  • テーブルの作成
  • テーブルの削除
  • テーブルの主キーの設定
  • ユーザー権限の付与

 
データベース言語(SQL)がデータを挿入、検索したりする際に使われるのに対しプログラミング言語は与えらたデータに対してどのように反応、命令するかを記述していきます。

▲目次へ戻る

1-2-3. Webアプリケーション向けフレームワーク


その名の通りWebアプリケーションを開発するための枠組み(フレームワーク)のことです。

開発に必要な共通の機能を提供する事で、Webアプリケーション開発の作業効率アップや品質保持とメンテナンス性能をアップさせる事が可能。

RubyならRuby on Rails、PHPならCakePHPLaravelなどが有名で頻繁に使われています。

▸参考記事:Webアプリケーションフレームワークとは?

▲目次へ戻る

1-2-4. Git


フロントエンド開発、バックエンド開発共にGitは重要なバージョン管理ツールとして機能します。

GitはWebエンジニアとして必ず使うものなので、アカウントを作成しておくのがおすすめ。

▸参考記事:GitHub 入門 ~アカウントを作成する方法~

▲目次へ戻る

2. Webエンジニアになるための有効な勉強方法 5STEP


未経験、初心者の人がWebエンジニアになるための勉強方法を5STEPにまとめてみました。この5つを順番どおりに行うことで効率的な学習になるので、飛ばさずに一つ一つ理解していきましょう。

▲目次へ戻る

2-1. 【前提】天才と呼ばれるには、1万時間の学習が必要

イギリス人ジャーアナリストのマルコム・グラッドウェルという方の調査によると「エリート演奏家は20歳までに合計で1万時間の練習を積み重ねた」という結果が出たそうです。

つまり大きな成功を収めるには1万時間もの練習が必要になると言い換えることができるでしょう。

未経験からエンジニアになるための学習を始め、一流と呼ばれるレベルのスキル・技術を身につけるには1万時間の学習が必要ということです。

平日・休日共におおよそ3時間学習を続けた場合、約10年間の歳月が必要になります。

参照元:1万時間の法則とは? 努力を続けるのに本当に必要なこと

▲目次へ戻る

2-2. 【前提】得意になるには、1000時間の学習が必要

1万時間で一流という調査の一方、得意になるには1000時間と提唱する人もいます。それはPhilip Guo氏。

現在Philip Guo氏はカリフォルニア大学サンディエゴ校で認知科学の助教授を務めつつ、コンピュータサイエンスやエンジニアリングも教えています。

彼の提唱する1000時間で得意レベルをもとに計算すると、1日3時間でおよそ1年間かかります。一方で、1日あたりの学習時間を長く確保した上で、なお正しい学習ステップを踏めば時短も可能といわれています。

▲目次へ戻る

2-3. 【STEP1】どんなエンジニアを目指すのかを決める

「エンジニアになろう」と思いたちすぐに学習へ取り組むのも悪くないですが、目標を具体的にしておくことがおすすめです。

例えば

  • プログラミングを学ぶ目的はなにか
  • どのようなサービスを作りたいのか

 
といったポイントを事前に把握して学習プランを立てることで、どんなエンジニアを目指すかが決まり、学ぶべき言語やスキルも決まっていきます。基礎としてHTML/CSS/JavaScript+サーバーサイドの言語1つを覚えるのは基本ですが、ディープラーニングを取り入れたアプリを作りたい人と、おしゃれなランディングページを作りたい人では将来的に身につけるべきスキルが変わってきます。
学んだはいいけど全然やりたいことに使えない。とならないように目指すべき理想像を具体的に考えておくのがいいでしょう。

▲目次へ戻る

2-4. 【STEP2】HTML/CSS/JavaScriptを学習する

まずはHTML/CSS/JavaScriptを勉強することで、スキルが身についていきます。そうすると他社サイトを見たときにサイトの構造を読み解き、実装難易度を見積もることができるようになるでしょう。

またWebアプリとネイティブアプリのメリットをかけ合わせたハイブリッドアプリや、HTML5+JavaScriptでモバイルでも動作する複数OS対応のアプリケーションも作れる目処が立ってきます。

▸参考記事:CSS入門を果たすために知るべき、たった3つの重要ポイント
▸参考記事:HTML入門を果たすために知るべき、たった3つの重要ポイント

▲目次へ戻る

2-5. 【STEP3】サーバーサイドの言語を1つ習得する

昨今、DevOpsが推進されインフラ構築・運用の自動化が急速に進んでいます。

例えばAnsible 、Chefによる構成管理・構築・テスト・運用などのオペレーションが自動化されたり、jenkinsによるビルド自動化など。業務の効率化がIT企業では推進されています。

▸参考記事:よく耳にするDevOpsとは?わかりやすく解説します

▲目次へ戻る

2-6. 【STEP4】クローンアプリを開発する

次にクローンアプリを開発してみましょう。模写とも呼ばれるこの方法は

  • デザイン力の向上
  • キレイなコーディングができるようになる
  • プロのコーディングを真似することができる
  • 実際の仕事と似た流れで開発する

 
などのメリットがあります。

まずひとつ目の模写としておすすめしたいのはFacebookのログインページ。HTMLとCSSのみで実装が可能な上にラジオボタンやプルダウンなどの機能も必要になっています。これができればHTML、CSSのレベルはある程度揃っていると言って良いでしょう。

▲目次へ戻る

2-7. 【STEP5】オリジナルアプリを開発する

【STEP4】のクローンアプリを、HTML/CSS/JavaScript+サーバーサイドの言語1つで開発後、身につけたスキルを活かしてシンプルなもので構わないので1つオリジナルアプリを開発してみましょう。

要件定義の仕方が分からない場合や、アプリケーションのイメージがわかない場合はクローンアプリの機能を一部改変したものでもOK。オリジナルの機能を何かしら付け加えるだけでも非常に大きな経験になるのでOKです。

▲目次へ戻る

3. 【脱初心者】Webエンジニア志望者が覚えておきたいスキル


ここからは脱初心者のスキルです。昨今働く上で大事になっていることも執筆しているので、ゆっくりと理解できるスピードでご覧ください。

▲目次へ戻る

3-1. UNIXのコマンド操作

UNIXとはサーバーに使われるOSの一種です。無料で配布されていた経緯もあり互換OSがたくさん存在しています。

コマンドとしてはhistoryで履歴を出せたり、–helpでコマンドの簡単な説明を表示することが可能です。

▲目次へ戻る

3-2. セキュリティ

セキュリティ対策は昨今非常に重要度がましてきています。利用者の個人情報流出やなりすましされることが多いからです。

対策としては、テスト自動化によってWebアプリの脆弱性を事前に確認したり、採用している言語のバージョンが古い場合はアップデートすることが効果的。その他、WAFの採用なども有効です。

▲目次へ戻る

3-3. リーダブルコード

「リーダブルコード」はより良いコードを書くためのテクニックがまとめられたエンジニア必見の一冊です。

本書によれば

  • 読みづらい
  • どう動いてるのか分からない
  • 見た瞬間うんざりする

 
悪いコードの例としてあげられています。

チーム開発におけるコードは、「読むことができるコード」ではなく「理解しやすいコード」でなければなりません。

名前一つに関してもlaunchやopenなど、より具体性の高い単語を使うことで、名前から得られる情報量を増やすことができます。

この様にチーム開発を念頭にした「誰がみても分かりやすいコード」を書くことによって開発がスムーズに進むため、リーダブルなコードを書くことは重要と言えるのです。

参照元:リーダブルコード|Amazon

▲目次へ戻る

4. おすすめ書籍/学習サイト


実際にプログラミングを学ぶためのおすすめ学習サイト&書籍を紹介します。学習サイトに関してはある程度無料で使えるものを紹介しているので、気になったら使ってみてください。

▲目次へ戻る

4-1. ドットインストール


ドットインストールは3分以内の口講座が5000本を超えている学習サイトです。全て3分以内の動画なのでスキマ時間の学習に役立ちます。

初心者向けの講座は無料ですが、中級者以上の講座を受けるのに月額980円必要です。

おすすめの講座は「はじめてのHTML」。これからWebエンジニアを目指したい。という人にぴったりの動画になっています。

サイトURL http://dotinstall.com/
学べる技術 HTML、CSS、JavaScript、jQuery、PHP、Ruby、Python、Scala、iOS開発(Swift)、Android開発(Java)、MySQL、Bootstrap、WordPress、Unity、Scratch、Excel VBA、SQLiteなど
利用料金 初心者向け講座無料

 
▸参考記事:無料で学べるプログラミングの学習サイト!おすすめ23選【2020年版】

▲目次へ戻る

4-2. Progate


Progateは東大工学部学生が在学中に作成したサイトです。世界100カ国以上、160万人に利用されている実績があります。

各言語基礎レベルの18講座は無料で、月額980円の有料会員プランに登録すると79種類の講座が受講可能になります。

Progateでおすすめの講座は「HTML&CSS講座」です。初級編は約4時間で学べる仕様になっており、1日の休みを使って思いっきり勉強してみる使い方もいいかもしれませんね。

サイトURL https://prog-8.com/
学べる技術 HTML、CSS、JavaScript、jQuery、Ruby、Ruby on Rails、PHP、Java、Python、Swift、Gitなど
利用料金 基礎レベルの18レッスン無料

▲目次へ戻る

4-3. 世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

▸赤間 公太郎/狩野 咲/鈴木 清敬(著)

▸単行本(ソフトカバー):336ページ
▸出版社:技術評論社
▸発売日:2019/3/1

出典:Amazon

こちらの書籍はドットインストール、Progatedeで一通りHTML/CSSを学んだ人が、基礎を固めるための書籍としておすすめです。

実際に簡単なサイトを作りながら順を追って学ぶことが可能な仕様になっており、リストやテーブル、フォームやページ全体のレイアウトなど、実践的なCSSのスタイリングの仕方が学べます。

▲目次へ戻る

5. よくある質問


最後にWebエンジニアについてのよくある質問集です。未経験の人から来る質問をまとめたので、参考記事も読みつつエンジニアについての理解を深めていってください。

5-1. 文系・未経験からでもWebエンジニアになることはできる?

文系・未経験からWebエンジニアになるのはもちろん可能です。

例えばGREE創業者の田中良和さんは、日本大学法学部を卒業した後、会社員をするかたわらでGREEを開発していますし、2chを作ったひろゆきさんも文系の出身です。

▸参考記事:エンジニアの仕事内容、年収、なり方まで全部解説!未経験者必見です
▸参考記事:Webエンジニアの仕事内容とは?未経験でもなることはできる?

▲目次へ戻る

5-2. 最初に選ぶサーバーサイドの言語は何がおすすめ?

最初に選ぶサーバーサイトの言語は、自分が日常的に触っているWebサービスの使用言語を調べ、そのサービスに採用されている言語を学ぶのがおすすめ。

または、自分のなりたいエンジニア像からの逆算もおすすめで、大企業の案件・保守運用などに携わりたいならJava

ディープラーニングなどAIを活かしたアプリを作りたいならPython

ドキュメントが豊富で学習しやすい言語を学びたいならRubyもおすすめ。Rubyは国産言語で開発者が日本人のため、日本語で書かれた正式なドキュメントが多いため、英語に苦手意識がある人にもおすすめです。

▲目次へ戻る

5-3. Webエンジニアになるにはプログラミングスクールに行くべき?

プログラミングは、学習を今すぐ始めることができる一方、挫折率が非常に高い分野でもあります。

そのためプログラミングスクールへ行って学ぶべきと言えるでしょう。スクールでは、独学で学ぶのと異なり、エラーが発生した際にメンターのサポートが得られて即時に問題解決できるほか、他の受講生と切磋琢磨することがモチベーション維持になります。

またクローンアプリやオリジナルアプリの開発サポートもあるスクールなら、ポートフォリオも充実することが可能です。

プログラマカレッジでは完全無料でプログラミング講座を受けることが可能です。3500社の求人を抱え、未経験から就職も可能です。

Webエンジニアになりたい方は、一度お問い合わせください。
→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る

6. まとめ


Webエンジニアの概要から具体的にWebエンジニアになる方法を紹介しました。

自分にもなれそう!と思って頂けましたか?思い立ったが吉。無料で学習を始められるので早速学習をはじめてみてください!

▸参考記事:IT業界未経験でも転職成功!チャレンジ可能な職種と必要なスキルは?

▲目次へ戻る

SHARE

最新記事

無料相談する

INTERNOUS,inc. All rights reserved.