「Webエンジニアになりたいけれど、学習・勉強の進め方が分からない」「HTML・CSSなど基礎学習を終えた後、何を学べばいいのか分からない」という方は少なくありません。
今回は主にプログラミング未経験者の方に向け、フロントエンドエンジニア・バックエンドエンジニアに必要なスキルセットを紹介。Webエンジニアになるための有効な勉強方法を5ステップで解説します。
記事の後半では、脱初心者を目指す人向けの身につけるべきおすすめスキルも紹介します。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
最終更新日：2024年7月25日
目次
Webエンジニアの仕事はWebサイトやWebアプリケーションの設計・開発・運用・保守などを主に行うことです。
例えば食べログも「Ruby」という言語で作成されたWebアプリケーションの1つです。
Webサイトやアプリ制作に関わるエンジニアは、基本的に「フロントエンドエンジニア」と「バックエンドエンジニア」に分けられます。
「フロントエンジニア」は、サイトやアプリのユーザーから見える部分のコーティングなどを行います。一方、「バックエンドエンジニア」は、一般ユーザーから見えないデータベースやサーバーと関わる部分のコーディングを担っています。
まずはフロントエンドエンジニアに必要なスキルセットを見ていきましょう。「スキルセット」と少しむずかしい言葉ですが「できること」と簡単に考えていただければ問題ありません。
▶ 参考：フロントエンドエンジニアフリーランス案件の特徴・単価・必要スキル｜プロエンジニア
HTMLはWebページに表示される内容（文字・画像・リスト・リンクなど）を定義する言語です。
最新バージョンはHTML Living standard。ページの骨組みを形作る役割があります。
CSSはHTMLで作られたページの骨組みに対して、装飾（幅・高さ・色などの指定）を行う役割があります。最新バージョンはCSS3です。
HTML／CSSはともにマークアップ言語でありプログラミング言語とは区別されています。条件分岐などは存在せず、視覚表現や文章構造を指定するための言語に当たります。
JavaScriptはブラウザを操作することができるプログラミング言語で、HTML／CSSでできたWebサイトに動きをつけることが可能です。
jQueryは、JavaScirptの書き方を簡単にすることができるライブラリ。2006年にリリースされました。
ライブラリとはよく使われる機能やプログラミングの部品をひとまとめにして扱いやすくしたもののこと。JavaScirptはブラウザごとに対応可能なメソッドが微妙に異なりますが、jQueryはブラウザごとの差異を吸収するため、ほとんどブラウザの差異を気にせずにプログラミングできるのが特徴。
その他DOM操作が簡単になるなどのメリットがあり、JavaScriptライブラリのデファクトスタンダードとして開発現場で使用されています。
近年採用例が増えてきた例として、Vue.jsとReact.jsがあります。
Vue.jsはPHPも高速でコンポーネント化による管理がしやすいなどの特徴があります。事例としては noteやrettyなどでフロントエンド開発に利用されています。
参照元：noteのフロントエンドをNuxt.jsへ刷新します
参照元：Webサービスを支えるユーザログ基盤開発＠Retty
対してReact.jsはjQueryを使わなくていいのでシンプルなプログラムになり、サクサク動く。などのメリットがあります。
利用された事例としてはクラウド会計ソフトのfreeeやクラウドソーシングのランサーズなどで使われています。
参照元：「React」を導入している３社 − ランサーズ・Mozilla・freee − による実践勉強会！
Gitとはファイルのバージョン管理を簡単に行うことができるツールのことです。例えばあなたのスマホを最新のバージョンにアップデートした場合、古いバージョンに戻すことはできませんが、こういった古いバージョンをGitで管理することで編集履歴をさかのぼって修正することなどが可能になります。
▸参考記事：GitHub 入門 ～アカウントを作成する方法～
次はバックエンドエンジニアに必要なスキルセットを見てみましょう。フロントエンドエンジニアと比べてどう違うのかも注意深く読んでいただけると理解が深まると思いますよ。
バックエンドを作る際のサーバーサイド向け言語は、HTML／CSS／JavaScriptなどフロント向け言語と異なりユーザーからどの様に動いているか見ることができません。
主にWebサイトやアプリケーションの裏側の処理を担当する言語になります。
例えばRubyは日本最大のグルメサイトの食べログ。PHPは世界最大級のSNS、Facebookで使われています。
データベースでは主にSQLというデータベース言語を使い以下の物を操作します。
データベース言語（SQL）がデータを挿入、検索したりする際に使われるのに対しプログラミング言語は与えらたデータに対してどのように反応、命令するかを記述していきます。
その名の通りWebアプリケーションを開発するための枠組み（フレームワーク）のことです。
開発に必要な共通の機能を提供する事で、Webアプリケーション開発の作業効率アップや品質保持とメンテナンス性能をアップさせる事が可能。
RubyならRuby on Rails、PHPならCakePHP、Laravelなどが有名で頻繁に使われています。
▸参考記事：Webアプリケーションフレームワークとは？
フロントエンド開発、バックエンド開発共にGitは重要なバージョン管理ツールとして機能します。
GitはWebエンジニアとして必ず使うものなので、アカウントを作成しておくのがおすすめ。
▸参考記事：GitHub 入門 ～アカウントを作成する方法～
未経験、初心者の人がWebエンジニアになるための勉強方法を5STEPにまとめてみました。この5つを順番どおりに行うことで効率的な学習になるので、飛ばさずに一つ一つ理解していきましょう。
イギリス人ジャーアナリストのマルコム・グラッドウェルという方の調査によると「エリート演奏家は20歳までに合計で1万時間の練習を積み重ねた」という結果が出たそうです。
つまり大きな成功を収めるには1万時間もの練習が必要になると言い換えることができるでしょう。
未経験からエンジニアになるための学習を始め、一流と呼ばれるレベルのスキル・技術を身につけるには1万時間の学習が必要ということです。
平日・休日共におおよそ3時間学習を続けた場合、約10年間の歳月が必要になります。
参照元：1万時間の法則とは？ 努力を続けるのに本当に必要なこと
1万時間で一流という調査の一方、得意になるには1000時間と提唱する人もいます。それはPhilip Guo氏。
現在Philip Guo氏はカリフォルニア大学サンディエゴ校で認知科学の助教授を務めつつ、コンピュータサイエンスやエンジニアリングも教えています。
彼の提唱する1000時間で得意レベルをもとに計算すると、1日3時間でおよそ1年間かかります。一方で、1日あたりの学習時間を長く確保した上で、なお正しい学習ステップを踏めば時短も可能といわれています。
「エンジニアになろう」と思いたちすぐに学習へ取り組むのも悪くないですが、目標を具体的にしておくことがおすすめです。
例えば
といったポイントを事前に把握して学習プランを立てることで、どんなエンジニアを目指すかが決まり、学ぶべき言語やスキルも決まっていきます。基礎としてHTML／CSS／JavaScript＋サーバーサイドの言語1つを覚えるのは基本ですが、ディープラーニングを取り入れたアプリを作りたい人と、おしゃれなランディングページを作りたい人では将来的に身につけるべきスキルが変わってきます。
学んだはいいけど全然やりたいことに使えない。とならないように目指すべき理想像を具体的に考えておくのがいいでしょう。
まずはHTML／CSS／JavaScriptを勉強することで、スキルが身についていきます。そうすると他社サイトを見たときにサイトの構造を読み解き、実装難易度を見積もることができるようになるでしょう。
またWebアプリとネイティブアプリのメリットをかけ合わせたハイブリッドアプリや、HTML5+JavaScriptでモバイルでも動作する複数OS対応のアプリケーションも作れる目処が立ってきます。
昨今、DevOpsが推進されインフラ構築・運用の自動化が急速に進んでいます。
例えばAnsible 、Chefによる構成管理・構築・テスト・運用などのオペレーションが自動化されたり、jenkinsによるビルド自動化など。業務の効率化がIT企業では推進されています。
▸参考記事：よく耳にするDevOpsとは？わかりやすく解説します
次にクローンアプリを開発してみましょう。模写とも呼ばれるこの方法は
などのメリットがあります。
まずひとつ目の模写としておすすめしたいのはFacebookのログインページ。HTMLとCSSのみで実装が可能な上にラジオボタンやプルダウンなどの機能も必要になっています。これができればHTML、CSSのレベルはある程度揃っていると言って良いでしょう。
【STEP4】のクローンアプリを、HTML／CSS／JavaScript＋サーバーサイドの言語1つで開発後、身につけたスキルを活かしてシンプルなもので構わないので1つオリジナルアプリを開発してみましょう。
要件定義の仕方が分からない場合や、アプリケーションのイメージがわかない場合はクローンアプリの機能を一部改変したものでもOK。オリジナルの機能を何かしら付け加えるだけでも非常に大きな経験になるのでOKです。
ここからは脱初心者のスキルです。昨今働く上で大事になっていることも執筆しているので、ゆっくりと理解できるスピードでご覧ください。
UNIXとはサーバーに使われるOSの一種です。無料で配布されていた経緯もあり互換OSがたくさん存在しています。
コマンドとしてはhistoryで履歴を出せたり、–helpでコマンドの簡単な説明を表示することが可能です。
セキュリティ対策は昨今非常に重要度がましてきています。利用者の個人情報流出やなりすましされることが多いからです。
対策としては、テスト自動化によってWebアプリの脆弱性を事前に確認したり、採用している言語のバージョンが古い場合はアップデートすることが効果的。その他、WAFの採用なども有効です。
「リーダブルコード」はより良いコードを書くためのテクニックがまとめられたエンジニア必見の一冊です。
本書によれば
悪いコードの例としてあげられています。
チーム開発におけるコードは、「読むことができるコード」ではなく「理解しやすいコード」でなければなりません。
名前一つに関してもlaunchやopenなど、より具体性の高い単語を使うことで、名前から得られる情報量を増やすことができます。
この様にチーム開発を念頭にした「誰がみても分かりやすいコード」を書くことによって開発がスムーズに進むため、リーダブルなコードを書くことは重要と言えるのです。
参照元：リーダブルコード｜Amazon
実際にプログラミングを学ぶためのおすすめ学習サイト＆書籍を紹介します。学習サイトに関してはある程度無料で使えるものを紹介しているので、気になったら使ってみてください。
ドットインストールは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など |
| 利用料金 | 初心者向け講座無料 |
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レッスン無料 |
▸赤間 公太郎／狩野 咲／鈴木 清敬（著）
▸単行本（ソフトカバー）：336ページ
▸出版社：技術評論社
▸発売日：2019／3／1
出典：Amazon
こちらの書籍はドットインストール、Progatedeで一通りHTML／CSSを学んだ人が、基礎を固めるための書籍としておすすめです。
実際に簡単なサイトを作りながら順を追って学ぶことが可能な仕様になっており、リストやテーブル、フォームやページ全体のレイアウトなど、実践的なCSSのスタイリングの仕方が学べます。
最後にWebエンジニアについてのよくある質問集です。未経験の人から来る質問をまとめたので、参考記事も読みつつエンジニアについての理解を深めていってください。
文系・未経験からWebエンジニアになるのはもちろん可能です。
例えばGREE創業者の田中良和さんは、日本大学法学部を卒業した後、会社員をするかたわらでGREEを開発していますし、2chを作ったひろゆきさんも文系の出身です。
最初に選ぶサーバーサイトの言語は、自分が日常的に触っているWebサービスの使用言語を調べ、そのサービスに採用されている言語を学ぶのがおすすめ。
または、自分のなりたいエンジニア像からの逆算もおすすめで、大企業の案件・保守運用などに携わりたいならJava。
ディープラーニングなどAIを活かしたアプリを作りたいならPython。
ドキュメントが豊富で学習しやすい言語を学びたいならRubyもおすすめ。Rubyは国産言語で開発者が日本人のため、日本語で書かれた正式なドキュメントが多いため、英語に苦手意識がある人にもおすすめです。
プログラミングは、学習を今すぐ始めることができる一方、挫折率が非常に高い分野でもあります。
そのためプログラミングスクールへ行って学ぶべきと言えるでしょう。スクールでは、独学で学ぶのと異なり、エラーが発生した際にメンターのサポートが得られて即時に問題解決できるほか、他の受講生と切磋琢磨することがモチベーション維持になります。
またクローンアプリやオリジナルアプリの開発サポートもあるスクールなら、ポートフォリオも充実することが可能です。
プログラマカレッジでは完全無料でプログラミング講座を受けることが可能です。3500社の求人を抱え、未経験から就職も可能です。
Webエンジニアになりたい方は、一度お問い合わせください。
→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」
Webエンジニアの概要から具体的にWebエンジニアになる方法を紹介しました。
自分にもなれそう！と思って頂けましたか？思い立ったが吉。無料で学習を始められるので早速学習をはじめてみてください！
INTERNOUS,inc. All rights reserved.
