![\"image.png](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/be693627-5b72-471f-a09a-6ba198a721a6.png\")
\n「今日からReactを始めたい」
\n「とりあえずReactで何か動かしてみたい」
\nここは、そういった方が、Reactを始めみるためのチュートリアルです。
\n今回は、Reactを使ってFacebookのいいねボタンのようなコンポーネントを実装していきます。
\n実際に押せます↓
\n![\"4.gif](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/c96f7803-085b-4983-bc15-1dfc950c4f49.gif\")
なお、このチュートリアルは、下記のバージョンで動作確認しています。
\nこのチュートリアルで作成するコンポーネントの完成形はGitHubからチェックアウトできます。
\nまた、今回はReactだけでコンポーネントを作成し、Fluxは使用しません。
\nひとまずディレクトリを作って、
\nmkdir react-like-button\ncd react-like-button\nプロジェクトを初期化します。
\nnpm init\n開発に必要なツールをnpmでインストールしておきます。
\nnpm install --save-dev webpack babel-loader\n今回インストールするのは次の2つです。
\nこれらのツールの説明は省略します。詳しくは次の記事をご参考に。
\n\nwebpack.config.jsという名前でwebpackの設定ファイルを作ります。
touch webpack.config.js\nmodule.exports = {\n entry: __dirname + \"/src/main.js\",\n output: {\n path: __dirname + \"/dist\",\n filename: \"like-button.js\"\n },\n module: {\n loaders: [\n {test: /\\.js$/, loader: \"babel-loader?stage=0\"}\n ]\n }\n};\n少し説明すると、entryとoutputでは「src/main.jsをコンパイルし、dist/like-button.jsを生成する」設定になっています。loadersは拡張子がjsのものにbabel-loaderを適用する設定、つまりES6をJSに変換するようになっています。stage=0はES7も有効にするBabelの設定です。
ソースコード置き場と、ビルドされたJSが生成される場所を作ります。
\nmkdir src dist\nまずは、ボタンをコーディングするファイルを作りましょう。
\ntouch ./src/main.js\nwebpackでちゃんとビルドされるかを確認したいので、ひとまず、中身はconsole.logにしておき、読み込まれていることが確認できるようにしておきます。
console.log(\"OK\");\nつぎに、ビルドされたJSの動作確認をするHTMLを作ります。
\ntouch dist/index.html\n中身はこんなかんじ。
\n<!doctype html>\n<html>\n<head>\n <meta charset=\"UTF-8\">\n <title>Reactで作った「いいねボタン」のデモ (Flux不使用)</title>\n</head>\n<body>\n <h1>Reactで作った「いいねボタン」のデモ (Flux不使用)</h1>\n <script src=\"like-button.js\"></script>\n</body>\n</html>\nビルドするために、package.jsonにwebpackのビルドタスクを定義しておきます。
{\n...\n \"scripts\": {\n ...\n \"build\": \"rm -rf dist/*.js && webpack\",\n \"watch\": \"rm -rf dist/*.js && webpack -w\"\n },\n...\n}\nひとつ目は単発でビルドするタスクの定義、ふたつ目はソースコードが変更されたら自動でビルドが走るタスクです。
\n開発時はふたつ目を使います。
\nビルドタスクが走るか試してみましょう。
\nnpm run build\ndist/like-button.jsが生成されたでしょうか？
\n最後に、確認ページを開き、コンソールに「OK」と出ているのが確認できれば、ビルドも実行もうまくいったことになります。
\nopen dist/index.html\n下準備は以上です。
\nここからは「いいね！」ボタンの開発に入っていきます。
\nReactをインストールします。
\nnpm install --save react react-dom\n確認用HTMLdist/index.htmlを変更して、Reactコンポーネントをマウントする場所をHTMLに書き込みます。
...\n <h1>Reactで作った「いいねボタン」のデモ (Flux不使用)</h1>\n <div id=\"like-button\"></div><!-- ここにコンポーネントをマウント -->\n <script src=\"like-button.js\"></script>\n...\nlike-button.jsが読み込まれると、このid=\"like-button\"にいいねボタン コンポーネントが描画されます。
まずは、最もシンプルなコンポーネントをmain.jsに書いてみましょう。<span>を出力するだけのコンポーネントです。
import React from \"react\";\nimport ReactDom from \"react-dom\";\n\nclass LikeButton extends React.Component {\n render() {\n return (\n <span>いいねボタン予定地</span>\n );\n }\n}\n\nReactDom.render(\n <LikeButton />,\n document.getElementById(\"like-button\")\n);\nコードに直接書かれた<span>タグなどはJSXと呼ばれます。HTMLに見えますがXMLです。XMLなので閉じタグを省略できない点に注意してください。React.Componentを継承し、renderメソッドを実装すると、Reactコンポーネントになります。Reactコンポーネントは、クラス名をそのままJSXのタグに使うことができます。
HTMLとJSXの違いについてはドキュメントに説明があります。
\n\nwebpackのwatchタスクを起動して、ビルドを走らせます。
\nnpm run watch\nビルドが終わったら、確認用HTMLを読み込みしなおしてみて、「いいねボタン予定地」が表示されていればOKです。
\n![\"3.png](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/c46d60a9-0724-46c8-9e33-72494c6bbd53.png\")
\n「いいね！」ボタンはFacebookのLikeボタンのようにボタンと吹き出しがセットのものを作ります。
\n![\"facebook-like-button.png](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/00232841-a8a5-4637-b2fe-bb8a8dd6d775.png\")
\nこのチュートリアルでは、Facebook風のデザインを作る上で、html - how to draw the # of likes bubble like what is on the right side of the facebook like button - Stack Overflowを参考にしています。
\n先ほどのLikeButtonの中身を書き換えて、JSXとスタイルを書きます。
class LikeButton extends React.Component {\n styles() {\n return {\n container: {\n fontFamily: \"helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif\",\n fontSize: 11\n },\n like: {\n display: \"inline-block\",\n background: \"#3b5998\",\n padding: \"0px 5px\",\n borderRadius: 2,\n color: \"#ffffff\",\n cursor: \"pointer\",\n float: \"left\",\n height: 20,\n lineHeight: \"20px\"\n },\n likeHover: {\n background: \"#444\"\n },\n counterBefore: {\n display: \"block\",\n float: \"left\",\n width: 6,\n height: 6,\n background: \"#fafafa\",\n marginLeft: \"-12px\",\n borderRight: 10,\n transform: \"rotate(45deg)\",\n WebkitTransform: \"rotate(45deg)\",\n marginTop: 6,\n borderLeft: \"1px solid #aaa\",\n borderBottom: \"1px solid #aaa\"\n },\n counter: {\n display: \"block\",\n background: \"#fafafa\",\n boxSizing: \"border-box\",\n border: \"1px solid #aaa\",\n float: \"left\",\n padding: \"0px 8px\",\n borderRadius: 2,\n marginLeft: 8,\n height: 20,\n lineHeight: \"20px\"\n }\n };\n }\n\n render() {\n const styles = this.styles();\n return (\n <span style={styles.container}>\n <span style={styles.like}>いいね！</span>\n <span style={styles.counter}>\n <span style={styles.counterBefore}>{\" \"}</span>999\n </span>\n </span>\n );\n }\n}\nReactではclassName属性を使えばスタイルシートをCSSに追い出すこともできますが、
\nウィジェットとして設置可能にすることまで考えて、ここではインラインスタイルで書きます。Reactのインラインスタイルは、JavaScriptのオブジェクトで表現する点が、普通のHTMLとは異なります。
いいねボタンにカーソルが乗った時に、背景色が変化するフィードバックを実装します。
\nCSSであれば:hoverを定義するだけですが、Reactのインラインスタイルでは、onMouseEnterイベントとonMouseLeaveを使って動的にスタイルを変更する方法で実装します。
今のLikeButtonコンポーネントに手を加えて、カーソルが乗っているかの状態とイベントハンドラを追加します。
class LikeButton extends React.Component {\n constructor(props) {\n super(props);\n // コンポーネントにカーソルが乗ているかどうかの状態を持たせる\n this.state = {\n hovered: false\n }\n }\n\n styles() { ... }\n\n // カーソルが乗った時に状態を変更するイベントハンドラ\n onMouseEnter() {\n this.setState({hovered: true});\n }\n\n // カーソルが外れた時に状態を変更するイベントハンドラ\n onMouseLeave() {\n this.setState({hovered: false});\n }\n\n render() {\n const styles = this.styles();\n console.log(this.state); // 状態をログに出す\n\n // ボタンに onMouseEnter と onMouseLeave のイベントハンドラを割り当てます\n return (\n <span style={styles.container}>\n <span\n style={styles.like}\n onMouseEnter={::this.onMouseEnter}\n onMouseLeave={::this.onMouseLeave}>いいね！</span>\n <span style={styles.counter}>\n <span style={styles.counterBefore}>{\" \"}</span>999\n </span>\n </span>\n );\n }\n}\nビルドが走ったら、確認用HTMLにて、ボタンにカーソルを乗せたり外したりしてみて、
\nコンソールにコンポーネントの状態を出ているか確認してください。
![\"1.png](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/d292ab0a-f78f-4326-86d9-093e5f2d39b2.png\")
\nここまでできたら、this.state.hoveredの状態に応じてスタイルを切り替えれば、背景色を変更できます。renderメソッドを変更してみましょう。
class LikeButton extends React.Component {\n ...\n render() {\n const styles = this.styles();\n // 状態に応じてスタイルを変更する\n const likeStyle = this.state.hovered ? {...styles.like, ...styles.likeHover} : styles.like;\n return (\n <span style={styles.container}>\n <span\n style={likeStyle}\n onMouseEnter={::this.onMouseEnter}\n onMouseLeave={::this.onMouseLeave}>いいね！</span>\n <span style={styles.counter}>\n <span style={styles.counterBefore}>{\" \"}</span>999\n </span>\n </span>\n );\n }\n}\nちなみに、{...styles.like, ...styles.likeHover}はES7でふたつのオブジェクトをマージする構文です。
色が変わるようになったでしょうか？
\n![\"2.gif](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/461a4ab3-f141-4c19-b9a2-d36e5daf780e.gif\")
\n最後に、ボタンを押したときに、数を増減する処理を追加します。
\nFacebookのLikeボタンに習い、次の仕様を実装します。
カウント数と押したかどうかの2つの状態を、stateに追加します。
\nそして、クリックしたときのイベントハンドラと追加し、
\nそのイベントハンドラをボタンと紐付けます。
import React from \"react\";\nimport ReactDom from \"react-dom\";\n\nclass LikeButton extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n count: 999, // カウント数の状態を追加\n liked: false // 押したかどうかの状態を追加\n }\n }\n\n styles() { ... }\n onMouseEnter() { ... }\n onMouseLeave() { ... }\n\n // クリックしたときのイベントハンドラ\n onClick() {\n this.setState({\n count: this.state.count + (this.state.liked ? -1 : 1),\n liked: !this.state.liked\n });\n }\n\n render() {\n ...\n // this.state.likedとthis.state.countを追加し、\n // onClickイベントハンドラを紐付ける\n return (\n <span style={styles.container}>\n <span\n style={likeStyle}\n onMouseEnter={::this.onMouseEnter}\n onMouseLeave={::this.onMouseLeave}\n onClick={::this.onClick}>{this.state.liked ? \"✔ \" : \"\"}いいね！</span>\n <span style={styles.counter}>\n <span style={styles.counterBefore}>{\" \"}</span>\n {this.state.count}\n </span>\n </span>\n );\n }\n}\nこの変更で、ボタンを押した時に、いいね数が変化するようになったかと思います。
\n![\"4.gif](\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/4c382c58-f79b-4c4e-b51c-a889d0a12fe9.gif\")
\n以上で「いいね！」ボタンをReactで作るチュートリアルはおしまいです。
\nこのチュートリアルで作成したコンポーネントの完全版はGitHubのsuin/react-like-button-exampleにて確認できます。
\n次は、もっと複雑なコンポーネントを実装するチュートリアルを紹介したいと思います！
\n質問や分からないことがあれば、お気軽にコメントしてください(^-^)
\n"}},"pageContext":{"id":"DatoCmsPost-5142984-ja","description":"「今日からReactを始めたい」 「とりあえずReactで何か動かしてみたい」 ここは、そういった方が、Reactを始めみるためのチュートリアルです。 今回は、Reactを使ってFacebookのいいねボタンのようなコンポーネントを実装していきます。 今回作る「いいねボタン」のデモ 実際に押せます↓ チュートリアルの目標 Reactのコンポーネントを実装できるようになる Reactコンポーネントのイベントをハンドリングできるようになる Reactコンポーネントの状態(state)を実装できるようになる Reactの雰囲気をつかめる！ このチュートリアルについて なお、このチュートリアルは、下記","toc":[{"tag":"h1","depth":1,"href":"#%E4%BB%8A%E5%9B%9E%E4%BD%9C%E3%82%8B%E3%80%8C%E3%81%84%E3%81%84%E3%81%AD%E3%83%9C%E3%82%BF%E3%83%B3%E3%80%8D%E3%81%AE%E3%83%87%E3%83%A2","text":"今回作る「いいねボタン」のデモ","html":"今回作る「いいねボタン」のデモ"},{"tag":"h1","depth":1,"href":"#%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%AE%E7%9B%AE%E6%A8%99","text":"チュートリアルの目標","html":"チュートリアルの目標"},{"tag":"h1","depth":1,"href":"#%E3%81%93%E3%81%AE%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6","text":"このチュートリアルについて","html":"このチュートリアルについて"},{"tag":"h1","depth":1,"href":"#%E4%B8%8B%E6%BA%96%E5%82%99","text":"下準備","html":"下準備"},{"tag":"h2","depth":2,"href":"#%E4%B8%8B%E6%BA%96%E5%82%99:%20%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%96%B0%E8%A6%8F%E4%BD%9C%E6%88%90","text":"下準備: プロジェクト新規作成","html":"下準備: プロジェクト新規作成"},{"tag":"h2","depth":2,"href":"#%E4%B8%8B%E6%BA%96%E5%82%99:%20%E5%BF%85%E8%A6%81%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB","text":"下準備: 必要ツールのインストール","html":"下準備: 必要ツールのインストール"},{"tag":"h2","depth":2,"href":"#%E4%B8%8B%E6%BA%96%E5%82%99:%20webpack%E3%81%AE%E8%A8%AD%E5%AE%9A","text":"下準備: webpackの設定","html":"下準備: webpackの設定"},{"tag":"h2","depth":2,"href":"#%E4%B8%8B%E6%BA%96%E5%82%99:%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E3%82%8B","text":"下準備: コンポーネントを実装するファイルを作る","html":"下準備: コンポーネントを実装するファイルを作る"},{"tag":"h2","depth":2,"href":"#%E4%B8%8B%E6%BA%96%E5%82%99:%20%E7%A2%BA%E8%AA%8D%E7%94%A8%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E3%82%8B","text":"下準備: 確認用ページを作る","html":"下準備: 確認用ページを作る"},{"tag":"h2","depth":2,"href":"#%E4%B8%8B%E6%BA%96%E5%82%99:%20webpack%E3%81%A7%E3%83%93%E3%83%AB%E3%83%89%E3%82%92%E8%A9%A6%E3%81%99","text":"下準備: webpackでビルドを試す","html":"下準備: webpackでビルドを試す"},{"tag":"h1","depth":1,"href":"#%E3%80%8C%E3%81%84%E3%81%84%E3%81%AD%EF%BC%81%E3%80%8D%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8B","text":"「いいね！」ボタンを作る","html":"「いいね！」ボタンを作る"},{"tag":"h2","depth":2,"href":"#React%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB","text":"Reactをインストール","html":"Reactをインストール"},{"tag":"h2","depth":2,"href":"#%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%93%E3%82%80","text":"ボタンのデザインを作りこむ","html":"ボタンのデザインを作りこむ"},{"tag":"h2","depth":2,"href":"#%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB%E3%81%8C%E4%B9%97%E3%81%A3%E3%81%9F%E6%99%82%E3%81%AB%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B","text":"カーソルが乗った時にボタンの色を変える","html":"カーソルが乗った時にボタンの色を変える"},{"tag":"h2","depth":2,"href":"#%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E6%8A%BC%E3%81%97%E3%81%A6%E3%80%81%E6%95%B0%E3%82%92%E5%A2%97%E3%82%84%E3%81%97%E3%81%9F%E3%82%8A%E6%B8%9B%E3%82%89%E3%81%9B%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B","text":"ボタンを押して、数を増やしたり減らせるようにする","html":"ボタンを押して、数を増やしたり減らせるようにする"},{"tag":"h1","depth":1,"href":"#%E3%81%8A%E3%82%8F%E3%82%8A","text":"おわり","html":"おわり"}],"ogpImageUrl":"https://www.datocms-assets.com/29850/1593190022-pastedimage20200627146.png?fm=png&mark64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9NDAwJmg9NjQmZml0PWNyb3AmYmxlbmQ2ND1hSFIwY0hNNkx5OTNkM2N1WkdGMGIyTnRjeTFoYzNObGRITXVZMjl0THpJNU9EVXdMekUxT1RFNE16TXlPVEF0WVhaaGRHRnlOVEV5TG1wd1p6OXRZWE5yUFdWc2JHbHdjMlVtWm0wOWNHNW5KbmM5TWpVMkptZzlNalUyJmJsZW5kLWg9NjQmYmxlbmQteD0wJmJsZW5kLXk9MCZibGVuZC1tb2RlPW5vcm1hbCZtYXJrNjQ9YUhSMGNITTZMeTloYzNObGRITXVhVzFuYVhndWJtVjBMMzUwWlhoMFAzUjRkQzFoYkdsbmJqMXRhV1JrYkdVbE1rTnNaV1owSm5SNGRDMW1iMjUwUFhOaGJuTXRjMlZ5YVdZbE1rTmliMnhrSm5SNGRDMWpiMnh2Y2oweU1qRTRNVFltZEhoME5qUTlZek5XY0dKbkpuUjRkQzF6YVhwbFBUTXdKbWc5TmpRJm1hcmsteD02NCZtYXJrLWFsaWduPW1pZGRsZSUyQ2xlZnQ&mark-align=bottom%2Cleft&mark-x=100&mark-y=496&blend64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9MTIwMCZoPTYzMCZmaXQ9Y3JvcCZtYXJrNjQ9YUhSMGNITTZMeTkzZDNjdVpHRjBiMk50Y3kxaGMzTmxkSE11WTI5dEx6STVPRFV3THpFMU9UTXhOVEE1TkRBdFkzSmhablJ6YldGdUxUQXhMbkJ1WncmbWFyay1hbGlnbj10b3AlMkNjZW50ZXImbWFyay13PTI1MCZtYXJrLXk9ODAmYmxlbmQ2ND1hSFIwY0hNNkx5OWhjM05sZEhNdWFXMW5hWGd1Ym1WMEwzNTBaWGgwUDNSNGRDMWhiR2xuYmoxdGFXUmtiR1VsTWtOalpXNTBaWEltZEhoMExXWnZiblE5YzJGdWN5MXpaWEpwWmlVeVEySnZiR1FtZEhoMExYQmhaRDB4TURBbWRIaDBMV052Ykc5eVBUSXlNVGd4TmlaMGVIUTJORDFOZWtSc2FVbGljR3h3VGxOYVYwWnFaRTlYUm5CbGJWZG5UMDlCYWs5UFFtaFBUMEpvVDA5Q2NtVlBSRzVQVDBOMkxVOUVjeTFQUVdwbFV6bHVUMkZKYTA5UFJHZGxUMFJ3WlU5RWRrOVBSR2xQVDBSeGRVOURiM1ZQUkhFdExUaG5VU1owZUhRdGMybDZaVDAxTlNaM1BURXlNREFtYUQwMk16QSZibGVuZC1tb2RlPW5vcm1hbA&blend-mode=normal","otherPost":{"type":"author","title":"「Halogen」16種のロード中アニメを表示するReactコンポーネント","slug":"/posts/48"}}}}