【300時間でやりきる!】Webエンジニアになるまでに学習すべきこと全部まとめました-フロントエンド編

この記事ではプログラミングを全く知らない状態から「ある程度読める・ちょっと書ける」状態になることを目指します。

 

前回の基礎編ではPC、Webの仕組み、データベース、セキュリティなどに関してなにをすればいいか?を解説しました。今回はフロントエンドの言語、マークアップ言語についてお話しします。おそらくすでに学習済みの内容もあるかもしれません。そんな方へ向けて、見落としがちな学習ポイントについてもそれぞれ解説します。エンジニアとして働くにあたって、転職活動にあたってやるべきことはなにか?という視点から、学習内容を決めましょう。

 

おさらいとして、このシリーズ、記事でお話しすることは以下の通りです。

 

話すこと
  • Webエンジニア(フロント、サーバー)になるためのステップ
  • どんなステップを踏めばいいのか
  • 各ステップにおいてなにをすればいいのか、どんな本を読めばいいのか
  • 独学において注意すべきこと、大事なことはなにか
  • 振り返って出来る/出来ない のチェックリスト

 

逆にこの記事では詳しく話さないことは以下のとおりです。

話さないこと
  • 細かいプログラミング言語、技術、仕様の話
  • Web制作スキルに関すること、デザイン関連など
  • お金をとって教材を公開すること

 

そして、全行程として以下を解説します。基礎編、サーバー編はそれぞれをご参照ください。

  • PCの仕組み:20時間
  • Webの仕組み:30時間
  • データベース(DB):5時間
  • SQL(基礎):20時間
  • セキュリティ(基礎):10時間
  • HTML,CSS(基礎〜応用):30時間
  • JavaScript(基礎):30時間
  • git, github:5時間
  • jQuery(基礎):20時間
  • React.js(基礎〜実践):30時間
  • Ruby(基礎):20時間
  • Ruby on Rails(基礎):50時間
  • アルゴリズム(基礎):10時間
  • エンジニアの仕事、大事なこと:1時間
  • かんたんに何か作って公開してみる:20時間

 

もしかしたら既に学習をしていたり、仕事をされている方にとっては当たり前!というところもあるかもしれません。そういう方は各ステップを飛ばしていただいて構いません。

 

フロントを学習にあたって大事なこと

this-is-point

学習に入る前にフロントエンド学習にあたって大事なことを3つお話しします。

 

一つ目は、HTMLやCSSは最低限読める、書ける程度で十分ということです。プログラミング初学者によくある勘違いですが、これらの言語がいくら書けてもエンジニアとして評価はあまりされません。ただし、WebデザイナーやWebサイト制作の仕事の場合には、評価が厳格な場合もあります。CSSのスタイルや、HTMLのタグをどれを使うべきか、など細かい「べき」がありますが、最初からそれを完全に理解する必要はありません。

 

二つ目は、言語仕様を知ろうとする初学者は少ないということです。プログラミングを勉強するときにリファレンス、原典を参照する人は少ないです。確かにわかりにくいですし、体系的に学習するのには向いていません。それでも、JavaScriptのMDNだったり、HTML5の仕様だったりを一通り読むことをオススメします。マイナーな文法を知ることができたり、ハマりがちなポイントをあらかじめ察知したりできます。フレームワークで書くことが多い昨今ですが、意外と技術・言語仕様でできる/できないがあったりするので早いうちからリファレンスに触れておきましょう。

 

三つ目は、デザインや細かいところはフレームワークに任せようということです。最初にお話しした通り、CSSを極めて細かいデザインスタイルを書くのもいいのですが、プログラミング初学者のうちはBootstrapなどのフレームワークや、ライブラリを使って良いと思います。その方が何倍も早く「良い感じのデザイン」が出来上がりますし、何よりそれを使って現場でバリューを出すことができます。じゃあ、デザインの勉強はしなくていいの?ということに関しては、そうではないと思います。フロントエンドエンジニアとして就職するのであれば、最低限のデザインの基礎は抑えておきたいです。しかし、今回はそこには触れません。興味がある人は、UI/UXデザインの本を1,2冊読んでみてはいかがでしょうか。

 

HTML,CSS(基礎〜応用)

早速、HTML/CSSについてです。HTMLとCSSとは何か?簡単にいえば、「HTMLが骨格・CSSが肉」のようなものです。例えばいまご覧になっているこのWebサイトの記事ですが、一見するとたくさんの文字や段落と、その装飾(色、大きさ、太さ…etc)がありますよね。文字やブロックと呼ばれる段落などはHTMLという骨格のなかで作られています。一方色や文字の大きさなどはCSSという装飾で彩られています。もしHTMLがなければCSSは装飾する対象がないので何も意味がありませんし、CSSがなければただの文字列だけになってとても見にくい記事になります。

 

HTMLとCSSはセットで語られることが多いですが、プログラミング言語というよりも「マークアップ言語」と呼ばれています。データを扱うのではなく、文字や色などを彩ることに特化しているためです。そのため、HTML/CSSではどうやって文章や画像、コンテンツを表示するか?ということが中心になります。ただ表示するだけでなく、コンテンツを動かしたりさせることもできます。

 

HTML/CSSに関してはまずはProgateをやりましょう。

入門HTML & CSS  Webページの 見た目をつくる言語 – Progate

 

初歩の初歩から実践的にWebサイトのマークアップをするところまでをWebブラウザ上で実際にコードを書きながら学習できます。一部をのぞいて無料でできます。Progateは初心者にはとてもオススメですが、何周もする必要はありません。特にHTML/CSSに関しては2周で十分です!それ以上は無駄なのできっぱりとやめましょう。

 

Progateで基礎を学習したら、早速実践に入りましょう。文法に不安があっても大丈夫です。とにかくアウトプットが大事です!次はドットインストールで実際にWebサイトを制作してみましょう。

実践実践!アプリ紹介ページを作ろう – ドットインストール

 

Web制作という観点でいえば以下の記事がいろんな観点からHTML,CSSの書き方を説明してくれているので参考にしましょう。

実践1時間で作るホームページ

 

HTML/CSSの学習で大事なことは、基礎文法を理解して「調べながら書ける状態」になることです。おそらく他の言語に比べて習得スピードは早いはずで、人によっては10時間くらいで十分かもしれません。分からないところはググりながら、Webサイトを制作するくらいまではできるようになりたいところです。

 

このセクションの目標

調べながらでもいいのでHTMLとCSSだけで一ページだけのWebサイトをつくることができる。

 

JavaScript(基礎)

続いてはJavaScriptです。HTML/CSSがマークアップだけなのに対し、JavaScriptはデータを扱う言語です。サーバーからきたデータを処理したり、逆に入力された値をサーバー側の言語に渡す役割をします。他にも、CSSを補佐するようにユーザーの入力、操作に応じてコンテンツの表示を変えることもできます。フロントエンドにおいてはJavaScriptを触らないことがないくらいに世界的なプログラミング言語になっています。

 

ただしJavaScriptという言語を使いつつも、実際にはライブラリやフレームワークとよばれるものを使うことが一般的です。フレームワークとは何か?それは、共通の処理をフレームワークがラップしてくれることで、コーディングが簡潔に、楽になるもののことです。JavaScriptのライブラリとしてはjQuery、フレームワークとしてはReact.jsやVue.jsなどが人気です。ここでは詳しいことは理解する必要はありませんが、JavaScriptというプログラミング言語のうえに、いくつかのライブラリやフレームワークがあるのだと覚えておきましょう。これらもまた後ほど学習します。

 

JavaScriptの基礎文法についてもやはりProgateから始めましょう!

入門JavaScript 多様な可能性を秘めた フロントエンド言語 – Progate

 

↑もやはり2周程度で十分です。基礎的な文法が理解できたら、あとはアウトプットしまくりましょう。JavaScriptだけで簡単な計算機アプリ一つ作るのでもとても勉強になります。具体的にどうやってやればいいのかわからない…という方は以下のページでコードを一行ずつ説明しながら計算機アプリの作り方を解説しているので参考にしましょう。

入門イヌでもわかるJavaScript講座 – 計算機アプリの作り方

 

こちらのWebサイトでは計算機の他にも「つくってみた」系の解説がたくさんあります。参考にしつつ、こうやってJavaScriptを書けばいいのかな、というのをつかみましょう。4,5つほど読めば十分だと思います。

実践編イヌでもわかるJavaScript講座

 

続いて本番、アウトプットです。ドットインストールで文法をさらっと復習して、実際に手元の環境でアプリケーションを作ってみましょう。

実践編はじめてのJavaScdipt – ドットインストール

 

ドットインストールは動画なので、Progateのように思った通りにコードが動かないかもしれません。しかし、それも勉強の一つです。ここで大事なことを一つお話しします。それは「エラーコードを読め!そしてググって、理解して、間違いのあたりをつけろ!」です。これはとても大事なことです。これまでのHTMLやCSSだとあまり間違えてもすぐにミスに気付けたと思います。しかし、JavaScriptをはじめとして多くのプログラミング言語では間違えればエラーになります。エラーが出ることは実はありがたいことなのですが、最初のうちは混乱してしまうと思います。それでも落ち着いて、英語をそのままコピペで検索して、なぜそれがでているのか?どこででているのか?そしてどうやったら治りそうか?を確認するクセをつけましょう。

 

このセクションの目標
  • ローカル環境(手元のPC)でJavaScriptのコードを書けるようにし、またそこで簡単なアプリケーションを2,3つ作って動かす。
  • エラーが出てもそれを対処できるようになる。

 

git, Github

次は、プログラミング言語とは少し離れて、「Git」というものについて学習します。聞いたことない方へ説明すると、Gitとはバージョン管理システムと呼ばれるものです。例えば、チームのAさんとチームのBさんが書いているコードがあります。Aさんはトップページを編集していますが、Bさんも同じくトップページのソースコードを編集したいとします。その時に、同じ箇所を二人が編集してしまうとどうなるでしょう?最終的に二人のコードを合わせたときにコードがぐちゃぐちゃになってしまうかもしれません。また、違うケースでいうと、Aさんはが1週間かけて書いたコードに大きな変更があり、途中で書いた状態にファイルを戻したい、となったとします。その時に、「戻る」で戻ればいいですが普通はそんな前のコードの状態にまで戻すことはできません。

 

これら二つの状態を解決してくれるのがバージョン管理システムというものです。PRGゲームでいうところのセーブポイントをファイルに対していくつも置くことができます。また、二つのファイルが同じ箇所を編集していることがわかったら、すぐにファイルを同期せずに、被っている箇所を明確にして、修正してセーブすることができます。

 

このような機能を提供してくれるのがGitというものです。詳しくは以下の記事の入門編を参照してください。

必須サルでもわかるGit入門

 

ところで、なぜGitを勉強すべきなのでしょうか?それはチームで開発するにあたってはほぼ必須だからです。ほぼ、といったのは実はバージョン管理システムにはGit以外にもあり、CVSやSubversionなどがあります。しかし、ほとんどの会社、チームではGitが使われます。その理由の一つにGithubがあります。

 

Githubはコマンド一つでバージョンの同期を簡単に行えます。Web開発ではもはや常識、という存在になっています。使い方を覚えておいて損はありませんし、最後に作るポートフォリオもGithub上に置いて置くことで、あなたの作品として書いたコードの履歴含めて公開することができます。ゼロから実践まで学ぶなら以下の記事がおすすめです。

 

Githubはコマンド一つでバージョンの同期を簡単に行えます。Web開発ではもはや常識、という存在になっています。使い方を覚えておいて損はありませんし、最後に作るポートフォリオもGithub上に置いて置くことで、あなたの作品として書いたコードの履歴含めて公開することができます。ゼロから実践まで学ぶなら以下の記事がおすすめです。

必須今さら聞けない!GitHubの使い方【超初心者向け】

 

Githubはリポジトリをいくつでも無料で作れるので、勉強のなかで書いたソースコードを都度push(アップロード)しておくことをオススメします。自分がどれだけ勉強したのか?だいたいどれくらいの実力なのか?を公開するこたできます。

 

このセクションの目標
  • Gitの仕組み、Gitコマンドを覚える
  • Githubにリポジトリを作り、PRをたて、commitをmergeするところまでできるようになる

 

余談:スクール行くべき?行かないでいい?問題

list-image

ここで少し脱線しますが、あなたはプログラミングスクールに通っていますか?あるいは通おうと思っていますか?

プログラミング学習において、スクールに行くべき派/行かなくていい派がいます。私個人の考えとしては、「お金と時間に余裕があるならスクールに行った方がいい」という考えです。具体的には予算の3倍くらいの貯金があるなら、行ってもいいと思っています。

 

その理由は…

  • スクールは強制力があるので独学より挫折しづらい
  • 就職まで面倒を見てくれる場合が多いので就職活動がスムーズ
  • 勉強を一緒にできる仲間を見つけやすく、競争しながら実力がつく

などなどです。

 

確かに数十万円とかなり高額です。でも、それに値するスクールはいくつかあります。私自身もスクールに通っていましたが、通っていたこと自体は後悔していません。いいスクール、よくないスクールは確かにあるので、それをしっかりと見極めましょう。

 

一方、あまり余裕がないという人はやはり独学で頑張るべきです。この記事のシリーズでは300時間を目安としています。1日3時間勉強しても3ヶ月ちょっとかかります。土日をすべて使ってやっとくらいだと思います。それでもかかるお金は本や学習サービスあわせて2,3万円くらいです。大事なことは

  • 正しい方法を知って、それを実践すること
  • 本や学習サービスにかかるお金を惜しまない
  • できれば友人や知っているひとと一緒に進める

だと思います。私も正しい方法を知っていれば、独学で進めていました…。エンジニアになって、現場でどんなことが求められるのか?それに対してなにをすべきか?をある程度理解したからこそ、この記事を書くことができています。現役エンジニアの目線から必要なことをまずは集中してやってみてください!

 

人気記事【2019年最新版】Twitterで評価の高いスクール5選

 

jQuery(基礎)

さて、次はJavaScriptを拡張してくれるライブラリのjQueryについて勉強します。と、その前に、ライブラリやフレームワークについてすこし解説します。それらは似ているようで少し違います。どちらもコーディングをスムーズにしてくれるものです。JavaScriptで書こうとすると長くなってしまうような処理でも、jQueryであれば短く分かりやすく書くことができたりします。そのような一種の新しい機能を提供してくれるのがライブラリです。

 

どうやってjQueryを使うのか?簡単です!jQueryをインストールするだけです。正確に言えば、scriptで外部ファイルとして取ってくるか、あるいはパッケージ管理ツールのnpmでインストールするなどです。

 

ここであたらしい言葉がでてきました。npmとは何でしょうか?一般的にパッケージ管理ツールと呼ばれるもので、Node.js製のパッケージを管理するものです。Node.jsとは何でしょうか?…調べるごとにわからない単語がでてきますね。笑 ここに関しては以下の記事が分かりやすいのでnpmについても概要を掴んでおきましょう。

参考便利なパッケージ管理ツール!npmとは【初心者向け】

 

このnpmを使ってjQueryをインストールするところから始まります。といっても最初文法、書き方などを覚えるのはProgateからで大丈夫です。環境構築せずに書き始めましょう。

入門編jQuery 効果やアニメーションを実装できる JavaScriptライブラリ – Progate

 

基礎文法をだいたい理解しましたか?続いては、ドットインストールで実践です。

実践編jQuery入門- ドットインストール

 

ちなみにjQueryは世界中の多くのWebサイトで使われています。しかし、少し古い技術の一つです。最近ではReact.jsやVue.jsというライブラリを使ってJavaScriptを書くことが多いです。それでも、就職にあたっては「読める、ちょっと書ける」程度になっておきましょう。いまだに多くの会社ではjQueryを使っていたりしますし、フロントエンドエンジニアの場合常識のようなところがあります。

 

 

jQueryをローカル開発環境で動かせるようになる。また、簡単なWebサイトにjQueryでアニメーションをつけられるようになる。

 

React.js(基礎〜実践)

フロントエンド編では最後の章です。jQueryと同様にReactを使うことでJavaScriptをよりスムーズにコーディングできるようになります。

 

ちなみに、React.jsともう一つVue.jsは最近人気のフレームワークで、React.jsに比べると初心者でも書きやすい印象です。ただ、日本国内の採用実績でいえばReactの方が多いため今回はReactを学習の対象としています。ただし、好みの問題でReactの代わりにVueをやる、でも問題ないと思います。どちらも出来なければいけない、ということはありません。どちらか一つ書けるようになりましょう。

 

最初に文法や書き方は…そうです、やはりProgateです。

入門React – 世界的に人気上昇中の サイトの見た目を作るJavaScriptライブラリ

 

続いて実践は以下の公式のReactチュートリアルを1,2周しましょう。

実践編チュートリアル:React の導入

 

いわゆる丸ばつゲームをReactを使って作っていきます。ここで「コンポーネント」という単語が何度か出てきます。ReactでもVueでもコンポーネントという単位でアプリケーションのフロントを作っていきます。例えば丸ばつゲームで言えば、一つ一つのマス、丸やばつの記号、9つの大枠、そしてテキストなどすべてがコンポーネントにあたります。このコンポーネントの単位をしっかりと考えて作ることがこれからは求められます。

 

Reactの勉強からはじめて「設計」について考える必要がでてきます。設計手法はたくさんあり、アプリケーション、エンジニアの好みも含めてたくさんの選択肢があります。それでも、「いい設計」「よくない設計」があるので、勉強の合間に設計思想、手法について勉強しておきましょう。オブジェクト指向はその最たるものです。

 

オススメ本はこのあたりです。

オススメ本(1)オブジェクト指向でなぜつくるのか

オススメ本(2)エリック・エヴァンスのドメイン駆動設計

オススメ本(3)Java言語で学ぶデザインパターン入門

 

オブジェクト指向についてはプログラミング全般の基礎ともいえる考え方で、エンジニアとしての共通概念としても覚えておくべき考え方です。是非一度目を通しておくことをオススメします。

 

Reactについてさらに勉強するならこのあたりを勉強するといいでしょう。

 

Reactそのものを勉強するよりも、コンポーネントの作り方や設計についてあわせて勉強することをオススメします。JavaScriptがそれなりにかければReactの習得はスムーズに進みます。しかし、はじめ実際に書いてみるとどのようにコンポーネントを分けるべきか、ということに悩みます。実践のなかで「どういうパターンならどの設計がいいのか」を考えながら進めるとさらに一段階上にいけます。

 

また、Reactを勉強したら、Reduxについても勉強しておきましょう。以下の記事を参考にしつつ、自分でつくったReactアプリケーションにReduxを導入してみましょう。

入門Redux入門【ダイジェスト版】10分で理解するReduxの基礎

 

 

Reactでコンポーネント設計を意識しながら書けるようになる

 

まとめ

フロントエンド編は以上です!HTML/CSSからはじまって、Reactのコンポーネント設計までおさらいしました。インプットだけでなく、実践編もしっかり学習しましょう。本をたくさん読んだり、Progateを何周もするのではなく、コードを書いて、実際に動かさないとほとんど意味ありません!

 

フロントエンドだけでも十分それっぽいものが作れますが、やはりサーバーサイドも一通り勉強しておきましょう。フロントエンドエンジニアやWeb制作の仕事でもサーバーサイドがかけておいた方がいいです。

 

そして、最後サーバーサイド編はこちらから!

【300時間でやりきる!】Webエンジニアになるまでに学習すべきこと全部まとめました-サーバーサイド編

2019年9月28日

 

 

 

 

人気記事【2019年最新版】Twitterで評価の高いスクール5選

 

人気記事【未経験あり】いまWEBエンジニアに人気転職サイト4選