Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

React&ES6でカウンターアプリ作ってみた。

More than 1 year has passed since last update.

Reactとは、Facebookが中心に開発しているライブラリのことです。
FacebookやInstgram,Skypeなどで使用されています。
かなり複雑なUI(User Interface)でも効率的に開発できます。
*UI:ユーザーの目に触れる部分のこと。ホームページ上のデザインやフォントなどの外観ですね。

本当は今回は、ES6を勉強しようと思ってたんですが、「ドットインストールReact入門」によると(またドットインストールかよ、という突っ込みは一切受け付けません。)、React入門の講座でES6もたくさん出てくるということだったので、Reactメインで勉強しました。

〇参考サイト
ドットインストールReact入門
https://dotinstall.com/lessons/basic_reactjs

作るもの

商品の在庫数をカウントできる、カウンターアプリ
果物カウンターQiita.jpg
カウンターをクリックすれば、果物の個数が増えていきます。
2時間あればできるので、ぜひ!
それでは作っていきましょう。

*本記事投稿者はプログラミング入門者です。間違っていることがありましたら、指摘してくださると大変嬉しい所存です。 https://www.miraidenshi-tech.jp/intern-content/program/


初期設定

まず初めに、Chromeの拡張機能である、React Developer Toolsを導入します。検索すれば出てきます。
また今回は、ローカルファイルで開発するので、「拡張機能を管理」で「ファイルへのアクセスを許可する」をONにしてください。
そうすれば、上の画像のように赤いカッコいいマークが出てきます。

コード

コードの説明はコメントでちょこちょこ書いています。
headのscriptの部分はReactの公式サイトの開発用スクリプトをコピペしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>React Practice</title>
    <link rel="stylesheet" href="MyreactApp/css/styles.css">
    <!-- Reactの本体 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- Reactの結果をブラウザのDOMに反映させていくためのライブラリ -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- JSXやES6の文法を使うためのBabelというライブラリ -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <!-- Reactを使ったUIを表示する領域を作る -->
    <div id="root"></div>
      <script type="text/babel">
    //即時関数で囲いたい→JSXの記法であるアロー関数式
        (() => {

    //   Props(propaties)がここに渡される
      function Counter(props){
        return(
            <li style={{backgroundColor:props.counter.color}} onClick={() =>
            props.countUp(props.counter)}>
                {props.counter.id}-{props.counter.count}
            </li>
        );
    }

    // propsが渡ってくる
    function CounterList(props){
    // 渡ってきたpropsのcountersをmapで処理
    const counters=props.counters.map(counter => {
        return(
            <Counter
            //{}でJavaScriptの式を書ける←JSXの記法
                counter= {counter}
                // ループ処理するために値を付ける
                key={counter.id}
                countUp={props.countUp}
            />
        );
    });
    return(
        <ul>
            {counters}
        </ul>
    );
}

// Counterの情報をこのstateで管理 stateを変更できるのはここだけ
class App extends React.Component{
    constructor(){
        super();
        this.state = {
            counters: [
                {id: 'Melon', count: 0, color: 'limegreen'},
                {id: 'Grape', count: 0, color: 'purple'},
                {id: 'Apple', count: 0, color: 'red'},
                {id: 'Orange', count: 0, color: 'orange'},
                {id: 'Coconut', count: 0, color: 'white'},
                {id: 'Lemon', count: 0, color: 'yellow'}
            ],
            total: 0
        };
        this.countUp=this.countUp.bind(this);
    }

    countUp(counter){
        this.setState(prevState => {
            const counters=prevState.counters.map(counter => {
                return{id: counter.id, count: counter.count, color: counter.color};
            });
            const pos=counters.map(counter => {
                return counter.id;
            }).indexOf(counter.id);
            counters[pos].count++;
            return{
                counters: counters,
                total: prevState.total + 1
            };
        });
    }

    render(){
        return(
            // HTMLで言うclassはclassNameで書く
            <div className="container">
                <CounterList
                // ここにカウンターのデータが渡ってくる
                    counters={this.state.counters}
                    countUp={this.countUp}
                />
                <div>TOTAL INVENTORY: {this.state.total}</div>
                </div>
            ); 
    }
}
        ReactDOM.render(
        <App/>,
        document.getElementById('root')
        );
    })();
    </script>
</body>
</html>


Reactの仕組み

ここで仕組みを少し解説します。
Reactで重要なのが、
・Componet
・props
・state
です。
stateはUIの書き換えに必要となるComponentの変数を管理しています。
そして、propsはComponent間の変数の受け渡しをしています。

ReactではComponent単位で細かく変数を管理することで、機能を拡張したり再利用したり、を簡単にしています。

つまずいたこと

ある時、エラーが出て、Developer Tools(Ctrl+Shift+iで表示)で確認したら、「〇行目が間違ってるよー」と出ました。その行のコードと30分以上にらめっこしていたが全く分からず。
原因は「,」を付けていないことでした。。。
「,」.png

yinawekuky
Python(Django) ,JS(React, Vue, D3, Gatsby)でのWebアプリ開発をやっています。 GAS, SeleniumでのRPA構築も時々やります。 座右の銘:「Happy, Kind, Crazy」
future-i-mark
私たちの事業は、新しいプロダクトやサービスを創造し、様々な業種・業態における課題を解消することを目指しています。 新しい体験・最先端の技術など、社会に変革をもたらすことがミッションです。
https://future-i-mark.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away