Month: November 2019

React.js 6

<script type="text/babel">
        (() => {

        const todos = [
            {id: 0, title: 'Task 0', isDone: false},
            {id: 1, title: 'Task 1', isDone: false},
            {id: 2, title: 'Task 2', isDone: true}
        ];

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <li key={todo.id}>{todo.title}</li>
                );
        });
            return (
                <ul>
                    {todos}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
        }

            render(){
             return (
                <div>
                    <h1>My Todo</h1>
                    <TodoList todos={this.state.todos} />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

constで定義したstateを渡してますね。

<script type="text/babel">
        (() => {

        const todos = [
            {id: 0, title: 'Task 0', isDone: false},
            {id: 1, title: 'Task 1', isDone: false},
            {id: 2, title: 'Task 2', isDone: true}
        ];

        function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    {props.todo.title}
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                    />

                );
        });
            return (
                <ul>
                    {todos}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
        }

            render(){
             return (
                <div>
                    <h1>My Todo</h1>
                    <TodoList todos={this.state.todos} />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                    />
                    {props.todo.title}
                    </label>
                </li>
            );
    }

React.js 5

<script type="text/babel">
        (() =>{

            function Counter(props){

            function countUp(){
                alert('count up!');
            }
            return(
                <li style={{backgroundColor:props.color}} onClick={countUp}>
                0
                </li>
            );
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

function Counter(props){

            function countUp(color){
                alert(color);
            }
            return(
                <li style={{backgroundColor:props.color}} onClick={() =>
                    countUp(props.color)}>
                0
                </li>
            );
        }

<script type="text/babel">
        (() =>{


            class Counter extends React.Component {
                render(){
                    return(
                        <li style={{backgroundColor:this.props.color}}>
                            0
                        </li>
                    );
            }
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{


            class Counter extends React.Component {
                constructor(props){
                super(props);
                this.state = {
                    count: 10
            };
            }

                render(){
                    return(
                        <li style={{backgroundColor:this.props.color}}>
                            {this.state.count}
                        </li>
                    );
            }
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

class Counter extends React.Component {
                constructor(props){
                super(props);
                this.state = {
                    count: 10,
                    message: 'hello!'
            };
            }


<script type="text/babel">
        (() =>{


            class Counter extends React.Component {
                constructor(props){
                super(props);
                this.state = {
                    count: 0
                };
                this.countUp = this.countUp.bind(this);
            }
                countUp(){
                    this.setState(prevState =>{
                        return {
                        count: prevState.count + 1
                    };
                });
            }

                render(){
                    return(
                        <li style={{backgroundColor:this.props.color}} onClick={this.countUp}>
                            {this.state.count}
                        </li>
                    );
            }
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{


            function Counter(props){
            return(
                        <li style={{backgroundColor:props.counter.color}}>
                            {props.counter.id}:{props.counter.count}
                        </li>
                );

            }

            class App extends React.Component {
                constructor(){
                    super();
                    this.state = {
                    counters: [
                        {id: 'A', count: 0, color: 'red'},
                        {id: 'B', count: 0, color: 'yellow'},
                        {id: 'C', count: 0, color: 'blue'}
                    ]

                };
            }
                render(){
                return (
                    <div className="container">
                        <ul>
                            <Counter counter={this.state.counters&#91;0&#93;}/>
                            <Counter counter={this.state.counters&#91;1&#93;}/>
                            <Counter counter={this.state.counters&#91;2&#93;}/>
                        </ul>
                        <div>Total Inventory: 3</div>
                    </div>
                )
            }
        }

            ReactDOM.render(
                <App/>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{


            function Counter(props){
            return(
                        <li style={{backgroundColor:props.counter.color}}>
                            {props.counter.id}:{props.counter.count}
                        </li>
                );

            }

            function CounterList(props){
                const counters = props.counters.map(counter => {
                    return(
                        <Counter counter={counter}/>
                    );
            });
                return (
                    <ul>
                        {counters}
                    </ul>
                );
        }

            class App extends React.Component {
                constructor(){
                    super();
                    this.state = {
                    counters: [
                        {id: 'A', count: 0, color: 'red'},
                        {id: 'B', count: 0, color: 'yellow'},
                        {id: 'C', count: 0, color: 'blue'}
                    ]

                };
            }
                render(){
                return (
                    <div className="container">
                         <CounterList counters={this.state.counters}/>
                        <div>Total Inventory: 3</div>
                    </div>
                )
            }
        }

            ReactDOM.render(
                <App/>,
                document.getElementById('root')
            );
    })();
    </script>

function CounterList(props){
                const counters = props.counters.map(counter => {
                    return(
                        <Counter
                        counter={counter}
                        key={counter.id}/>
                    );
            });

<script type="text/babel">
        (() =>{


            function Counter(props){
            return(
                        <li style={{backgroundColor:props.counter.color}} onClick={() => props.countUp(props.counter)}>
                            {props.counter.id}:{props.counter.count}
                        </li>
                );

            }

            function CounterList(props){
                const counters = props.counters.map(counter => {
                    return(
                        <Counter
                        counter={counter}
                        key={counter.id}
                        countUp={props.countUp}
                        />
                    );
            });
                return (
                    <ul>
                        {counters}
                    </ul>
                );
        }

            class App extends React.Component {
                constructor(){
                    super();
                    this.state = {
                    counters: [
                        {id: 'A', count: 0, color: 'red'},
                        {id: 'B', count: 0, color: 'yellow'},
                        {id: 'C', count: 0, color: 'blue'}
                    ]

                };
                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
            };
            });
        }
                render(){
                return (
                    <div className="container">
                         <CounterList
                         counters={this.state.counters}
                            countUp={this.countUp}
                         />
                        <div>Total Inventory: 3</div>
                    </div>
                )
            }
        }

            ReactDOM.render(
                <App/>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{


            function Counter(props){
            return(
                        <li style={{backgroundColor:props.counter.color}} onClick={() => props.countUp(props.counter)}>
                            {props.counter.id}:{props.counter.count}
                        </li>
                );

            }

            function CounterList(props){
                const counters = props.counters.map(counter => {
                    return(
                        <Counter
                        counter={counter}
                        key={counter.id}
                        countUp={props.countUp}
                        />
                    );
            });
                return (
                    <ul>
                        {counters}
                    </ul>
                );
        }

            class App extends React.Component {
                constructor(){
                    super();
                    this.state = {
                    counters: [
                        {id: 'A', count: 0, color: 'red'},
                        {id: 'B', count: 0, color: 'yellow'},
                        {id: 'C', count: 0, color: 'blue'}
                    ],
                    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 (
                    <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>

なるほど、component単位でJavaScriptで作っていくってわけね。少し理解した。

React.js 4

<script type="text/babel">
        (() =>{

            function Counter(){
            return <div>0</div>
        }

            ReactDOM.render(
                <div>
                    <Counter/>
                    <Counter/>
                    <Counter/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <div>0 {props.color}</div>
        }

            ReactDOM.render(
                <div>
                    <Counter color="red"/>
                    <Counter color="yellow"/>
                    <Counter color="blue"/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <div style={{backgroundColor:props.color}}>0</div>
        }

            ReactDOM.render(
                <div>
                    <Counter color="red"/>
                    <Counter color="yellow"/>
                    <Counter color="blue"/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <li style={{backgroundColor:props.color}}>0</li>
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

[ccs]
body {
font-size:16px;
font-family: Verdana, sans-serif;
}

.container {
width: 330px;
margin: 20px auto;
}

.container ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap:wrap;
}

.container li {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
cursor: pointer;
user-select: none;
border-radius: 5px;
margin: 0 5px 10px;
}
[/ccs]

React.js 3

camelcaseでclassを書くこともできる。

<script type="text/babel">
        (() =>{

            ReactDOM.render(
                <div className="box"></div>,
                document.getElementById('root')
            );
    })();
    </script>

inlineもok

<script type="text/babel">
        (() =>{

            ReactDOM.render(
                <div style={{width:150, height:100, backgroundColor:'blue'}}></div>,
                document.getElementById('root')
            );
    })();
    </script>

onClick

<script type="text/babel">
        (() =>{

            function showMessage(){
                alert('this is alert!');
        }

            ReactDOM.render(
                <div style={{width:150, height:100, backgroundColor:'blue'}} onClick={showMessage}></div>,
                document.getElementById('root')
            );
    })();
    </script>

うぉ、なんかすげー疲れた。。
あれ、今の所は、レンダリングやalertなど特段JSで処理できることばかりだから、React.jsを使う場面がいまいち想像つかないぞ。。

React.js 2

JSXで渡せるのは一つだけ。
XMLベースのため、hrなど閉じタグのないタグはエラーになる。

<div id="root"></div> <!-- 部品を表示 -->
    <script type="text/babel">
        (() =>{
            const name = "yamada";
            ReactDOM.render(
                <p>React, {name.toUpperCase()}</p>, document.getElementById('root')
            );
    })();
    </script>

React, YAMADA

複数の要素を渡す場合は、親要素で囲う

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="root"></div> <!-- 部品を表示 -->
    <script type="text/babel">
        (() =>{
            const name = "Yamada";
            ReactDOM.render(
                <div>
                    <p>React, {name.toUpperCase()}</p>
                    <p>{name.toLowerCase()}</p>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>
</body>
</html>

React, YAMADA
yamada

React.js 1

– ユーザインタラクティブな画面をシンプルに構築
https://ja.reactjs.org/

– ES6:JavaScriptの新しい規格

– react developer toolsをchromeに入れる

あれ、atomと同じマークだ。atomってelectron&github開発だよね、確か。

– CDNはtutorialから取得
https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="root"></div> <!-- 部品を表示 -->
    <script type="text/babel">
        (() =>{
            ReactDOM.render(
                <p>React</p>, document.getElementById('root')
            );
    })();
    </script>
</body>
</html>

React.jsとは

React.jsはUIのパーツを作るためのライブラリ
FacebookがOSSとして公開 https://github.com/facebook/react

idに○○を指定して、部品を動かす、などの際に使用する。

<html>
    <body>
        <div id="hogehoge"></div>
    </body>
</html>

Elemental UI

– ボタン、テキストが大量にあり、入力内容を即座に表示するような部品に活きる
　- 電卓、カレンダーなど
– jQueryのように、アニメーションが得意ではない
– Facebook, Instagram, Yahoo, Atomなどが導入
– Backbone.jsやAngular.jsとも併用可能
– 通常はJSXを使うが、自動コンパイルされる
– npm react-toolsによるJSXビルドの方法もある

React.jsのファイルを読み込む

<script src="http://fb.me/react-0.13.3.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>

sample

<html>
    <head>
        <script src="http://fb.me/react-0.13.3.js"></script>
        <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
    </head>
    <body>
        <div id="app"></div>

        <script type="text/jsx">
            var Test = React.createClass({
            render: function(){
            return (
                <p>This is React Test!</p>
            );
        }
        });

        var m = React.render(<Test />, document.getElementById('app'));
        </script>
    </body>
</html>

vue.js vs react.js


reactの基本は知っておく必要があるかもだが、vue.jsの方が強いな。

.editorconfigとは？

EditorConfigとは？
-> インデントや文字コード、改行コードなどコーディングスタイルに関するエディタの設定を異なるエディタ間で共有する規格

laravel5.8のdefault EditorConfig

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.yml]
indent_size = 2

indentは4になってますね。

sublimeのeditorConfig
https://github.com/sindresorhus/editorconfig-sublime#readme
-for support
root
indent_style
indent_size
end_of_line
charset
trim_trailing_whitespace
insert_final_newline

[shift]+[command]+[p]でinstall packageを選択

EditorConfigインストール

ドキュメントルートに.editorconfigのファイルを作成し、コーディングするとタグ等が自動整形される。
すげーーーーーーーー、採用!

フロントエンドのアーキテクチャを考える

フロントエンドをどうするか？というと抽象的なので、言い方を変えると、どの技術を採用するか？
時代の潮流に合わせるのは鉄板か？

フレームワーク
– 第一候補 Vue.js
– 第二候補　React, Typescript
– 補欠 Angular, coffee

CSS周り
– Sass + Gulp

ライブラリー
– jQuery

命名規則
– BEM

コードフォーマッタ
– Prettier

構文チェック
– ESLint

グラフィック
– Fabric.js, three.js

その他
– Babel, Webpack
– コーディングガイドライン作成、コンポーネント一覧作成

こんなところか。
最低限、GAFAは見ておこう。

Google

- Experience with and passion for user-interface design.
- Knowledge of web libraries and frameworks such as AngularJS, Polymer, Closure or Backbone.
- Demonstrated sense of web design and attuned to the fundamentals of user experience, including accessibility.

Apple

-Experience with MongoDB and Node.JS
-Data visualization with D3.js or other framework
-Proficient understanding of client-side scripting and Javascript frameworks, including React, Typescript, Bootstrap, NPM

Facebook

- 3+ years of JavaScript experience, including concepts like asynchronous programming, closures, types, and ES6. Experience with React is a bonus
- Aware of but not reliant on object oriented frameworks (Prototype JS, MooTools, Dojo, etc.)

Amazon

- Strong knowledge of web technologies including: HTML5/CSS3/JavaScript, XML, JSON, React/Angular, web and server programming
- Passion to design and develop intuitive user interfaces

うーん、どこもUIへのpassionって書いてるなーww
node.js, react/angular、ES6は入れておいた方が良さそう。

ヤフー

React + Redux
TypeScript
Redux-thunk
Redux-first-router
Storybook
Jest
styled-jsx(Sassを書けるようにプラグイン入れてる)
Node.js

メルカリ

TypeScript, React.js, Next.js, Redux etc
Circle CI, GitHub, Slack, JIRA, Crowi, Spinnaker

Reduxも必須だな。
頭蒸発しそうだ。。