Reactで「Hello World」

忙しく仕事をしていたらなかなか時間が取れず、勉強をする気力もなかったですけど、今月はひまなのでReactやNode.jsを勉強しようとしています。

JavaScriptから拡張された主なポイントは仮想DOM、JSX、単方向データフローなどですが、ちょっと風変わりなJavaScriptだと思って使えばたぶん抵抗なく使うことができると思いました。

Reactで「Hello World」

Progateさんでも勉強しつつ、ChatGPTに書いてもらってみました。

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <div>Hello, World!</div>;
}

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

いままで見てきたなかで最も複雑な「Hello World」かもしれないですが、Webアプリを作るには効率が良いのでしょうね。

Reactで「ログイン画面」

本当は最初にこちらを質問してみたのですけど、なんとなく見覚えがあるようなないようなコードが並んでいます。

import React, { useState } from 'react';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username, password }),
      });

      if (response.ok) {
        // ログイン成功の処理
        console.log('ログイン成功');
      } else {
        // ログイン失敗の処理
        console.error('ログイン失敗');
      }
    } catch (error) {
      console.error('ネットワークエラー:', error);
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="ユーザー名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="パスワード"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>ログイン</button>
    </div>
  );
};

export default Login;

JavaScriptを使った開発にも参加させてもらったことがあって、その時に見たあれやこれやとよく似ています。

「if (response.ok)」というあたり、最適化されている感があふれています。

Node.jsも勉強する予定です

Reactはフロントエンド、Node.jsはサーバサイドという感じで使われているみたいなので、特に使うアテは今のところないですが両方できるようになっておきたいと思います。

一つの技術だけでなく、多角的に勉強を進めていくのが飽きずに続けられるポイントとChatGPTも言っていましたけど、一番勉強になるのはやっぱり、実務で必要なことを勉強（仕事でもある）しているときですよね。