React.js チュートリアル[超入門] #06から#14(最終章)
前半ではReact.jsの基礎を学びました。後半では、YouTubeAPIを使って猫動画検索サービス「NekoTube」を作っていきます！他のReact.js用チュートリアルは「to-doリスト」や「カウンター」などのシンプルな作品をテーマにすることが多いので、敢えてより複雑で実践的な動画サイトを作ることにしました。完成物がこちら。
このYouTubeAPIを使ったチュートリアルは、udemyで公開されているStephen Grider氏の「Modern React With Redux」からインスピレーションを受けて作ったものです。似た様な成果物を作りますが、React初心者が必ず苦戦するであろうライフサイクルメソッド周りの説明や、Google Fontsや猫動画検索機能等のオリジナル要素も満載です。何より全部日本語で書かれています。笑
このチュートリアル通りに作っていくと、下記のようなことができるようになります。
・チュートリアル[超入門]の前半で学んだ知識を使って、サービスを一から開発する。
・Google fontやBootstrap４, youtube APIなど、便利な外部のツールを上手く使いこなす。
・Stateとinputタグ利用して簡単なフォームをつくる。
どれも実際の開発に役立つ便利なスキルです。一緒に頑張りましょう。
また、前半と同じように途中でわからなくなったり、自分のプロジェクトファイルに以上が出るようになったら、いつでも僕のgithubのリポジトリーから各レッスンで完成したフォルダーがダウンロード（もしくはgit clone）できますので、必要であれば使って見てください。各フォルダーは、super-easy-tutorial-〇〇というリポジトリに保存されてます。
# 06 新しいプロジェクトを始める
では早速、React.js チュートリアル[超入門]の後半部分を始めます。
このレッスンの目標
・目標物の確認
・プロジェクトの作成
目標物の確認
設計図をコンポーネントレベルで分けて、NekoTubeが実際にどのように機能するのか確認していきます。
まず設計図をご覧ください。
これを下のように構築していく予定です。# 03でComponentで紹介したモデルよりもシンプルになっています。これ以上細かくComponentを分けることは今回しません。
実装する機能一覧：
①ページを開くとデフォルトで「きゅうり」というキーワードに関連した猫動画が表示される。
②検索バーを変更すると、その文字に関連した猫動画を取得して、表示する。
③List上にあるItemをクリックすると、その内容がVideo componentに反映されて、再生可能になる。
プロジェクトの作成
では一番初めのレッスンでやったのと同じ要領で、進めていきましょう。今回は、node.jsとnpmがインストールされている事を前提に進めます。まず、前半で作った作業用フォルダー（react_tutorial）にいることをターミナルで確認してください。その後に、おきまりの「create-react-app アプリ名」コマンドを実行します。今回はnekotubeという名前にしました。
// 今いるフォルダーの確認コマンド。
// 僕の場合は、/Users/natsuking/Desktop/react_tutorialとかえってきます。
＄ pwd
$ create-react-app nekotube無事コマンドが実行されたら、作成されたプロジェクトが正常に機能するか確かめます。プロジェクトフォルダーに移って、サーバーを立ち上げてください。
$ cd nekotube
$ npm startそうするとhttp://localhost:3000/ でデフォルトのReact.jsアプリが確認できると思います。前半で何回も何回も見てきた例のページです。
今回は、このページを全く使わないので、どんどん削除していきます。テキストエディターでフォルダーを開いてください。App.jsの<div className="App">内の全てを削除します。
続いて、App.cssの中身を消します。logo.svgは、必要ないので、ファイルごと削除してください。
ほぼまっさらな状態にすることができたので、次はプロジェクトに必要なフォルダーとファイルを作成していきます。
以下のようにsrcフォルダー下を変更してください。たくさんのフォルダーとファイルを生成するので、正しい層に配置されているか確認しながら進めましょう。この時点で中身はまだ必要ありません。
今回はBootstrapを導入するのでCSSを書く機会はありませんが、cssとjsファイルはセットで生成することが実際多いので練習用として敢えて作っています。
フォルダーの配置の仕方やファイルの名前の付け方は一つではありません。もし興味がある人はGoogleで検索してみるのがいいでしょう。
これで必要なファイルは全て揃いました。今回のレッスンは以上です。デフォルトで生成されたファイルを自分用のプロジェクトを構築するためにまっさらな状態に戻しました。自分でプロジェクトを始めるときは必ず通るステップなので覚えておきましょう。
# 06 新しいプロジェクトを始める
✔︎ 目標物の確認
✔︎ プロジェクトの作成
# 07 ヘッダーの作成
このレッスンではいよいよヘッダー部分を作成していきます。今回の時点では、stylingを行わないので、かなり素朴なデザインになる予定です。
このレッスンの目標
・枠組みをつくる
・<input />タグの値を取得する
・<input>タグの値をstateで管理する
・Controlled components を完成する
枠組みをつくる
ヘッダー部分のJSXを編集していきます。headerには様々な機能をつけていくため、class componentを作っていきましょう。作成方法は前半部分でh総会した内容と変わらないので省略します。
見やすいように、style={{textAlign: 'center'}} を付け足しました。あとで取り除く予定です。
//Header.js
import React, { Component } from 'react';
class Header extends Component {
render(){
return(
<div style={{textAlign: 'center'}}>
<div>
<h2>NekoTube</h2>
</div>
<div>
<input />
</div>
</div>
);
}
}
export default Header;続いて、App.jsでHeader componentをインポートします。
// App.js
import React, { Component } from 'react'
import './App.css';
import Header from './components/Header/Header'
class App extends Component {
render() {
return (
<div className="App">
<Header />
</div>
);
}
}
export default App下のようになっていたら、成功です。
<input />タグの値を取得する
React.jsで生成したinputタグから情報を取得していきます。今の時点で下のように、機能していることを確認してください。
まず入力されるごとにinputのvalueを取得するevent handler を設置します。
今回はvalueの取得を確認するだけなので、console.logで表示するようにしています。コメント欄の解説にも注目してください。
//Header.js(一部抜粋)
class Header extends Component {
// valueを取得するためのevent handler
onInputChangeHandler = (event) => {
console.log(event.target.value);
}
render(){
return(
<div style={{textAlign: 'center'}}>
<div>
<h2>NekoTube</h2>
</div>
// onChangeを指定することによって、inputタグの値が変更された時に、
// event handlerが呼び出されます。
<div>
<input onChange={this.onInputChangeHandler} />
</div>
</div>
);
}
}event handlerの名前は、〇〇Handlerで統一してきましたが、それがなくても構いません。わかりやすい名前をつけましょう。
inputタグにonChangeというattributeをつけることによって、onInputChangeHandlerを呼び出すことができます。 前半部分では、ボタン要素に onClickというattributeでevent handlerを呼び出していましたね。全く同じロジックです。今回は、inputタグなのでonChangeが適当でした。
編集できたら、Chrome Developer Toolsで確認していきます。Consoleを開いた状態で、文字をinputに入力してみてください。下のようになっていたら成功です。
今回のevent handlerには、eventという引数が指定されてるのも注目です。onChangeで呼び出された要素を参照するためです。valueのみ必要だったのでevent.target.valueと指定しましたが、他にも様々な要素を取得することができます。試しにconsole.log(event.targe.value)をconsole.log(event)に変更すると下のような情報を取得できます。すべて理解する必要はありません。
<input>タグの値をstateで管理する
では先ほど、event.taget.valueで取得した値をstateで管理できるようにしていきましょう。「どうしてstateで管理するの？event.taget.valueでいいじゃん」って思うかもしれません。stateで管理するのは、inputの値が変わるたびにcomponentにその情報をリアルタイムで反映させていく為です。stateは、情報の変更を察知してcomponentを再読み込み（rendering）してくれる特徴があるのを思い出してください。
ではまずstateを初期化して、keywordという情報を保存できるように準備します。
//Header.js(一部抜粋)
class Header extends Component {
//stateの初期化
state = {keyword: ''};
onInputChangeHandler = (event) => {
console.log(event);
}
render(){
return(次はonInputChangeHandler内で、stateを更新するコードを書いていきます。
//Header.js(一部抜粋)
class Header extends Component {
state = {keyword: ''};
onInputChangeHandler = (event) => {
this.setState({keyword: event.target.value})
}
render(){
return(取得したstateの情報がリアルタイムで表示されるのを確認したいので、<p>タグを挿入します。
//Header.js(一部抜粋)
render(){
return(
<div style={{textAlign: 'center'}}>
<div>
<h2>NekoTube</h2>
</div>
<div>
<input onChange={this.onInputChangeHandler} />
</div>
//変更した部分
<p>{this.state.keyword}</p>
</div>
);
}この時点で、Header.jsはこんな感じです。確認してください。
//Header.js
import React, { Component } from 'react';
class Header extends Component {
state = {keyword: ''};
onInputChangeHandler = (event) => {
this.setState({keyword: event.target.value});
}
render(){
return(
<div style={{textAlign: 'center'}}>
<div>
<h2>NekoTube</h2>
</div>
<div>
<input onChange={this.onInputChangeHandler} />
</div>
<p>{this.state.keyword}</p>
</div>
);
}
}
export default Header;そうすると下のように、入力した内容がそのまま表示されるようになったとも思います。このプロジェクトの最後には、今表示されている文字の代わりに取得したビデオがこのようにリアルタイムで更新されるようになります。
Controlled components を完成する
この時点でNekoTubeに必要なinput周りでの挙動はすべて実装できました。しかし、本当にReact流を貫きたいのであれば、最後にstateの値とinputの値を紐付けなくてはなりません。
どういう事かというと、今まではユーザーが入力した値をHTMLタグがそれ自身で認識して表示させていました。しかしReactの世界において、変更が伴うcomponentの情報はstateだけが管理することになっています。なので次はstateがinputに何を表示させるかを伝えるようにしていきます。
このようにstateが情報を一括管理しているcomponentのことをReactでは明確に定義していて、公式ドキュメントでは以下のように書かれています。
"An input form element whose value is controlled by React in this way is called a “controlled component”."
意訳：inputのvalueを完全にstateで管理しているcomponentをReactでは、controlled componentと呼びます。
情報部分と見た目部分を完全に分けて開発するのがReactの作法です。このcontrolled componentもそのルールに従って作られたコンセプト。
今は「なんでこんな面倒なことするんだろう？」って思うかもしれませんが、これから申し込みフォームのような文字の長さを検証したり、inputやtextareaなどたくさんの要素が共存してたりする複雑なcomponentになればなるほど、stateで一括管理していくメリットが見えてきます。
ここまで長々とcontrolled componentについて、説明してきましたが、実装は驚くほど簡単です。
// Header.js
<input onChange={this.onInputChangeHandler} value={this.state.keyword} />これだけです。ブラウザーで確認して何も変わってなければ、うまくいっています。しかしこれだけでは本当に実装できたのかわからないので、this.setStateの部分をコメントアウトして実験してみましょう。
// Header.js (一部抜粋)
class Header extends Component {
state = {keyword: ''};
onInputChangeHandler = (event) => {
// コメントアウトする部分
// this.setState({keyword: event.target.value});
}
render(){ブラウザーで文字を入力しても何も表示されなくなったら成功です。コメントアウト下部分をもとに戻してください。ついでに<p>{this.state.keyword}</p>の部分ももう必要ないので消してしまいましょう。
では今回のレッスンは以上です。実際に開発を進めるとReact.jsでフォームを作るなんてこともあると思います。そんな時に、このやり方を思い出してください。
# 07 ヘッダーの作成
✔︎ 枠組みをつくる
✔︎ <input />タグの値を取得する
✔︎ <input>タグの値をstateで管理する
✔︎ controlled componentを完成する
# 08 Youtube APIを使う
このレッスンでは、Youtube APIをNekoTubeで利用するための準備を進めていきます。スクリーンショットがやたら多いレッスンです。
このレッスンの目標
・Youtube APIキーの取得
・Youtube APIキーの設置
・Youtube API Searchを使う
まずここから先に進む前に、自分のgoogle accountを持っていることを確認してください。万が一持っていない場合は、下のリンクから簡単に取得できます。
Youtube APIキーの取得
ではまずブラウザーを開いて、Googleの開発者用ダッシュボードにアクセスします。
きっと下のような画面が表示されると思います。
次にサイドメニュー左上にあるライブラリをクリックします。
そうすると下のような画面に移ります。
検索バーにyoutubeと入力すると、YouTube Data API v3という選択肢があるので、それをクリックします。
このページが表示されたら、青いボタン「有効にする」をクリックします。
ここまでで８割登録は完了です。
この API を使用するには、認証情報が必要になる可能性があります。開始するには、[認証情報を作成] をクリックしてください。
と表示されるので、横にある青いボタン「認証情報を作成」をクリックします。これによって今作っているプロジェクトがYoutube APIにアクセスするためのTokenが発行されます。
このような画面が表示されます。
①ウェブブラウザ（Javascript）②一般公開データを選びます。
選べたら、青いボタン「必要な認証情報」をクリックして進みます。
これでAPIキーを取得できました。このAPIキーをプロジェクトフォルダー内に設置していくので、コピーしてください。完了ボタンを押して終了です。キーをチュートリアルで公開していますが、基本的には誰とも共有しないよう注意してください。
もし実際の開発環境で使う予定がある方は、「キーの制限」をクリックして、セキュリティ関連の知識も補完しておいてもいいと思います。
Youtube API キーの設置
APIキーを取得するのは、そこそこ時間がかかりましたが、APIキーの設置は一瞬です。App.jsを下のように編集してください。
定数は、よく大文字で定義されます。
// App.js
import React, { Component } from 'react';
import './App.css';
import Header from './components/Header/Header';
// APIキーは自分で発行したものを代入してください。
const YOUTUBE_API_KEY = 'AIzaSyC4Zaowu05ZczH-jEwAhIs3iU1JrgKRNk8'
class App extends Component {
render() {
return (
<div className="App">
<Header />
</div>
);
}
}
export default App;Youtube API Searchを使う
Youtube API Searchは、その名のとおりYoutube APIを使ってデータを取得するためのパッケージです。早速インストールしていきます。ターミナルで以下のコマンドを実行してください。
$ npm install --save youtube-api-searchインストールが完了したらパッケージをApp.jsにインポートします。
// App.js(一部抜粋)
import React, { Component } from 'react';
import './App.css';
//ここに挿入
import YSearch from 'youtube-api-search';YSearchと書きましたが、わかりやすい名前ならなんでも大丈夫です。
名前を変更した場合は、パッケージの機能を呼び出すときの名前も揃えてください。
このAPIが実際に機能するか、試してみましょう。
下のようにApp.jsを編集してください。
// App.js(一部抜粋)
import React, { Component } from 'react';
import './App.css';
import Search from 'youtube-api-search';
import Header from './components/Header/Header';
const YOUTUBE_API_KEY = 'AIzaSyC4Zaowu05ZczH-jEwAhIs3iU1JrgKRNk8'
//ここでyoutube-api-searchを発動します。
YSearch({ key: YOUTUBE_API_KEY, term: '猫 きゅうり'}, (data) => {
console.log(data);
});
class App extends Component {
render() {youtube-api-searchは、具体的に以下のように機能します。
YSearch({ key: 自分のAPIキー, term: 調べたい動画のキーワード}, function(data){
取得したデータで行いたい処理
});取得したデータをChrome Developer Toolsから確認できるように「console.log(data);」と挿入しました。早速データが取得できたかどうか確認していきましょう。ブラウザーとChrome Developer Toolsを開いてください。
下のように表示されたら成功です！感動ですね。
ズームイン。このように、様々な情報が詰まった５個の動画を取得できました。description(紹介文)やthumbnails（サムネイル画像）等、実際にこれから使っていくデータを確認できたと思います。
今回のレッスンはここまでです。
# 08 Youtube APIを使う
✔︎ Youtube APIキーの取得
✔︎ Youtube APIキーの設置
✔︎ Youtube API Searchを使う
実際に生のデータを取得できたので、やりがいのあるレッスンだと思います。
# 09 ライフサイクルメソッドについて
前回は、YoutubeAPIでデータを取得しました。今回は、そのデータをStateで管理する方法を模索しながら、React.jsでかなり重要とされているライフサイクルメソッドについて触れていきます。控えめに言ってややこしいので、６０％理解できたら大成功です。
このレッスンの目標
・Componentのライフサイクルを知る
・ライフサイクルメソッドを学ぶ
・ライフサイクルメソッドを使ってみる
Componentのライフサイクルを知る
人間は、生まれて→成長して→老いて→死にます。これが人間のライフサイクルです（...重い！）。Componentにも同じようにライフサイクルがあります。初期化されて→読み込まれて→更新されて→破棄される、という感じです。
ライフサイクルメソッドを学ぶ
ライフサイクルメソッドとは、ライフサイクルの節目で起きてほしい処理を呼び出してくれる便利なメソッドです。
例えば、初めてcomponentが読み込まれた直後に起きて欲しい処理の場合、componentDidMountというメソッドで呼び出します。今回の様に最初の読み込みで情報をAPI経由で取得したい場合は、このcomponentDidMountで呼び出すのが最適だとされています。
React.jsではいくつかのライフサイクルメソッドが用意されています。それぞれがどのタイミングでなんの為に起きるのか学んでいきましょう。
1. 初期化（ Initialization ）
componentのライフサイクルで一番最初に起きるイベントがcomponentの初期化です。PropsやStateの初期化をここで行います。ここで使用されるライフサイクルメソッドはありません。
余談ですが、NekoTubeでも既に初期化のコードを書いています。Header.jsにあるこの部分です。keywordというstateを初期化しています。
// Header.js(一部抜粋)
class Header extends Component {
//stateを初期化
state = {keyword: ''};
onInputChangeHandler = (event) => {
this.setState({keyword: event.target.value});
}constructorというメソッドを書く方法もありますが、今回は触れません。
2. 読み込み ( Mounting )
初期化されたcomponentは、次にDOMを描画するために読み込まれます。その前後で発動されるのが、componentWillMountとcomponentDidMountです。
■ componentWillMount（注意が必要なメソッド）
呼び出されるタイミング： Componentが読み込まれる直前
用途： 初期化されたstateにsetStateメソッドを使ってデフォルトの値を入れたりします。
※※注意※※
よく使われていたメソッドなので紹介しましたが、このメソッドを使うことは極力避けた方がいいです。理由は二つあります。
・将来的にこのメソッドはReactで使えなくなる（depreciated）
・このタイミングにajaxで情報を取得すると正常に機能しない
情報の初期化を行いたい時、APIから情報を取得するのもここがいいのかな？と思いがちですが、これは間違いです。Ajaxリクエストで取得した場合、リクエストしたデータがかえって来る前にrenderメソッドが読み込まれてエラーが起きてしまいます。
この間違いは、componentWillMountだけでなくAjaxに関わる様々な処理で起こしやすい間違いなので、理解しておくと役に立ちます。
下の様に機能するとよく勘違いします。
しかし実際は下のように処理されます。
Ajaxでリクエストしたデータが返ってくるの待たずとして、次にかまえているrenderメソッドに進んでしまいます。そうすると空のデータを無理にrenderしようとするので、エラーがおきます。
この様な理由からAPIのリクエストは、必ずcomponentDidMountを使います。
■ componentDidMount
最もよく使うライフサイクルメソッドのうちの一つです。
呼び出されるタイミング： 最初にComponentが読み込まれた直後
用途： APIリクエストでデータを取得したり、描画されたDOMを元に行う処理をここで実行します。
今回はこのメソッドを使って、動画データの取得を行なっていきます。
3. 読み込み ( Update )
stateが更新されると、componentが再度読み込まれます。ここでは、4種類のライフサイクルメソッドが用意されています。順番にみていきましょう。
■ componentWillReceiveProps
呼び出されるタイミング： 親Componentのstateが更新されて、propsで渡されて来る情報も更新されるとき
用途： propsとstateがイコールの関係にあるとき、更新されたpropsをsetStateでstateを同じ値に更新します。
実際のコード例。componentWillReceivePropsは、nextProps(更新される予定のprops)を引数にとることができます。videosという架空のstateを使って表現しました。
componentWillReceiveProps(nextProps) {
if (this.props.videos !== nextProps.videos) {
this.setState({
state: nextProps.videos
});
}
}■ shouldComponentMount
呼び出されるタイミング： componentが更新される直前で、componentWillUpdateの直前
用途： そのcomponentが本当に更新されるべきか、更新される予定のpropsとstateを現在のpropsとstateと比較して決める。
他のライフサイクルメソッドと違い、true or falseで値が返されます。trueの場合は、componentがアップデートされて、falseの場合はされません。
このメソッドを使うと、本当に必要なcomponentだけ、更新することができるので、アプリ全体のパフォーマンスが向上します。
実際のコード例。この例だと、親componentが新しく渡してきたpropsが、現在このcomponentが持っているcomponentと異なる場合のみ再読み込みしてください、という処理ができます。
shouldComponentUpdateは、引数として次更新される予定のpropsとstateをnextProps, nextStateとして利用できます。
shouldComponentUpdate(nextProps, nextState) {
let shouldUpdate = this.props.videos !== nextProps.videos;
return shouldUpdate;
}■ componentWillUpdate
呼び出されるタイミング： componentが更新される直前で、shouldComponentUpdateがtrueだった場合のみ発動します。
用途： 基本的にはcomponentWillMountと一緒です。更新される度に、行われて欲しい処理を書きます。APIの利用は避けてください。
■ componentDidUpdate
呼び出されるタイミング： componentが更新された直後
用途： 基本的にはcomponentDidMountと一緒です。更新される度に、行われて欲しい処理を書きます。
4. 削除 ( Unmounting )
componentがDOMツリーから消えるときに、起きるイベントが削除（Unmounting）です。
■ componentWillUnmount
呼び出されるタイミング： componentが削除される直前
用途： 基本的にはcomponentDidMountなどで設定したイベントを解除したりするときに使います。
React.jsの公式ドキュメントでは、下の様なタイマーを例に説明していました。
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}これでライフサイクルメソッドの紹介は以上です。なかなか覚えることが多いと思いますが、このレッスンの冒頭でも話した様に、６０％理解できていたら大成功です。
もし興味がある方は英語ですが、公式ドキュメントに目を通しておくと理解が深まります。
ライフサイクルメソッドを使ってみる
前回のレッスンでは、YouTubeAPIを使って、データを取得しました。今度は、取得したデータをstateで管理できるよう、編集していきます。
今回は、ライフサイクルメソッドの演習も含めて行うので、本来必要のないコードも書いていきます。App.jsを下のように変更してください。console.logで、取得した情報がstateに正しく更新されているか確認します。
**gaegaefさんに、ご指摘いただいた部分を修正しました。shouldComponentUpdateを記述する際は、必ずBoolean値（true, false）を返さないと正常に機能しません。m(_ _)m gaegaefさん、フィードバックありがとうございます！！
//App.js (一部抜粋)
import Header from './components/Header/Header';
const YOUTUBE_API_KEY = 'AIzaSyC4Zaowu05ZczH-jEwAhIs3iU1JrgKRNk8'
//この部分にあったAPIリクエストは削除してください。
class App extends Component {
//stateの初期化。 取得するデータは配列なので、[]と設定しています。
state = { videos: [] }
// ＊＊＊＊＊本来は必要ない部分＊＊＊＊＊
componentWillMount(){
console.log("componentWillMountでーす。")
}
// componentDidMountでAPIリクエストを行います。
componentDidMount(){
YSearch({ key: YOUTUBE_API_KEY, term: '猫 きゅうり'}, (data) => {
this.setState({videos: data});
});
// ＊＊＊＊＊本来は必要ない部分＊＊＊＊＊
console.log("componentDidMountでーす。")
}
// ＊＊＊＊＊本来は必要ない部分＊＊＊＊＊
shouldComponentUpdate(nextProps, nextState){
//更新前と更新後のstateをこのように取得することができます。
console.log('更新前のstate:' + this.state.videos);
console.log('更新後のstate:' + nextState.videos);
**修正部分
return true;
}
// ＊＊＊＊＊本来は必要ない部分＊＊＊＊＊
componentWillUpdate(){
console.log("componentWillUpdateでーす。")
}
// ＊＊＊＊＊本来は必要ない部分＊＊＊＊＊
componentDidUpdate(){
console.log("componentDidUpdateでーす。")
}
render() {
// ＊＊＊＊＊本来は必要ない部分＊＊＊＊＊
console.log(this.state.videos);
return (componentWillReceivePropsとcomponentWillUnmount以外、紹介した全てのライフサイクルメソッドを実験するコードが完成しました。下のような順番でコンソールに表示されることを確認しましょう。
盛りだくさんですね！笑。では実際に、Chrome Developers Toolsで確認していきます。下のように表示されたら成功です。ちゃんと前回学んだ、ライフサイクルメソッドに沿って、処理が実行されていますね！無事に取得したデータをstateに更新できたことも確認できたと思います。
では、テスト用に使った不要なコードを全て削除して、プロジェクトに必要なコードだけにしましょう。そうすると下のようになります。
// App.js
import React, { Component } from 'react';
import './App.css';
import YSearch from 'youtube-api-search';
import Header from './components/Header/Header';
const YOUTUBE_API_KEY = 'AIzaSyC4Zaowu05ZczH-jEwAhIs3iU1JrgKRNk8'
class App extends Component {
state = { videos: [] }
componentDidMount(){
YSearch({ key: YOUTUBE_API_KEY, term: '猫 きゅうり'}, (data) => {
this.setState({ videos: data })
});
}
render() {
return (
<div className="App">
<Header />
</div>
);
}
}
export default App;今回のレッスンは以上です。ライフサイクルメソッドを完全に理解する為には、ライフサイクルメソッドの実装が必要なシチュエーションに遭遇して、調べなから書いていくのが一番だと思います。わからなくても一度このチュートリアルを終わらせることを優先することをおすすめします。
# 09 ライフサイクルメソッドについて
✔︎ Componentのライフサイクルを知る
✔︎ ライフサイクルメソッドを学ぶ
✔︎ ライフサイクルメソッドを使ってみる
# 10 Bootstrap4を使ってみる
前回のレッスンで、YouTubeで取得したデータを無事stateに更新することができました、このレッスンでは、Bootstrapを使いながら、そのデータを元にリスト画面に表示する方法を学んでいきます。
Bootstrapは、クラス名を一定の規則にしたがってつけるだけでCSSを整えてくれる便利なツールです。ここで初めてBootstrapを知った人は、ドットインストールで一度どういう風にBootstrapが機能するのか学習するのもいいでしょう。
もちろん、知識０のままでもチュートリアルは進められますが、目標は、React.jsの習得なので、それぞれのクラス名がstyleにどのように影響するかは、細かく説明しません。
このレッスンの目標
・Bootstrapを導入する
・Body.jsを編集する
・List.jsを編集する
・Item.jsを編集する
・Item.jsをmapメソッドで複製する
・Item.jsを完成する
Bootstrap4を導入する
では早速、プロジェクトがBootstrapの機能を使えるような状態にセットアップしていきます。方法は簡単です。publicフォルダーにあるindex.htmlを開いてください。下のようなファイルです。
ここから先は
¥ 980
この記事が気に入ったらサポートをしてみませんか？