Web開発者を目指すなら知っておきたい基礎知識とおすすめ教材（前編）
こんにちは！テクトレブログ編集部です。
本日は様々な学習教材を紹介していきますが、そもそもあなたはプログラミングの言語知識のみしか知らない「駆け出しエンジニア」になっていないでしょうか？
プログラミングの学習を始めたばかりの駆け出しエンジニアの方にありがちなのが、Ruby on Railsなどのフレームワークを扱う入門用の教材で、簡易なWebアプリを作ってみた段階で止まっているという状況です。
確かに、Ruby on Railsを扱う教材の通りにWebアプリを作ると、比較的簡単に動くものが作れます。
しかし、Webアプリは様々な技術の上に成り立っているので、それを支える技術についてもある程度知っておかないと自分でアプリを作ろうとした時に多くの問題が出てくるでしょう。
（主観的になってしまいますが）プログラミングの構文のような知識は、システム開発に必要な総知識の20%未満であると感じます。
また、Ruby開発者のための『Rubyist Magazine』というWebマガジンにも「Railsアプリで使う知識」の図解として次のようなものがあります。
上の図のように、Ruby on Railsを使ってアプリを開発する場合でも、メインとして使用する言語やフレームワークの知識以外にも様々な知識が必要になるのです。
もしWebに関する知識がない場合は、応用力が育たず、探してきたコードををコピペばかりするエンジニアになってしまうかもしれません。
またセキュリティの知識がなければ、他の人や会社に迷惑や損害をかける可能性もありますし、最悪の場合は社会的信用を失う結果にも繋がりかねません。
この記事ではそのようなことのないよう、Web開発者として必ず押さえておきたいITの知識と、それを学ぶためのおすすめ教材について紹介していきます。
Web開発を学ぶ上で初心者が引っかかりがちな落とし穴
初心者がWebサイトやWebアプリを作ろうと思った時に、陥りがちなこととして
- 教材のコードを打ち込んで学習したけど自分でアプリ作成ができない
- 教材と同じことはできるけど、仕様の変更などができない
などがあります。
これはスクールの教材や参考書などのコードを丸写しすることでアプリを作って、なんとなく理解したつもりになっている時に起こりがちです。
では、このような状態に陥らないためにはどのような知識を学ぶ必要があるでしょうか？
Web開発に必要とされるIT関連技術の知識
開発にあたり、メインとなる言語やフレームワークの知識の他には何が必要でしょうか。
答えは、「Webに関する全般的な基礎知識」です。
具体的には、
- HTML,CSS
- JavaScript
- データベースやSQL
- Git/GitHub
- Linuxやシェル、シェルスクリプト
- ネットワーク
- セキュリティ
・・・といった項目の基本的な知識が必要になるでしょう。
これらの基本を理解していないと、教材に沿ってなんとなくWebアプリを組み立てられたとしても、自分でアプリ開発をするときに詰まってしまうと考えられます。
今回の記事では、これらWeb開発における必須知識のうち
- HTML,CSS
- JavaScript
- データベースやSQL
- Git/GitHub
の知識について、おすすめの教材を紹介していきます。
以下で紹介するサービスや教材を使って学んで、Web開発者として仕事をする上での基礎力をつけましょう！
おすすめサービス・教材一覧
HTML・CSS
HTMLとは、Webページの構造を記述する言語です。CSSとはHTMLと組み合わせて使用するもので、Webページの背景やフォントなどのスタイルを指定するものです。これらはWebページの見た目を作るもので、Webアプリ開発学習においては一番先に学ぶ事になるででしょう。
HTML・CSSの学習は、まずオンライン教材で学ぶ、もしくは書籍を写して学んでみるなどして、実際のサイトを見ながら真似をしてみると良いでしょう。
おすすめ教材
[オンライン教材]
Progate
Progateはプログラミング初心者を対象としたオンラインのプログラミング学習サービスです。様々な言語の基礎を学ぶことができます。わかりやすいスライドや、環境構築不要で学習を開始できることで人気のサービスです。
HTML・CSSは初級編・中級編・上級編とあり、初級編は無料で学習することができます。
ドットインストール
ドットインストールもProgateと同じく、オンラインでプログラミングが学べるサービスです。
こちらは１セクション３分程度の動画を視聴しながら学習を進めていく形になっています。
無料プランでは、HTMLの基礎、CSSの基礎、そして実際に基礎知識を使ってサイトを作るところまで学習ができます。細かなCSSの知識と実践については有料プランへの登録が必要です。
[書籍]
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
出版社：SBクリエイティブ（2019/3/16）
この本は、知識がゼロの人でもHTML・CSSの基本が体系的に理解できるようにテクニックだけでなく「なぜ」「どのように」などの観点が散りばめられています。また、Webサイトを作る際に知っておくと便利なツールについても載せてあり、入門にはぴったりの一冊でしょう。
世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書
出版社：技術評論社(2019/3/1)
この本ではHTML・CSSの基礎からさらに一歩踏み込んで、公開や管理の仕方までを解説しています。GoogleAnalyticsの説明などもあり、Webサイトの制作だけではなく運営の基礎までをも学べる一冊です。Progateやドットインストールの次か、２冊目の入門書とするのがおすすめです。
JavaScript
JavaScriptは、ブラウザでメッセージボックスを表示したり、ページ内のHTMLやCSSを変更したり、カレンダーを作成したりするなど、様々なことができるプログラミング言語です。HTMLとCSSに、JavaScriptを組み合わせることによってページに動きをもたせたり、様々なコンテンツを作ることができます。ほとんど全てのWebサイトで、JavaScriptが使われているといっても過言ではないほど、重要な地位を占めている言語です。
おすすめ教材
[オンライン教材]
Progate（再掲）
ドットインストール（再掲）
JavaScriptもProgateやドットインストールで基礎を学ぶことができます。もう少し詳しく学びたい方は、有料コースに登録するか、書籍を使うと良いでしょう。
[書籍]
スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)
出版社: インプレス (2018/6/22)
「ふりがな」プログラミングシリーズは、コードの読み方を「ふりがな」と「読み下し文」で示してくれる、非常にわかりやすい書籍です。内容は基礎的な部分にとどまりますが、初めの一冊として基礎文法やコードの読み方を学ぶのに適しています。もっと深く学びたい方は、他の書籍も参考にして深めていくと良いでしょう。
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
出版社: 技術評論社; 改訂新版 (2016/9/30)
すでにある程度JavaScriptについて理解している場合や、２冊目の書籍としては『JavaScript本格入門』がおすすめです。JavaScriptを本格的に学ぶならこれ、という評判を聞くことも多いベストセラーです。
基礎的な文法にとどまらず、場面別でのコードの書き方の指針や、言語仕様にまで触れられており、JavaScriptについて知識を深めるのに良いでしょう。
データベース・SQL
本格的なWebアプリを作ろうとするなら、データベースは欠かすことができない存在です。データベースとは、データを特定の条件に基づいて集め、使いやすいように整理して保存したもののことを指します。SQLとはデータベースを操作するときに使われる言語です。
おすすめ教材
[オンライン教材]
ドットインストール（再掲）
[書籍]
出版社: 翔泳社 (2015/2/13)
データベースとは何か？という基本的な問いについて、データベースに関する基本的な用語解説を交えつつ学ぶことのできる本です。2015年発売の本なので、一部古くなってしまった情報もありますが、データーベースとはどんなものかについて学ぶには非常に良い入門書でしょう。
出版社: 翔泳社; 第2版 (2016/6/17)
オープンソースのデータベース管理システムであるpostgreSQLを使って、インストールからSQLの使い方まで、手を動かしながら学ぶことのできる一冊です。主要なデータベース管理システム間の違いや、アプリケーションからデータベースへと接続する場面についても触れられており、非常に内容の濃い一冊です。上で紹介した『おうちで学べるデータベースのきほん』の次に学ぶと良いでしょう。
Git/GitHub
Gitはファイルのバージョンを管理するシステムです。チームで使う場合はGitHubなどのGitホスティングサービスというものを使ってチームでファイルやソースコードを管理していくことになります。
しかし、Git/GitHubを使いこなすには少しばかりの慣れが必要です。
以下で紹介する教材を使って、Gitの操作やGitHubの使い方を知りましょう。
おすすめ教材
[オンライン教材]
ドットインストール（再掲）
Learn Git Branching
https://k.swd.cc/learnGitBranching-ja/
価格：無料
このサイトはGitのブランチという機能について、ゲーム形式で学ぶことのできるサイトです。ブランチ機能に限られてはいますが、ビジュアル的に操作を理解していくことができます。日本語に対応しており、会員登録等も必要なく使えるので、気軽に試してみてましょう！
[書籍]
出版社: シーアンドアール研究所 (2017/4/21)
Gitは使ったことがない。黒い画面にコマンドを打って・・・という操作は苦手。
そのような方におすすめなのが、『わかばちゃんと学ぶ Git使い方入門』です。
この本では、PushやPullをはじめとするGitの基本的な概念についてマンガ形式で楽しく学ぶことができます。また、SourceTreeというGUIを使って学ぶので、コマンド入力が苦手な方にも抵抗感が少なく、導入本としてオススメでしょう。
いちばんやさしいGit&GitHubの教本 人気講師が教えるバージョン管理&共有入門
出版社: インプレス (2018/12/14)
この本は、上で紹介した「わかばちゃんと学ぶ Git使い方入門」とは違い、CUIでのコマンド入力をメインにGitの使い方を学んでいきます。また、GitHubFlowというGitHubにおけるGitの運用手順の一つなどにも触れていたり、コンフリクトを解消するといった、チーム開発におけるGit/GitHubの項目にも触れられています。Gitを本格的に学んでみようという人にオススメです。
まとめ
今回の記事では、Web開発者を目指すなら知っておかなければならない基本的なWeb知識のうち
- HTML,CSS
- JavaScript
- データベースやSQL
- Git/GitHub
に関するおすすめのWebサービスや書籍を紹介しました。
取り上げた全ての教材をやる必要はありませんが、これらの分野に関してそれぞれ入門レベルは目を通しておくことをおすすめします。
次回の記事では
- Linuxやシェル、シェルスクリプト
- ネットワーク
- セキュリティ
について学べるおすすめサービスや教材を紹介していきます！
プログラミング言語・フレームワーク以外の知識もしっかり学んで、できるWeb開発者をを目指しましょう！
（後編はこちら「Web開発者を目指すなら知っておきたい基礎知識とおすすめ教材（後編）」）
お知らせ
TechCommitではメンバーを募集しています！
記事のようなおすすめ技術書の情報交換から、雑談、技術についての教えあい、毎日のオンラインもくもく会、現役エンジニアが開催する週末勉強会などをはじめとする様々なことができる相互扶助コミュニティです！
TechCommitで一緒に切磋琢磨しませんか？
独学が不安、勉強仲間が欲しいという方もぜひ参加をお待ちしております。
