フロントエンドでURLの入力とリスト表示を作る

作りたいのはブックマークサービスなので、URLを登録できて、自分が登録したURLを一覧したい。

久々に React のサイトを訪れた所、Hooks というのを使うのが今時っぽいので、まずはステートフックを使って、Input に入力した URL をステートとして保持し、一覧表示するところまでをやってみる。

ステートフックの利用法 – React

フックは関数のトップレベルで使わないといけないとか、縛りがあるようだ。 Stateless Functional Component という概念があった気がするけど、Stateless では無くなりそうだなとか思ってたら、それっぽいことが書いてあった。

これらのことを「ステートレスコンポーネント (stateless component)」だと理解していたかもしれません。これらの内部で React の state を利用できるようにしていますので、「関数コンポーネント (function component)」という名前を利用します。

とりあえず Input 置いて、Enter 押したら Input の内容がリストに保存されていくような実装をしてみた。

import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';


const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;


const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

function Test() {
    const [urls, setUrls] = useState([]);

    function onKeyPress(e) {
        const url = e.target.value;
        if (e.key === 'Enter' && url) {
            e.preventDefault();
            const newUrls = urls.concat(url);
            setUrls(newUrls);
        }
    }

    return (
        <Wrapper>
            <Title>
                URLを保存するぞ
            </Title>
            <div>
                <input
                    type="url"
                    onKeyPress={onKeyPress}
                />
                <ul>
                    {urls.map((url, index) => {
                        return <li key={index}>{url}</li>;
                    })}
                </ul>
            </div>
        </Wrapper>
    );
}

ReactDOM.render(<Test/>, document.getElementById('root'));

動いているので今日のところは良しとしよう。