ともすた ウェブ開発者としてフリーランスになりたいとか、ウェブのサービスを立ちあげて独立したいと思った場合、どのような勉強をしたら良いでしょう。近年は、ウェブの範囲がどんどん広がり、どこから手をつけたら良いのかわからない時代です。
そこで、ここではウェブエンジニアになるまでのステップを紹介しましょう。なお、このエントリーでは独学で学ぶことを前提としています。スクールの紹介などはしていませんのでご了承ください。
なお、一応本記事は筆者の書籍や Udemy講座、YouTubeチャンネルへの広告記事となっています。Amazonの各リンクはアフリエイトとなっていて、また筆者の書籍等には「筆者作」と入れていますので、広告記事である事を念頭に読み進めていただけると幸いです。
ウェブエンジニアとは
ここで、「ウェブエンジニア」とは、主にウェブサービスやウェブサイトを開発するエンジニアを指し、大きく次の2つに分けることができます。
フロントエンドエンジニア
主に、ウェブブラウザーに表示される部分を構築するエンジニアを指します。HTMLや CSSといった言語を操って画面上に文字や画像を作り出したり、ユーザーの操作に応じた適切な動きを開発します。
サーバーサイドエンジニア（バックエンドエンジニア）
主に、ウェブブラウザーから送信された情報を元に、裏側で情報を作り出す部分を担当します。例えば、IDとパスワードを入力されたら、会員情報からパスワードが合っているかなどを検査して、ログインの可否を判断したり、会員情報を送り返したりといった部分を開発します。
それぞれで、必要な知識が異なるため、順番に紹介していきましょう。
[共通] STEP 1：HTML/CSS
まず、すべての基本となるのがHTMLとCSSです。HTMLとCSSは、「画面の見た目」を作るための言語で、ウェブサイトを作る場合はもちろん、近年ではスマートフォン向けのアプリ制作にもHTMLやCSSが使われることがあります。
HTML（Hyper Text Markup Language）
Hyper Textというのは文書内に「リンク」を作れる文書のことで、ここではウェブページのことを指しています。HTMLでは、「文書構造」と呼ばれる、「ここが見出しで、ここが本文、ここがヘッダーでここがフッター」など、その文書に役割や意味を付加していきます。例えば、次のようなものがHTMLの基本的な記述です。
<h1>これは見出しです。</h1>
<p>これは<strong>本文</strong>です</p>こうして、ウェブブラウザーに表示される文書の見出しがどこで、本文がどこかといった意味づけを行います。
CSS（Cascading Style Sheet）
「スタイルシート」とは、HTMLに対して「見出しは文字を大きく、ヘッダーの背景色は赤にする」など、デザインを整えるための文書です。CSSは、必ずHTMLとセットで活用されます。
古いバージョンに注意
書籍を購入する場合や、教材を選ぶ場合、HTMLやCSSのバージョンに注意しましょう。HTMLは、2019年現在「5」が最新、CSSは「3」が最新です。また、HTMLにはその派生技術として「XHTML」という技術もありますが、こちらも現在はほとんど使われていません。
教材を選ぶ場合は、「HTML5、CSS3」といったバージョンが表記されたものを選びましょう。
HTML、CSSが学べる教材
HTMLやCSSを学ぶなら、次のような教材がおすすめです。
- 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
- 世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書
- これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
- ドットインストール はじめてのHTML
- ドットインストール はじめてのCSS
- Udemy [HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門（著者作）
[共通] STEP 2：タッチタイピング
プログラミングをする場合、キーボードを打ち込む時間は非常に多くなります。特に仕事にするなら、一日中キーボードを叩くことも少なくありません。そこで、キーボードの打ち方が自分流だったりすると、タイピング速度が遅かったり、打ち込み間違いが多かったり、指が疲れやすくなったりします。
そこで、できるだけ早いタイミングで、正しいタッチタイピング（ブラインドタッチ）を身につけると良いでしょう。まずは、正しいフォームを身につけます。
[共通] STEP 3：JavaScript
JavaScriptは、HTML/CSSに加えてウェブに「動作」を与えるための言語です。JavaScriptは、今やウェブページには欠かせない存在。ちょっとしたアニメーションや、ユーザーの操作に対する反応（マイクロインタラクション）などで、ウェブページを華やかに、分かりやすくします。
ECMAScript（エクマスクリプト）
JavaScriptは、ヨーロッパの標準化団体「Ecma（エクマ） International」によって、その規格が定められます。これによって、さまざまなウェブブラウザーでも動作しますし、ウェブブラウザー以外の分野でも活用されています。この時、この規格を「ECMAScript（エクマスクリプト）」と言い、略して「ES」と表記されます。
ESは、現在毎年新しい規格になり、その年号がつけられます。「ES2015」から始まって、2019年 5月現在の最新版は「ES2018」です。ES2015で、JavaScriptの規格が大きめに変わり、それからは毎年小さな変更が繰り返されているため、今からJavaScriptを学習する場合は「ES2015以降」と明記された入門教材を利用するとよいでしょう。
JavaScriptライブラリー - jQuery
JavaScriptは、そのまま使うこともできますが、先のCSSと同様で何度も同じようなことを書かなければならないことがあります。そこで、JavaScriptライブラリーと呼ばれるものを合わせて使うことがあります（ライブラリー（Library）は図書館といった意味）。特に、最近は少し使用頻度が減ってきましたが、それでも現在でも非常に普及しているライブラリーが、「jQuery（ジェイクエリー）」です。
jQueryを利用すると、素のJavaScriptでは開発が面倒なプログラムを簡単に作成することができます。また、Ajax通信と呼ばれる非同期の通信を簡単に行えるようになります。
[共通] STEP 4：Git
Git（ギット）は、バージョン管理システムの1つです。ソフトウェア開発の分野では利用されていましたが、近年ではウェブ制作の業界でも非常に多く使われるようになってきました。
Gitは通常コマンドラインで利用されることが多いですが、最近では使いやすいソフト（GUIソフト）も出てきたたため、これから使いはじめても良いでしょう。
[フロントエンド] STEP 5：モダンコーディング
HTMLやCSSは、基本を学べばウェブページを作ることはできます。しかし、それだけでは大規模なウェブサイトやウェブアプリを作成するのは難しく、実務レベルのコーディングを学ぶ必要があります。
レスポンシブ・ウェブデザイン（RWD）、メディアクエリー
近年のウェブ制作は、タブレットなどの大画面からスマートフォンなどの小型端末までを網羅するデザインにすることが一般的です。
これには、「メディアクエリー」と呼ばれる、CSSに対象の画面解像度を設定して、CSSの内容を切り替えられるしくみを利用します。次のような記述法です。
@media screen and (min-width:480px) {
.side {
display: none;
}
}RWDについては、近年の入門教材についてはほとんどサポートされています。
CSSプリプロセッサー – Sass
CSSは、エディターでファイルを作成すれば、すぐにウェブブラウザーに読み込ませて利用することができます。反面、CSSは記述が冗長で同じようなことを何度も書かなければならず、特にメディアクエリーを利用し始めると、記述はますます大変になります。
そこで近年では、CSSを書く前段階の言語（メタ言語と言います）をつかって、CSSを作り出すのが一般的です。この時、メタ言語からCSSに変換する作業を「プリプロセス」といい、そのためのツールを「プリプロセッサー」といいます。
そして現在、最も普及しているプリプロセッサーおよびメタ言語は「Sass（サス）」という言語です。Sassのメリットは、CSSと完全な互換性があること。つまり、Sassを使っていながら、実際には普通にCSSを記述しても問題がないため、慣れないうちはCSSを書きながら徐々に効率の良い書き方を学ぶことができます。
CSSフレームワーク、Bootstrap
RWDを学ぶにあたって、1から自分で構築することもできますが、近年ではCSSフレームワークを使うことも多くなっています。
フレームワーク（Framework）とは、「足場」といった意味の英単語で、建物を建てる時に地面から直接立てるのではなく、足場を利用して立てると楽なことから、ウェブ制作でもフレームワークを使うことで、土台部分はすでに準備された状態で作ることができるというメリットがあります。
CSSフレームワークにはいくつかの種類がありますが、現在では Bootstrap（ブートストラップ）というフレームワークが最も普及しています。RWDにもあらかじめ対応されていて、ウェブページが非常に作りやすくなります。
CSS Transition
CSSは、実はちょっとしたアニメーションを作ることもできます。例えばウェブページを見ている時、ボタンをクリックするとボタンが少し動いたり、ウィンドウをスクロールすると、パーツが面白い動きをするページなどに出会ったことがあるでしょう。あれらが、CSSのアニメーション機能で構成されています。
CSS設計手法
大規模なウェブサイトを作成する場合、複数人で構築することもありますし、完成後もそれを保守し続けなければなりません。しかし、人によってHTMLやCSSの書き方がバラバラだと、後から編集する人が困ることになるでしょう。
そこで、一定の設計手法を決める必要があります。会社などによって異なる場合もありますが、現在では標準的な設計手法も確立されているため、これらを学ぶことは決して損にはなりません。
表示速度の高速化、最適化
ウェブサイトを開設したら、Googleなどの検索サイトから訪問者が訪れるようになります。この時、できるだけ自分のウェブサイトが上位に表示された方が、訪問者が多くなり、ビジネスに繋がりやすくなります。
検索サイトの上位に表示されることを「SEO（Search Engine Optimization：検索サイト最適化）」といいます。そして近年、特にGoogleが重要視しているのが「表示速度」と「スマートデバイスへの対応」そして、「SSL（Secure Socket Layer）」への対応です。
このうち、SSLへの対応はサーバー側で対応する内容ですが、前者の2点についてはフロントエンドエンジニアが行うべき範囲になります。無駄な記述を省き、できるだけ早くウェブブラウザーに表示されるようにし、またスマートフォンでも見やすいサイトを心がけましょう。
SEO
先の表示速度の最適化などは、最低限行うべきSEOですが、より検索サイトの上位に表示させるなら、SEOを専門的に学ぶ必要があります。ただし、近年ではHTMLの作り方などでSEOの有利不利は、あまり決まらない可能性が高いです。そのため、「上位表示を狙う」というよりは「順位を下げないように、きちんと作る」という部分が大きいと言われています。
[フロントエンド] STEP 6：SPA（Single Page Application）
近年のサイト制作では、非同期通信と呼ばれる、画面を表示する裏側でサーバーと通信しあって、データを最新の状態に保ったり、いま表示しているものとは別の情報を動的に表示するなど、1ページ内でさまざまな動作をするウェブページも登場しています。これを「SPA（Single Page Application）」と呼び、近年、この需要が非常に高まっています。
Vue.js
SPAを実現するためのライブラリーの中でも、最も注目されているのがVue.jsです。比較的習得しやすい上に、非常に使いやすく作られているため、すぐに使い始めることができます。
jQueryと同等の機能も持ち合わせているため、jQueryを利用せずにVue.jsだけで作るといったケースも少なくありません。
React
Vue.jsは習得しやすい代わりに、機能は豊富とは言えないため、より高度なプログラム開発を行いたい場合には、別のJavaScriptライブラリーを利用する場合が多いです（このような場合、フレームワークと呼ばれる場合もあります）。
Vue.jsも現在活発に開発されていて、Reactに追いつこうとしていますが、現状でよく利用されているのは「React（リアクト）」です。余裕があれば、こちらも学習しておくと良いでしょう。
トランスコンパイル – TypeScript
ECMAScriptは、新しい仕様で学習した方が良いと紹介しましたが、実は新しいECMAScriptは「使える」とは限りません。ウェブブラウザーによっては動作しない場合もあるのです。
そこで、これらを各ブラウザーで利用できるようなスクリプトに「変換」する必要があります。これを「トランスコンパイル」と言います。
トランスコンパイルをする技術はいくつかありますが、中でも「TypeScript」というMicrosoftが開発したコンパイラーがおススメです。同名のプログラミング言語を用いて開発し、「tsc」というコンパイラーを利用して変換します。
TypeScriptは、JavaScriptと完全に互換性のある「スーパーセット」と呼ばれる種類なので、いつもは普通通りJavaScriptを書いていれば問題ありません。新しい仕様のJavaScriptを書いたときは、それを正しく動作するように変換してくれます。また、「厳密な型指定」や「クラス定義」などの、独自の機能も加わっています。
アクセシビリティ
アクセシビリティ（Accessibility）とは、「（誰もが）アクセスできるウェブページ」を指す言葉で、視覚にハンデを持つ方や手足が不自由な方、お年寄り、怪我をしている方など、なんらかの事情を抱えているユーザーであってもウェブページを見やすくするための工夫です。略して「A11y（エーイレブンワイ）」などとも呼ばれます。
背景と文字のコントラストや、文字の大きさ、色の使い方（色覚への配慮）など、デザイン時に気にするべき点もありますが、実装時にも次のような点に気をつける必要があります。
- 音声ブラウザーで「聞いている」ユーザーへの配慮
- マウスを利用できない場合の配慮
- 動きを目で追えない方へのための配慮
- 画像が表示できない環境への配慮
- JavaScriptが動作しない環境への配慮
[サーバーサイド] STEP 5：PHP
サーバーサイドプログラミングで、現在最も利用されているのはPHPです。特に、ウェブサイト構築で非常に良く使われている「WordPress（ワードプレス）」というツールが、このPHPで開発されているため、WordPressのカスタマイズには欠かせません。
データベース – MySQL（MariaDB）
PHPで処理した情報、例えば会員登録したときの会員情報などは、別途「データベース」と呼ばれるデータを管理する専用のシステムに格納されます。
このデータベースでは「SQL（エスキューエル）」という特殊な言語を利用して、データの管理を行います。PHPで処理したデータは、SQLを使って出し入れするため、この知識も合わせて理解しておく必要があります。
PHPフレームワーク - Laravel
大規模なウェブサイトやウェブサービスを開発する場合、PHPを単独で使うと非常に開発が大変なため、「フレームワーク」と呼ばれる基本となるプログラムを利用して、そこに機能を乗せて開発していきます。
フレームワークには「CakePHP（ケイクPHP）」「FuelPHP（ヒューエルPHP）」など、いくつかの種類がありますが、現在最も使われているのが「Laravel（ララベル）」です。
CMS – WordPress
企業サイトやブログ、メディアサイトなど、情報の提供を主としたウェブサイトの場合、フレームワークよりももっと機能が充実しているCMS（Content Management System）が利用されます。
PHPを使ったCMSには、Joomla!やConcrete5など、さまざまな種類がありますが、圧倒的なシェアを誇っているのがWordPress（ワードプレス）です。
（場合によっては）Ruby + Rails
日本の、特にウェブサービスを開発している企業では、PHPの代わりにRubyを利用しているケースが多くあります。Rubyには、フレームワークとして「Rails」というものが開発されていて、これを組み合わせて利用されます。PHPが肌に合わない場合や、就職したい会社がRubyを採用している場合などは、こちらを学習するとよいでしょう。
【より高みを目指すなら】Python
現在、最も注目されているプログラミング言語は、Python（パイソン）といえます。特に人工知能の分野で活用されていて、今後の発展が期待されます。
余裕があれば、Pythonも学習しておくとよいでしょう。
[サーバーサイド] STEP 6：サーバー – AWS
サーバーサイドプログラミングの場合、サーバー上で作業を行います。通常は、レンタルサーバーを借りたり、あらかじめサーバー管理者が準備したものを使いますが、自分でもある程度サーバーの知識があると、より自由度が増します。
特に近年、Amazonが運営するAWS（Amazon Web Serivces）の需要が高く、サーバーの知識を身につけておくとよいでしょう。
[サーバーサイド] STEP 7：セキュリティ
サーバーサイドのプログラムを行う場合、セキュリティの知識が欠かせません。プログラムの作り方を間違えると、個人情報の流出や、ウェブページの改ざん、ウィルスやマルウェアなどの感染など、さまざまな脅威にさらされています。
正しいセキュリティ知識を身につけると共に、開発したプログラムを第三者の検査機関に検査してもらうなども業務では大切になってきます。
以上、フロントエンドエンジニア・サーバーサイドエンジニアになるためのステップについて紹介しました。すべてを一度に学習するのは非常に大変なので、まずは SPTE 1, 2をしっかり学習し、実際に業務に携わりながら、徐々に知識を広げていくとよいでしょう。
なお、筆者は Slackというチャットツールを使った、「独学応援コミュニティ」を主催しています。無償で参加できますので、ご参加いただき、本記事へのフィードバックや不明点などお気軽に話しかけていただけると幸いです。