ChatGPTでアプリ開発記 20250430

投稿に時間を追加する

不明箇所は、一行ずつ理解する。

import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('');
  const [posts, setPosts] = useState([]);

//イベントハンドラ関数といい、フォームが送信されたときに呼ばれる関数で、
//(e)は「イベントオブジェクト」といって、「ボタン押したよ！」という情報。
  const handleSubmit = (e) => {
  
//ブラウザの「フォーム送信したらページをリロードする」という標準動作を止める命令です。
//これをしないと、投稿のたびにページがリロードされる。
    e.preventDefault();
    
//入力が空っぽなら、何もしないで終わるようにしています。
//スペースだけの投稿を防ぐために、trim()で空白を除去しています。
    if (text.trim() === '') return;

    const now = new Date();
    const formattedTime = now.toLocaleString('ja-JP', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
    
//新しい投稿データを作っています。
//入力テキストと投稿時間を1つのオブジェクトにまとめた形です。
    const newPost = {
      text: text,
      time: formattedTime
    };

    setPosts([newPost, ...posts])
    
//投稿したら、フォームの中身を空っぽにリセットしています。
    setText('');
  };

//ここから「画面に表示する内容」を書く。
  return (
    <div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
      <h1>SNS</h1>
      
<!//投稿用のフォーム開始。
//onSubmitで、フォームを送信したときにhandleSubmit関数を呼び出します。
      <form onSubmit={handleSubmit}>
        <textarea
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="今なにしてる?"
          rows="4"
          cols="50"
          style={{ display: 'block', width: '100%', marginBottom: '1rem' }}
        />
        <button type="submit">投稿する</button>
      </form>

      <div style={{ marginTop: '2rem' }}>
        <h2>投稿一覧</h2>
        {posts.map((post, index) => (
          <div key={index} style={{ padding: '1rem', borderBottom: '1px solid #ccc' }}>
            <div style={{ fontSize: '0.8rem', color: '#666' }}>{post.time}</div>
            <div>{post.text}</div>
          </div>
        ))}
      </div>
    </div >
  );
}

//このAppコンポーネントを他の場所でも使えるように「エクスポート」しています。
export default App;