※JavascriptだけでWebサービスを作るチュートリアルです。ProgateでHTML,CSS,Javascriptを学んだ人にオススメしています。

Reactとは？

プログラミングを最近始めた人の中では「Reactって何？」ってなる人も多いはず。僕も一年以上プログラミングをホソボソと学んでますが、
Reactの実態を知ったのはつい最近です。Reactは、facebookが開発しているウェブサイトの見た目を作るためのライブラリ。javascriptをベースにした便利なツールです。汎用性が高く、色んなものを作れます。

Reactで作れるサービス

Reactで作られたウェブサイトで有名なのはNetflixやinstagramです。JavascriptでそういったWebサービスが作れるなんて不思議ですよね。僕は、progateでjavascriptを学びました。その時は、jQueryの印象が強く、ウェブサイトに動きをつけるだけの装飾的な言語だと思ってました。でも実は、フロントエンドもバックエンドもかける魔法のような言語です。

最近では、Reactをつかったスマホ開発用フレームワーク「React Native」でiOSとAndroidのアプリを開発している企業も増えています。ProgateもReact Nativeでスマホアプリを開発しているそうです！（内緒）凄いですね！

チュートリアルについて

このチュートリアルでは、javascriptでWebサービスを作れるようになるための基礎知識を一緒に手を動かしながら学びます。最初は基礎をマスターすることから始めるので、「Hello World」をひたすらいじります。

そして大体の要領が掴めたら、チュートリアルのメインである簡単なウェブサイト(NekoTube)を一緒に作っていきます。簡単と言いましたが、Reactを初めて触る人にとっては、かなり密度の濃い演習になるはずです。

最終目標物: NekoTube（仮）

youtubeのAPIを利用して、猫の動画をひたすら検索するWebサービスです。検索バーに文字を入力するたびに、youtubeの情報をインターネット上から取ってきて、リアルタイムに検索結果を表示します。最初の目標物としては、そこそこ作りがいのあるものだと思います。また今回は猫に絞っていますが、個人でInuTubeとか関ジャニVideoとか色々派生できると思います。

注意：NekoTubeの作成を一緒に進めていくチュートリアル後半部分は、有料(500円ぐらいの予定)です。

できるようになること
・プロジェクトを０の状態から自分のパソコンで始めること
・ComponentやState等React特有のコンセプトを理解すること
・ネット上からデータを取得して、ページに表示すること
・猫の動画にやたらと詳しくなる

できるようにならないこと
・Webサービスを最後まで完成させて、実際にローンチすること。
・Reduxの導入

どちらも次の企画「チュートリアル[初級編]」でカバーする予定です。

2018年5月の段階で最新版であるReact v16を前提として進行します。

背景

僕がこのチュートリアルを作ろうと思った理由は２つ。

１.React.jsはwebサービスを開発する上で世界的に人気のライブラリであるのに日本語で体系的に学べるサービスやウェブサイトが少ない。

2. Javascriptでwebサービスを開発できるということをより多くのプログラミング初心者の方と共有したかった。（特にprogateやdotinstallで学んでいる人たち）

チュートリアルの対象者　

プログラミング初心者の方を対象にしています。具体的には「ProgateでHTML,CSS,Javascriptを学んだけど、次どうしようかなー」ぐらいの方を想定しています。なので開発に慣れてる人にとって当たり前の部分も説明していく予定です。

チュートリアルを進めるのに必要な知識

今回の開発ではHTML, CSS, Javascript, Command line, テキストエディターの基礎知識が必要です。自信がない方は、下記のコースにチャレンジしてから、このチュートリアルに参加するのもいいかもしれません。「そんなのいいから、はやく始めろ！」という人は、スキップしてください。

HTML・CSS
Progate全コース(実践編を除く) https://prog-8.com/languages/html
Bootstrap 4入門 [ドットインストール]
https://dotinstall.com/lessons/basic_twitter_bootstrap_v5

Javascript
Progate全コース
javascrip入門[ドットインストール] https://dotinstall.com/lessons/basic_javascript_v2

任意→ 　ES2015(ES6) 入門[Qiita]
https://qiita.com/soarflat/items/b251caf9cb59b72beb9b

※ES6は、javascriptの書き方のバージョンみたいなものです。絶対必要な知識ではありませんが、React開発で当たり前のように使われるので、目を通しておくと役に立ちます。

Command line
Command Line 基礎編[Progate] https://prog-8.com/languages/commandline

テキストエディターとChromeブラウザーの準備
HTML・CSSの学習環境を整えよう[ドットインストール]
macOS編　https://dotinstall.com/lessons/basic_pcsetup_mac
windows編　https://dotinstall.com/lessons/basic_pcsetup_win

Git(任意)
Git Ⅰ[progate] https://prog-8.com/languages/git

【GitHub超初心者入門】この前初めてGitHubを使い始めたエンジニア見習いが書くGitHubの使い方と実践～とりあえず一緒に動かしてみようぜ！～
https://qiita.com/nnahito/items/565f8755e70c51532459

チュートリアル[超入門]の配信スケジュール・目次

5月上旬配信予定 （配信済み）↓ ↓ ↓
#0 チュートリアル概要
#01 ブロジェクトの始め方
#02 Componentについて
#03 Propsを使ってみる
#04 Stylingの仕方
#05 Stateを使った情報管理

#BONUS 　僕が知っておきたかった難しい単語

5月中旬配信予定（配信済み） ↓ ↓ ↓

ここから先（#06-#15）は一つのnoteとして有料（５００円→９８０円）で配信する予定です。

# 06 新しいプロジェクトを始める
# 07 ヘッダーの作成
# 08 Youtube APIを使う
# 09 ライフサイクルメソッドについて
# 10 Bootstrap4を使ってみる
# 11 Bootstrap4で動画再生画面をつくる
# 12 Google Fontsの導入
# 13 動画を選ぶ・検索するevent handlerの作成
# 14 チュートリアル後半部分の振り返りとその後

次のチュートリアル

配信予定未定(React.js チュートリアル [初級]) ↓ ↓ ↓

#0 チュートリアル概要
#01 Reduxのコンセプトを理解する
#02 Reduxを導入する(Reducer編)
#03 Reduxを導入する(Action編)
#04 Redux用のデベロッパーツールを準備する
#05 Reduxを整理する
#06 Redux thunkを使う
#07 Firebaseを使ってみる
#08 Firebaseでログイン
#09 ルーティングを学ぶ
#10 デプロイしてみる

注意：配信のタイミングやコースの内容を、予告なしに変更する可能性があります。ご了承ください。

おすすめ

最初のレッスン

おまけ

僕の自己紹介です！

僕のTwitterアカウントです！

質問があればいつでもDMください。このチュートリアルがみなさんの為になると嬉しいです。よろしくお願いします。

山口夏生