## ウォーターフォールとアジャイルの違い

システムエンジニアを目指す上で必ず知っておくべき言葉は、システム開発における代表的な手法、ウォーターフォール・モデルとアジャイル・モデルです。**いずれのモデルも効率的なシステム開発には有効な手法ですが、両者の違いについて正しく理解しておく必要があります。

**この記事ではウォーターフォール開発とアジャイル開発について、それぞれの特徴と違い、それらが適したシステム開発について解説していきます。

## ウォーターフォール・モデルとは

ウォーターフォール・モデルは、システム開発の現場では最もポピュラーな開発手法です。**特に基幹系の開発や、大規模開発において主に使われています。**ここでは、ウォーターフォール・モデルの概要、適したシステム開発、向かないシステム開発についてそれぞれ見ていきましょう。

### ウォーターフォール・モデルの概要

ウォーターフォール（WaterFall）は英語で滝のことですが、滝のように上から下に向かって水が流れ落ちるように、上流工程から下流工程に向かって工程が進んでいくのが特徴です。

ウォーターフォール・モデルという言葉は、米国の科学者W.W.ロイス氏が1970年に発表した論文の内容が元だと言われていますが、「ウォーターフォール」という名称が使われたのは、TRW社に属するBellとThayerだとされています。

いずれにしても、ウォーターフォール・モデルは米国電気電子学会 （IEEE）で文書化され、誕生から半世紀を経て定着をしていきました。ウォーターフォール・モデルの大きな特徴としては、**前工程が完了しないと次の工程に進むことができないという点にあります。**

### ウォーターフォール・モデルの手順

ウォーターフォール・モデルはその名の通り、上から下に向かって進んでいきます。**ウォーターフォール・モデルでは大きな括りでとらえると、【要件定義】⇒【設計】⇒【製造】⇒【テスト】⇒【リリース】という工程で進んでいきます。**

要件定義工程ではユーザーやクライアントの要求を明確にし、その要求を実現するために必要な機能・要件・性能などを明らかにします。ここが曖昧であったり、要件を出し切れていなかったりすると、多くの場合はシステム開発に失敗します。

### ウォーターフォール・モデルが適したプロジェクト

ウォーターフォール・モデルが適したシステム開発業務とは、どのような開発なのでしょうか？それはシステム開発の途中で、**仕様変更を前提としない仕組みの開発です。**ウォーターフォールでは上から下に向かって工程が進むため、システム開発の途中で仕様変更が起きると、要件定義まで遡らなければなりません。

途中で仕様変更が少ないシステムには、基幹システムがあります。基幹システムでは要件や仕様が細かく決まっており、その仕様に従って着々と開発していきます。

逆に言えば、要件定義でミスを生じると、修正が非常に難しくなります。これまで基幹システムの開発に失敗しているケースは、そのほとんどが要件定義のミスによるものと考えられます。

### ウォーターフォール・モデルが適さないプロジェクト

ウォーターフォール・モデルが適さないシステム開発業務は、**システム開発の途中で仕様変更が起きやすいシステムの開発です。**代表的なものとしては、Webサービスの開発があります。

Webサービスではユーザビリティ（Usability）が重視されます。ユーザビリティ（Usability）には「使いやすさ」「可用性」「有用性」などの意味があり、それらは机上で設計するのは難しく、実際に作ったシステムをユーザーに見てもらい、触ってもらう必要があります。

そのため、仕様変更や手戻りが難しいウォーターフォール・モデルによる開発はあまり適しません。

アジャイル・モデルは、**柔軟性やスピードを優先したシステム開発の手法の1つで、現在の主流となっている手法です。**伝統的な開発手法であるウォーターフォール・モデルとよく比較されます。

ここでは、アジャイル・モデルの概要、アジャイル・モデルが適したシステム開発、適さないシステム開発についてそれぞれ見ていきましょう。

アジャイル（Agile）とは「素早い」を意味する英語です。イテレーション（Iteration）「反復の意味」 と呼ばれる短い開発期間の単位を採用して、**開発期間の短縮とリスクの軽減を目的とする開発手法です**。

モバイル分野などの日進月歩のスピードでテクノロジーが進化している分野、要件が途中で変更されるような分野との相性が良い方式です。

アジャイル・モデルでは小さな単位で計画・設計・実装・テストを繰り返すため、途中で問題が生じてもその影響がイテレーション内にとどまり、プロジェクト全体への影響が少ないというメリットがあります。

アジャイル・モデルと似た手法でスパイラル・モデルがあり混同しがちですが、スパイラル・モデルはプロトタイプ（試作）を提供しながらユーザーの要望に近づけ、品質向上を目指していく手法です。工数が膨れやすいため、潤沢な予算やリソースを確保できないと、とん挫するリスクがあります。

アジャイル開発の特徴、メリット・デメリット、DXとの関係など

### アジャイルソフトウェア宣言

アジャイル・モデル登場の発端は、「スクラム」や「XP」などの開発手法を提唱した技術者たちによって出された、**2001年に「アジャイルソフトウェア開発宣言」※にあります。**

日本で初めてアジャイル・モデルが採用されたのは、2000年代の半ば頃です。2009年には「アジャイルジャパン」※1が初めて開催され、毎年継続的に開催され、日本におけるアジャイル・モデルの普及に貢献しています。

*【参考】：※[アジャイルソフトウェア開発宣言](https://agilejapanexpo.com/)*

*【参考】：※1[Agile Japan EXPO ](https://agilemanifesto.org/iso/ja/manifesto.html)*

アジャイル開発宣言の内容を解説！開発に活かす道筋を探る

アジャイル・モデルでは、チーム単位で、**要件定義・設計・実装・テスト・リリースなどの開発工程を小さな機能の単位で繰り返して行います。**まさしく素早く（Agile）、ユーザーと一緒に機能のブラッシュアップを図りながら、システムを作り上げていくという手順で進めます。全ての機能を横断的に進めていくウォーターフォール・モデルとは異なり、比較的軽量で柔軟な開発手法です。

### アジャイル・モデルが適したプロジェクト

アジャイル・モデルが適するシステム開発業務は、ユーザーの要求にマッチしたシステムやサービスをスピーディにリリースすることを優先し、ブラッシュアップしていくようなシステム開発です。

つまり、**出来上がりの都度、ユーザーやクライアントの承認を得られたものから逐次リリースしていく方式です。**

### アジャイル・モデルが適さないプロジェクト

アジャイル・モデルが適さないシステム開発は、**「正確性や安全性が求められるシステム」です。**例えば、財務・会計システムなどの基幹システム構築では初めに要件を固める必要があります。

会計基準に従って詳細設計まで行うため、基本的に要件の変更はありません。また、企業会計は厳しい監査を受けるため、システム設計に関するドキュメントは必須です。

そのため、基幹システムの開発はウォーターフォール・モデルによる開発が一般的であり、ウォーターフォール・モデルは適さないという説が根強くあります。

### アジャイル・モデルの3つの開発手法

伝統的な開発手法であるウォーターフォール・モデルに代わり、要件変更や仕様変更に柔軟な対応が可能なアジャイル開発は主流になってきていますが、アジャイル・モデルにはいくつかの手法があります。ここでは、**アジャイル・モデルの代表的な手法について3つ紹介します。**

*1.スクラム*
アジャイル・モデルでは最も有名な手法です。ラグビーのスクラムが語源で、ラグビーのようにチームが一丸となり、コミュニケーションを重視しながらシステム開発を進めます。チームには以下の3つの役割を持つメンバーがいます。

▪プロダクト・オーナー：プロジェクトチーム全体の管理者
▪スクラム・マスター：開発のチームリーダー
▪開発者：システムの開発に携わるエンジニア

*2.エクストリーム・プログラミング（略称：XP）* 
エクストリーム・プログラミングはエンジニア、中でもプログラマー重視の開発手法です。ペアでコードを共有し、相互チェックと助け合いでプログラミングを進めます。これにより、仕様変更やエラーなどに柔軟かつ効率的に対応を行います。

*3.ユーザー機能駆動開発（略称：FDD）*
「顧客価値」にフォーカスした開発手法です。顧客の課題抽出、課題解決に向けた機能選定を重視し、プロジェクトマネジメントに重きを置いています。

また、イテレーションの期間は短く設定されるため、工程の手戻りのリスクが比較的大きく、進捗管理を定量的に行う必要があります。アジャイル・モデルの中ではウォーターフォール・モデルに近い手法とされています。

## メリット・デメリットを比較

ウォーターフォール・モデルとアジャイル・モデルにおいて重要なのは、それぞれの違い、メリット・デメリットを理解した上で、システム開発に最適な手法を選定できるようになることにあります。以下に、それぞれのメリット・デメリットについて見ていきましょう。

### ウォーターフォール・モデルのメリット・デメリット

ウォーターフォール・モデルの代表的なメリットとデメリットは以下の通りです。

*■メリット*
ウォーターフォール・モデルのメリットとしては、**開発計画や予算見積りが容易で、その精度が高いことです。**また、開発内容や必要な人材があらかじめ明確になっており、開発に必要な人材・スキル・リソース確保が計画的に行えるため、プロジェクトマネジメントが行いやすいモデルです。

*■デメリット*
ウォーターフォール・モデルでは、各工程を順番にこなしていきます。そのため、システム開発が大きく進捗した後に、新たな要件が追加されたり、大きな不具合が見つかったりすると、大きな手戻りが発生するリスクがあります。これによって開発に関わる時間とコストが当初計画から大きくぶれてしまいます。

### アジャイル・モデルのメリット・デメリット

続いて、アジャイル・モデルの代表的なメリットとデメリットを紹介します。

*■メリット*
アジャイル・モデルでは、反復（イテレーション）ごとに開発とリリースを行うため、**短期間でプロダクトやサービスをユーザーに提供できる点が大きなメリットです。**また独立した小さな単位で開発を進めるため、仕様変更や手戻りの影響が最小限で済む点もメリットです。

*■デメリット*
アジャイル・モデルはユーザーのニーズや要件に柔軟に対応できる反面、この柔軟さゆえにシステム開発が当初の方針から外れてしまったり、予算や全体スケジュールの管理がしにくかったりといったデメリットがあります。

アジャイル開発が失敗するパターンと成功に導くための5つの心得

アジャイル開発のメリット・デメリットや代表的な手法について解説！

## いずれの手法にも対応できるエンジニアを目指しましょう

ここまで、ウォーターフォール・モデルとアジャイル・モデルについて比較を交えながら紹介してきました。どちらが優れている・劣っているという訳ではなく、それぞれに向き不向き・一長一短があります。

**大切なことは、そのプロジェクトにどちらの手法が向いているかを正しく判断することです。**他に両モデルを併用したハイブリッド・モデルもありますので、選択肢として検討してください。

システムを開発する上でそれぞれのモデルについてより知識を深め、いかなるプロジェクトにも対応できるよう準備しておくことが求められます。当記事を参考に、今後もさらなる理解を深めましょう。

システム開発でよく使われる代表的な開発手法の「ウォーターフォール型」と「アジャイル型」の違いとは何なのでしょうか？それぞれの手法の意味・内容・システム開発での向き・不向き、メリット・デメリットを解説します。システムエンジニアを目指す方はぜひ理解を深めてください。

ウォーターフォール・モデルとアジャイル・モデル手法のそれぞれの特徴や違い

ウォーターフォール・モデルとアジャイル・モデルそれぞれに適したプロジェクト、不向きなプロジェクト

ウォーターフォール・モデルとアジャイル・モデルのメリット、デメリット

ウォーターフォール開発とアジャイル開発の違いは？メリット・デメリットも解説

2022年4月26日に、**米国GitHubから「GitHub Desktop 3.0」がリリースされました。**GitHub Desktopはソフトウェア開発者にとっては必須ともいえるツールです。

この記事では、これからGitHubを利用してみようと考えているエンジニアの方に向けて、GitHubとは何か、GitHub Desktopを使うと何ができるのか、「GitHub Desktop 3.0」によって何が変わったのかについてやさしく解説していきます。

*【参考】：[GitHub Desktop 3.0でPull Requestとのインテグレーションを強化｜GitHubBlog](https://github.blog/jp/2022-04-28-github-desktop-3-0-brings-better-integration-for-your-pull-requests/)*

まずは、GitHub・GitHub Desktopの概要について確認しておきましょう。

GitHub（ギットハブ）は世界中の人々が利用し、**プログラムコードの保存・管理・公開ができる「ソースコード管理サービス」で、GitHub社によって提供・運用されています。**

GitHubの主な目的としては、世界中の人々に自身が作成したプログラムを主に無償で配布することで、その際に「商用利用は不可」といった条件を指定できます。この条件をlicence（ライセンス）と言います。

GitHubは開発プロジェクトや企業組織などで、ソースコードの管理に利用され、ソースコード管理に関わる手間やコストの削減に役立っています。また、ソースコードの公開・更新履歴（history）の閲覧・共有されたソースコードの修正・バグ管理など、さまざまな機能が用意されているためエンジニアにとっては非常に便利なサービスです。

GitHubではコマンド操作を通じてさまざまな機能を利用するのが一般的でしたが、**コマンド操作不要で、視覚的に操作ができるようにしたのが「GitHub Desktop」です。**「GitHub Desktop」はGitHub純正のツールで、無償で利用することができます。

GitHubDestopはエンジニア志望の方以外にも、Web制作に携わるコーダーの方やWebデザイナーの方にとっても便利なツールです。

またGitHub DesktopはWindowsはもとより、Mac（M1を含む）やLinuxにも対応したマルチプラットフォームであるため、エンジニアにとってはありがたいツールです。ただし、公式サイトで記載されているのはWindows用とMac用のみなので、Linuxで使いたい方は以下の参考サイトを参照してください。

*【参考】：[To install Github Desktop for Ubuntu](https://gist.github.com/berkorbay/6feda478a00b0432d13f1fc0a50467f1)*

## GitHub Desktop 3.0の変更点や特徴

GitHub Desktopの概略について理解できたところで、この度*2年ぶりのメジャーアップデートとして登場したGitHub Desktop 3.0の特徴や追加機能について見ていきましょう。*

GitHub Desktop 3.0は、主にプルリクエスト機能のコミットの破棄・並べ替え・修正などに関わるGit操作へのサポート改善が行われています。

他には、GitHub自体とローカル開発のワークフローを近づけるエキサイティングな機能も追加されています。**この機能追加と改善によって、開発プロジェクトなどでより一層の生産性向上や効率化が期待できます。**

*【参考】：[GitHub Desktop 3.0 brings better integration for your pull requests](https://github.blog/2022-04-26-github-desktop-3-0-brings-better-integration-for-your-pull-requests/)*

### プルリクエストのチェックバッジ追加

GitHub Desktop 3.0では、プルリクエスト番号の右に**「GitHubAction」のチェックが完了しているかどうかを示すバッジが新たに設けられました。**

バッジをクリックすると、「GitHubAction」のチェック状況、ジョブやステップの内容確認を行え、何か問題があればそれを修正して、再度チェックを実行することができます。

「GitHubAction」は2019年に追加され、これまでは外部サービスとの連携が必要だった自動ビルド、自動テストなどがGitHubのみで実現できる機能です。

### プルリクエスト通知機能の改善

通知機能があると便利ですが、不要な通知や重要性の低い通知は単なるノイズとなってしまいます。

GitHub Desktop 3.0では、関係するすべてのリポジトリや、すべてのイベントについて通知を行う代わりに、**作業中のリポジトリに関して重要な通知だけを送るように改善されました。**これにより、無用な通知に悩まされることは減り、より作業に集中できるようになります。

### プルリクエストのチェック失敗通知

GitHub Desktop 3.0から、**プルリクエストのマージに失敗や問題が生じると、通知が行われるようになりました。**さらに問題詳細を知らせるダイアログが表示され、ダイアログからブランチに戻って修正作業を行う、あるいはチェックのやり直しを指示することができるようになりました。

### プルリクエストのレビュー通知

GitHub Desktop 3.0では、**プルリクエストのレビュー通知が行われるようになりました。**この機能によって、メンバーが修正要求をしたのか、あるいはプルリクエストを承認したのか、単にプルリクエストにコメントしただけなのかなどがすぐに分かるようになりました。

また、修正要求や提案が上がった際には、直ちにそのブランチに画面を切り替え、すぐに対応することが可能です。

## GitHubを使う上で押さえておきたいこと

*Gitfubを利用する上で、最低限押さえておきたい用語や、機能があります。*ここでは入門者が知っておきたい用語と機能について解説をします。

ここではGitHubを使う上で、**最低限知っておきたい基本用語を7つ紹介します。**どの用語も頻繁に使いますので、この機会に覚えておきましょう。

*1：リモートリポジトリ*
リポジトリは倉庫を意味し、GitHub上ではディレクトリやファイルの情報を保管する場所のことです。リポジトリはディレクトリやファイルの変更履歴を記録し、ソースコードのバージョンの管理ができます。

リモートリポジトリは、インターネット上に保存してあるリポジトリを指します。開発者はリモートリポジトリからローカルPCにリポジトリを複製して、ローカルで作業し、作業の結果をリモートリポジトリと同期することができます。

*2：ローカルリポジトリ*
ローカル環境（開発者のPC）にあるリポジトリのことをローカルリポジトリと呼びます。ローカルリポジトリを新たにローカル環境に作成したり、リモートリポジトリから複製したりして、ローカルリポジトリ上で作成したプログラムのバグ修正や機能追加などを行えます。

ローカルリポジトリでの作業結果を他の開発者と共有したい場合は、リモートリポジトリにアップロードして公開することでできます。

*3：プッシュ*
ローカルリポジトリをリモートリポジトリと同期して、自分のコミットを反映させることをプッシュといいます。

また、チームで作業をしている場合には、他の人がプッシュして、リモートリポジトリに変更が加えられている場合もあります。プッシュに対し、リモートリポジトリの変更をローカルリポジトリに同期させることをプルといいます。

*4：コミット*
コミットとは、別名リビジョンとも言い、GitHub上のファイルに対する個々の変更のことです。ファイルに対してコミットをし、その変更を保存すると、一意の IDが作成されます。その際にコミットした変更点と、いつ誰が変更したかの記録を保持できます。

*5：ブランチ*
ディレクトリやファイルの変更履歴の流れを分岐させて記録したものをブランチといいます。オリジナルの履歴から分岐したブランチは、他のブランチの変更などの影響を受けません。

リリース済みソフトウェアなどに影響を与えず、バグ修正や機能追加を行う場合は、複数のブランチを作って、それぞれで修正や機能追加を進めることができます。作業が終了したブランチをオリジナルに統合することをマージ（統合）と称します。

*6：プルリクエスト*
当該プログラムの関係者、レビュワーに対してソースコードの変更を通知し、オリジナルの更新を依頼するための機能をプルリクエストといいます。1人では見逃しがちなコードの記述ミスやバグなどが発見しやすくなり、プログラムの品質向上にも役立ちます。

*7：フォーク*
GitHub上の自身のアカウント領域に対して、既存のリポジトリを複製する機能をフォークといいます。自身のフォークしたリポジトリでは作業内容の更新が行えます。

また、フォークした自身のリポジトリ更新結果を、既存のリポジトリに対してプルリクエストすることで、管理者はその更新内容を通知で把握することができ、リポジトリの共有を行わなくとも共同開発を円滑に行うことが可能です。

*【参考】：[GitHub 用語集｜GitHub Docs](https://docs.github.com/ja/get-started/quickstart/github-glossary)*

GitHubでは何ができるのか、*バージョン管理面とソースコード管理面からGitHubの機能について解説します。*GitHubは開発プロジェクトやチームでのプログラミングでよく利用されますが、他にはWEBデザイナーやWEB制作のコーダーにも、テキストデータの管理などで活用されています。

プログラムのソースコードなど、**ファイルの変更や修正の履歴を管理することをバージョン管理といいます。**

これにより、過去のある時点の修正内容を確認したり、その時点の内容にソースコードを戻したりすることができます。GitHubにはこのバージョン管理機能があり、新バージョンで不具合が発生した際に、正常な過去のバージョンに戻したり、バグの追跡を行ったりすることができます。

### ソースコードの管理ができる

GitHubではソースコードの共有だけではなく、**ソースコードの管理が行え、開発プロジェクトを円滑かつ効率的に進めるのに役立ちます。**GitHubではプロジェクトの進行や課題の管理、ソースコードのレビューなど、プロジェクトやチームでの利用でより効果を得やすいという側面があるからです。

具体的にはソースコード上の問題点、バグの再現手順などに関するタイトルやコメントを記録して、チームメンバーに対する情報の周知徹底や課題に対する進捗管理が行えます。

ここでは、**GitHub Desttopのインストール方法について紹介します。**以下はWindowsユーザー向けですが、Macユーザーも同じページにある『Download for macOS』からダウンロードできます。

*1.* 下記リンクよりGitHub Desktopの公式サイトにアクセスし、トップページにある『Download for Windows（64bit）』をクリックすると「GitHub DesktopSetup-x64.exe」ファイルがダウンロードされます。

*2.* 「GitHub DesktopSetup-x64.exe」を実行するとセットアップが開始され「Welcome to GitHub Desktop」画面が表示されます。

*3.* GitHubのアカウントを持っていない方は、「Sign in to GitHub.com」をクリックして、下段の「New to GitHub？ Create an account.」からGitHubで使用するe-mail、パスワードとユーザー名を登録し二段階認証が済むとGitHub Desktopが使えるようになります。

（注意）：「GitHubdl」はPython向けのGitHubライブラリーであり、GitHubのダウンロードとは無関係です。GitHubから個々のファイルやディレクトリをダウンロードするためのツールとして利用するものですので、混同しないようにしましょう。

*【参考】：[GitHub Desktop](https://desktop.github.com/)*

ここまでGitHub Desktop 3.0のリリースと絡め、GitHubとは何か、GitHub Desktopによって何ができるのかなどについて解説してきました。**GitHub DesktopはプログラマやWebエンジニアのGithub初心者などにとって役立つツールです。**

GitHub Desktop 3.0では新機能が実装され、さらに便利なツールに進化しています。これまで利用していた方や、まだ使ったことがない方もぜひ1度試してみることをおすすめします。

GitHubが新たに発表したクライアントアプリケーション「GitHub Desktop 3.0」とは何か？GitHubやGitHub Desktopの概要をエンジニア初心者向けに易しく解説し、「GitHub Desktop 3.0」の特徴や機能について紹介します。

「GitHub Desktop」はコマンド操作不要で、GitHubを視覚的に操作ができるようにしたデスクトップツール

メジャーアップデートとなった「GitHubDesktop 3.0」は主にプルリクエスト機能の改善が行われている

「GitHubDesktop 3.0」により、開発プロジェクトのさらなる生産性や効率向上が期待できる

GitHub Desktop 3.0とは？メジャーアップデートで何が変わったのか、概要を解説！

- [HTMLを独学で勉強するには? エンジニアが学ぶべき理由や習得に必要な時間](https://and-engineer.com/articles/YXpquhUAACsAivlG)

- [HTMLでできることは少ない？できないことやタグも一覧でまとめた](https://and-engineer.com/articles/YV1ZtxAAACn9LtD9)

- [HTMLのdivタグとは？読み方・目的・使い方などを解説！](https://and-engineer.com/articles/YUmP1hAAACUA1NVs)

「プログラミング言語の他にHTMLやCSSを学ぶ意味があるのか？」という悩みを持つ初級エンジニアの方がいます。フロントエンドエンジニアなら、HTML/CSSは必須言語といえますが、バックエンドエンジニアやサーバーエンジニアにはあまり関係が無さそうに思えます。

しかし、プロジェクトリーダーやプロジェクトマネージャーを任された時に、*HTML/CSSの知識やスキルがあると、その分メンバーからの尊敬や信頼を得られる*でしょう。この記事では、**入門ガイドとしてHTML初心者の方を対象に、HTML/CSSを学ぶ意味や効果的な学び方について解説**します。

HTMLを知らないエンジニアはいないと思いますが、HTMLは「Hyper Text Markup Language」の略です。**HTMLはプログラミング言語ではありませんが、Webページを作るときに必須となるマークアップ言語の1つ**です。

 HTMLと一言で呼んでも、実際には「HTML4」「XHTML」「HTML5」の3種類があります。すべて覚える必要はありません。ここでは「HTML5」を対象に解説します。

CSSは「Cascading Style Sheets」の略で、*文字サイズや文字の色、余白、装飾などのレイアウトでの見栄えを決めるスタイルシート言語*です。HTMLだけでもWebページは作成できますが、殺風景で味気ないページになるでしょう。

そこで、*見栄えの良いページを作成するには、HTMLとCSSをセットで学ぶ必要があります。*

HTML・CSSとは何か？使い方やできること、独学方法を解説！

HTML/CSSはやさしい言語です。*少し学べばすぐに結果が確認できるため、挫折しにくい*のが特徴です。しかも、学習人口が圧倒的に多いため、壁にぶつかってもすぐに解決できます。また、あらかじめ特に準備するものがないため、すぐに始められます。

**HTML/CSSはITエンジニアの初めの一歩、エンジニアの一般常識**と考えて、できれば多くの人に学んでほしい言語です。

### HTML/CSSの学習は電子ブックよりも紙の本がおすすめ

最近はスマホやタブレットにダウンロードして読むタイプの電子書籍（電子ブック）が増えてきましたが、**勉強目的なら紙の本の方が良い**でしょう。

電子ブックの場合は、図が見にくい・一度に表示できる量に限りがあり複数のページにまたがって読む必要がある・コード表記のレイアウトが崩れていることがあるといった使い勝手にデメリットがあります。また、勉強の達成感も得にくいでしょう。

一方、*紙の本は1ページ内にまとまった情報が記載されている*ため、複数ページにまたがって確認する必要がありません。また図や表なども見やすく、実際にコードを入力しながら学習する場合も使いやすいです。

また、電子ブックは数ページ程度しか試し読みできないことが多く、購入したあとに「自分には合っていなかった」と感じることもあります。しかし、紙の本は購入する前にある程度試し読みできるため、購入後に後悔することも少ないでしょう。

HTML/CSSの学習を始めて苦手な部分や難しいポイントに差し掛かっても、**最低でも1ヵ月は学習を続けましょう。**比較的簡単だと言われるHTML/CSSですが、人によっては学習の途中で挫折することもあります。

しかし、わからないところはとばしたり、簡単なところからやり直したりしながら1ヵ月は学習を継続してください。本での独学は時間がかかるのが一般的です。学習スケジュールを立て、計画的に学習を進めることが大切です。

未経験者がHTML・CSSを最短で習得できる独学方法を解説！

**本を読みながら実際にコードを書くと、より知識が定着しやすいのでおすすめ**です。HTML/CSSの学習本の中にはサンプルコードや演習問題がついているものがあり、本を読みながらコードを書くとより効率的に学習できます。

また、コードを書くことでインプットだけではなくアウトプットも同時にできるため、学習の成果や進み具合が目に見えてやる気にもつながるでしょう。

ある程度HTML/CSSが理解できたら、**自分の好きなWebサイトを模写するのもおすすめ**です。Webサイトを模写することで、本で学んだ知識がどの程度身についているのかがわかります。また、わからないところや苦手なところを再認識できるため、足りない知識を補うこともできます。

## HTML/CSSの入門本を選ぶポイント

*HTML/CSSの学習本を購入するにあたり、注意すべきポイント*を以下で説明します。スクールに通うより遥かに安い出費で済むとはいえ、**せっかく購入するからには自分に合った本を選びましょう。**

### 自分のレベルに合っていること

*学習本の購入では、自分のレベルに合っているというのが最低限の条件*です。どんなに外装が素晴らしく、どんなに人気があっても自分に合わなければ意味がありません。間違って上級者用の参考書を選んでしまうと、いきなり挫折します。

また初級や入門の表記がある本でも、実際にはレベルが高すぎて理解ができないといったことがあります。書店で手に取って試し読みするのがベストです。電子書籍の場合もネットで一部試し読みができるものもあるため、**まずは中身を見て自分のレベルに合っているかを確認**しましょう。

### HTMLとCSSを同時に学べること

Webページ作成の基本はHTMLですが、CSSが使われているケースが大半です。**HTMLとCSSはセットで学びたい言語ですので、両方を解説している本をおすすめ**します。

HTMLとCSSの両方に対応している本であれば、効果的に2つの言語をマスターできるような構成になっており、*別々に本を買って勉強するよりは遥かに効率的*です。

### 最新のバージョンに対応していること

よく中古の書籍を購入する人がいます。小説など、時代の変化に直接関係ないものであれば問題はありませんが、**学習本の場合、時代の変化の影響を受けやすいIT系では、本は最新バージョンであることがポイント**です。

2022年現在*HTMLの最新バージョンは「HTML Living Standard」、CSSは「CSS3」*です。これらに対応している学習本や参考書を選ぶようにしましょう。

*（注意：HTML5は2021年1月28日に廃止され、HTML Living Standardが標準規格になりました。内容は大きく変わりませんが、できるだけHTML Living Standardを対象としている本がおすすめです。）*

これは必須ポイントではありませんが、**用語の解説が詳しく書かれている本や、インデックスがしっかりしている本は辞典代わり**にもなります。学習が終わったあとも辞書として使えるため、長く使えることがメリットです。

## 【2022年最新】HTML/CSS入門書おすすめ15選

HTML/CSS関係の解説本、参考書は非常に豊富です。ここでは、**おすすめのHTML/CSS入門書15選を紹介**します。以降で紹介する入門書のおすすめポイントとしては、入門者向けであること、HTMLとCSSを同時に学べること、最新バージョンに対応していることなどです。また、書評や口コミも参考にしています。

ちなみに出版日が比較的古いものでも、最新のバージョンに対応し、改訂している本は紹介しています。

### 1.スラスラわかるHTML&CSSのきほん 第2版

特徴：**小規模なサンプルサイトの作成を通じて、HTML/CSSの基本が学べる入門書**

2013年に初版が発刊された*ロングセラーの人気本*です。2018年に今回おすすめの第2版が発売されました。HTML/CSSの基本について、可能な限りわかりやすく解説されてます。

図解が多く、誰もがミスしやすい箇所のサポートも親切です。ある程度、 HTML/CSS の知識がある方には物足りない内容かもしれませんが、*入門者にはぜひおすすめしたい1冊*です。

【参考】：[スラスラわかるHTML＆CSSのきほん 第2版](https://www.sbcr.jp/product/4797393156/)

### 2.デザインの学校 これからはじめる HTML & CSSの本

特徴：**Webデザインの基本を学ぶ初心者向けのHTML/CSS入門書**

*比較的ページ数が少なく、初心者に優しい丁寧な説明で、すらすら読み進められます。*わかりやすいことを最優先としており、取っ掛かりの入門書としておすすめです。しかし、簡単な内容のため初心者でもこれ1冊で十分とは言えません。

超入門という点ではおすすめの本です。分厚い本は苦手、飽きやすいという方はこの本でスタートを切るのも良いでしょう。

▪著者：千貫 りこ、ロクナナワークショップ（監修）

【参考】：[デザインの学校 これからはじめる HTML & CSSの本](https://gihyo.jp/book/2017/978-4-7741-8968-0)

### 3. これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

特徴：**HTML/ CSS、JavaScript などの入門書として網羅性に富み、これ1冊で基本を学べる**

初心者にわかりやすく書かれている本で、HTML・CSS・JavaScriptについて幅広く学べます。しかし、より詳しく学びたい人にはやや物足りなさを感じるかもしれません。*Web開発の基本について広く浅く学びたい人におすすめ*です。

【参考】：[これからWebをはじめる人のHTML＆CSS、JavaScriptのきほんのきほん](https://book.mynavi.jp/ec/products/detail/id=65861)

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

特徴：**Webサイト作成に必要な知識を凝縮した教科書**

全15章から構成されています。レッスン1の基礎知識から始まり、 HTML/CSSの使い方を中心としたレッスンが続き、後半のレッスン14と15ではWebサイトの公開方法が記載されています。タイトル通り教科書のイメージが強いですが、*しっかり基礎を学びたい初心者の方におすすめ*の本です。

▪著者：赤間 公太郎、狩野 咲、鈴木 清敬

【参考】：[世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書](https://gihyo.jp/book/2019/978-4-297-10302-6)

### 5.いちばんやさしい HTML＆CSS 入門教室

特徴：**スマホ対応のサイト作りを題材とした新しいタイプのHTML/CSS入門書**

「いちばんやさしい」のタイトル通り、HTML/CSSに特化した入門書です。特徴は*スマホ向けサイトを題材としている*点で、他の教本とは一線を画しています。

題材はスマホサイト作成ですが、モバイル対応サイトを作りながら、パソコン表示の対応方法なども解説されています。また、*閲覧するユーザーのデバイスに合わせて自動的に表示が最適化される「レスポンシブデザイン」の制作を学べます。*入門でありながら、実践力を高めたい初心者におすすめの1冊です。

▪出版社：株式会社ソーテック社

【参考】：[いちばんやさしい HTML＆CSS 入門教室](http://www.sotechsha.co.jp/pc/html/1213.htm)

### 6.HTML＆CSSとWebデザインが1冊できちんと身につく本

特徴：**読むだけで各言語の知識とWebデザインの基礎が身につく**

HTMLやCSSのコーディング方法に加え、多くのWebサイトで使用されている4つのレイアウト手法についても学べます。*基礎知識の勉強にもなる上、実践的なテクニックも学ぶことができます。*そのため、実際にHTMLやCSSを使った仕事がしたい人にもおすすめです。

またサンプルサイトの見栄えも良いので、Webサイトを作りながら楽しく勉強できるのもポイントです。

言語・開発の記事（79ページ目）