React + TypeScript + SemanticUIでブラウザメモ帳の作り方を解説

この記事の最終更新日: 2023年4月21日

まず、Reactプロジェクトを作成します

npx create-react-app browser-memo --template typescript
cd browser-memo

次に、Semantic UI ReactとSemantic UI CSSをインストールします

npm install semantic-ui-react semantic-ui-css

ここで、src/App.tsx ファイルを以下のように編集します。

import React, { useState, useEffect } from 'react';
import { Container, TextArea, Button } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';

const LOCAL_STORAGE_KEY = 'browserMemo';

const App: React.FC = () => {
  const [memo, setMemo] = useState('');

  useEffect(() => {
    const storedMemo = localStorage.getItem(LOCAL_STORAGE_KEY);
    if (storedMemo) {
      setMemo(storedMemo);
    }
  }, []);

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setMemo(e.target.value);
  };

  const handleSave = () => {
    localStorage.setItem(LOCAL_STORAGE_KEY, memo);
  };

  return (
    <Container>
      <h1>ブラウザメモ帳</h1>
      <TextArea
        value={memo}
        onChange={handleChange}
        rows={20}
        style={{ width: '100%' }}
      />
      <Button primary onClick={handleSave} style={{ marginTop: '1rem' }}>
        保存
      </Button>
    </Container>
  );
};

export default App;

そして、src/index.tsx ファイルを以下のように編集して、Semantic UI CSSをインポートします。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'semantic-ui-css/semantic.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

これで、React + TypeScript + SemanticUIで作成されたブラウザのメモ帳アプリケーションが完成しました。アプリケーションを起動して動作を確認しましょう。