Reactチュートリアル useState() Props

table of contents

todoリスト

参考サイト：
https://www.youtube.com/watch?v=nRCNL9T3J98

ノードjsインストール確認、Reactひな型作成

PS C:\Users\…\react-project> node -v
v18.17.1
PS C:\Users\…\react-project> npx create-react-app react-tutorial

→完了するとHappy hacking!の表示

不要なファイルの削除\src\App.test.js src\logo.svg \src\reportWebVitals.js \src\setupTests.js

コンポーネントの作成

▼\src\TodoList.jsを作成

VSCodeプラグインES7+ React/Redux/React-Native をインストールしていればrafceタブ補完と入力すれば下記のように関数コンポーネントが入力されます

import React from 'react'

export const TodoList = () => {
  return (
    <div>TodoList</div>
  )
}

▼App.jsを編集

インポートの記載

import { TodoList } from "./TodoList";

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

入力欄、ボタン作成

▼.js

import TodoList from "./TodoList";

function App() {
  return (
    <div className="App">
      <div>
        <TodoList />
        <input type="text" />
        <button>タスクを追加</button>
        <button>完了したタスクの削除</button>
        <div>残りのタスク：0</div>
      </div>
    </div>
  );
}

export default App;

1）useStateで状態を監視→変更で再レンダリング
2）propsでtodos={todos}でコンポーネント間のデータの受け渡し

▼App.js

import { useState } from "react";
import TodoList from "./TodoList";

function App() {
  const [todos, setTodos] = useState(["Todo1", "Todo2"]);

  return (
    <div className="App">
      <div>
        <TodoList todos={todos}/>
        <input type="text" />
        <button>タスクを追加</button>
        <button>完了したタスクの削除</button>
        <div>残りのタスク：0</div>
      </div>
    </div>
  );
}

export default App;

useState()

useState()は、関数コンポーネントでstateを管理（stateの保持と更新）

stateとはコンポーネントが内部で保持する「状態」

▼TodoList.js

import React from 'react'

const TodoList = ({ todos }) => {
  return (
    <div>{todos}</div>
  )
}

export default TodoList

Todo.jsを作成（各タスクをコンポーネントにおきかえる）

▼TodoList.js

import React from 'react';
import Todo from './Todo';

const TodoList = ({ todos }) => {
  return todos.map((todo) => <Todo todo={todo} />);
}

export default TodoList

▼Todo.js

import React from 'react'

const Todo = ({ todo }) => {
  return (
    <div>{todo}</div>
  )
}

export default Todo

todoをオブジェクトとして管理

▼App.js

function App() {
  const [todos, setTodos] = useState([
    { id: 1, name: "Todo1", completed: false },
  ]);

▼Todo.js

const Todo = ({ todo }) => {
  return (
    <div>{todo.name}</div>
  )
}

チェックボックスの実装（チェックオンオフは後から実装）

▼Todo.js

    <div>
        <label>
            <input type="checkbox" checked={todo.completed} readOnly />
        </label>
        {todo.name}
    </div>

タスクの追加　
useRefで要素の取得（オブジェクトにおけるスプレッド構文の追加）

▼useRefで取得した内容をconsole.log()で確認

▼App.js

import { useState, useRef } from "react";
import TodoList from "./TodoList";

function App() {
  const [todos, setTodos] = useState([
    { id: 1, name: "Todo1", completed: false },
  ]);

  // useRefでinputの値を取得
  const todoNameRef = useRef();

  // タスクを追加する
  const handleAddTodo = () => {

    const name = todoNameRef.current.value;

    // 空白のタスクを生成しない
    if(name === "") return;

    // setTodosでTodosの内容を更新
    // オブジェクトにおけるスプレッド構文の追加
    setTodos((prevTodos) => {
      return [...prevTodos, { id: "1", name: name, completed: false }];
    });

    todoNameRef.current.value = null;
  };

  return (
    <div className="App">
      <div>
        <TodoList todos={todos}/>
        <input type="text" ref={todoNameRef} />
        <button onClick={handleAddTodo}>タスクを追加</button>
        <button>完了したタスクの削除</button>
        <div>残りのタスク：0</div>
      </div>
    </div>
  );
}

export default App;

対応）Warning: Each child in a list should have a unique “key” prop.

uuidインストール

ユニークキーの生成が可能

▼npm install uuid→package.jsonにてインストールの確認ができます

  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "uuid": "^9.0.1",
    "web-vitals": "^2.1.4"
  },

▼App.jsを編集

import { useState, useRef } from "react";
import { TodoList } from "./TodoList";
import { v4 as uuidv4 } from 'uuid';

function App() {
  const [todos, setTodos] = useState([
    { id: 1, name: "Todo1", competed: false }
  ]);

  const todoNameRef = useRef();

  const handleAddTodo = () => {
    // タスクを追加
    const name = todoNameRef.current.value;
    setTodos((prevTodos) => {
      return [...prevTodos, { id: uuidv4(), name: name, completed: false }]
    });
    todoNameRef.current.value = null;
  };

▼TodoList.jsを編集

export const TodoList = ({ todos }) => {
  return todos.map((todo) => <Todo todo={todo} key={todo.id}/>);
}

初期値をから行列にApp.js

function App() {
  const [todos, setTodos] = useState([]);

toggleTodoでチェックボックスを管理

▼App.jsを編集


  // チェックボックスの操作
  const toggleTodo = (id) => {

    // 直接値を変更しない為newTodosにコピーしている
    const newTodos = [...todos];

    // 引数のidとtodoのidが一致したら、completedを反転
    const todo = newTodos.find((todo) => todo.id === id);
    todo.completed = !todo.completed;
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <div>
        <TodoList todos={todos} toggleTodo={toggleTodo} />
        <input type="text" ref={todoNameRef} />
        <button onClick={handleAddTodo}>タスクを追加</button>
        <button>完了したタスクの削除</button>
        <div>残りのタスク：0</div>
      </div>
    </div>
  );
}

export default App;

▼TodoList.jsを編集


const TodoList = ({ todos, toggleTodo }) => {
  return todos.map((todo) => <Todo todo={todo} key={todo.id} toggleTodo={toggleTodo} />);
}

▼Todo.jsを編集

import React from 'react'

const Todo = ({ todo, toggleTodo }) => {

    const handleTodoClick = () => {
        toggleTodo(todo.id);
    };

    return (
        <div>
            <label>
                <input 
                    type="checkbox" 
                    checked={todo.completed} 
                    readOnly 
                    onClick={handleTodoClick} 
                />
            </label>
            {todo.name}
        </div>
    )
}

export default Todo

残りのタスクの数をいれる

▼App.jsを編集


    <div className="App">
      <div>
        <TodoList todos={todos} toggleTodo={toggleTodo} />
        <input type="text" ref={todoNameRef} />
        <button onClick={handleAddTodo}>タスクを追加</button>
        <button>完了したタスクの削除</button>
        <div>残りのタスク：{todos.filter((todo) => !todo.completed).length}</div>
      </div>
    </div>

完了したタスクの削除

  // 完了したタスクの削除
  const handleClear = () => {
    const newTodos = todos.filter((todo) => !todo.completed);
    setTodos(newTodos);
  }

  return (
    <div className="App">
      <div>
        <TodoList todos={todos} toggleTodo={toggleTodo} />
        <input type="text" ref={todoNameRef} />
        <button onClick={handleAddTodo}>タスクを追加</button>
        <div>残りのタスク：{todos.filter((todo) => !todo.completed).length}</div>
        <button onClick={handleClear}>完了したタスクの削除</button>
      </div>
    </div>
  );
}

レンタルサーバで公開

参考サイト：https://zenn.dev/kiriyama/articles/538face511307d

▼package.jsonを編集

{
  "homepage": "https://xx/",

▼\public.htaccessを作成（publickフォルダに「.htaccess」のファイルを作成）

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

▼プロジェクトディレクトリで下記のコマンドでビルド

npm run build

buildというフォルダが作成されるので、その中身をFTPでアップロード

アップロードしたサイト：https://internet.mints.ne.jp/react-todo/

正社員として就職以外の手段

インターン
交流会　…　Webディレクターが来ている場合もある
アルバイト
業務委託　…　数か月契約を結ぶ、フリーランスとして

面接の内容

面接って実際どんなこと聞かれるの？？？？

面接で質問されたことをまとめました。特によく聞かれたのは以下のポイントです。

なぜうちの会社
今までのキャリア
WEB制作を始めたきっかけ / なぜ異業種からWEB業界
現在の仕事の退職時期
どのような仕事がしたいですか？
扱える言語は？
前職の退職理由
フリーランスから就職する理由
キャリアビジョン
志望理由

最低限、これらは面接できちんと言えるように用意しておいた方がいいと思います。

回答のポイント

志望動機（なぜうちの会社？）

事業内容や経営理念から独自の魅力や特徴を見付ける→同じような事業を行っている他社との差別化のポイントを見つける

例）御社のホームページ拝見し、多彩な業務内容があり、キャリアステップの面からかも多くのことを経験できる点が魅力を感じました。いろいろな人と関わり幅広い仕事をして成長していけると思いました。

WEB制作を始めたきっかけ / なぜ異業種からWEB業界

例）私自身WEB関係の仕事に興味を持ったきっかけが、知り合いのカメラマンのホームページを作ったのが始まりです。WEB制作の学習を続ける上でWEBの仕事の興味が徐々に深まっていきました。
昨今のコロナ渦で自分の年齢と将来またを考えたとき、WEB関係での仕事をしたいと強く思いました。
未経験ですが、より良いモノを作るために手を尽くすという点は前職と同じで、よりクオリティを上げるため積極的に日々新しい技術を取り入れ行っていきたいと考えています。

例）新しいことに挑戦しようと考えていて仕事を調べていた際にWebデザインを知りました。メニューブックのデザインやロゴをつくったりしていたので、デザインには興味がありました。「Webデザインって面白そう。」と思い、Web業界への転職を目指して学び始めました。

例）コロナ渦をきっかけに今の仕事に危機感を感じ、Web制作の学習、副業をはじめました。最初は難しいなと感じましたが、学習していき徐々に理解が深まり副業で成功体験もできました。そこでこのまま頑張り仕事としてやっていくことを決意しました。

未経験分野のスキルを補うために、行なっていることを伝える

毎日時間を作り、デザインカンプからの模写や資格取得の学習をしております。

強みや弱みは何ですか

他人から言われることや、具体的なエピソードを入れると効果的です。
できれば弱みをさきに言ったほうがよいでしょう。
具体的に業務にどう役に立つかをアピール！

＜先に弱み＞
弱みは心配症なところです。
しかし石橋を叩いて渡る面も〇〇には役にたっております。

＜後から強み＞
友人からは〇〇の（エピソード）で○○は気配りができると言われたことがございます。

質問はありますか？（面接官への逆質問）

○○において早く一人前になり活躍したいと考えております。入社までに身につけておくと良い知識があればご教示いただけますでしょうか。

ポートフォリオのポイント

作品概要
担当領域、制作体制
制作課題、制作意図、こだわり
制作期間

制作実績

自分が担当した箇所を明記します。（全部した場合も）

そのサイトのURLだけでなく、自分がアピールできるポイント、苦労した点、お客様からの要望を記述したほうがよいです。

実際の案件以外のデモサイトはやめたほうがいいです。

項目	例
作品名	○○サイト、○○システム
担当箇所	構成・デザイン・コーディング一貫して担当させて頂きました。
ベーシック認証	ID : ○○、Pass : ○○
使用技術	HTML、CSS(SCSS)、JavaScript(jQuery)、WordPress、Git(Sourcetree)、PHP、MySQL、phpMyAdmin
デザインデータ	Photoshop、figma
制作期間	○○ヶ月

自己紹介

スキルやそれ以外のことも

Googleアナリティクスで分析

実際エントリーした企業様がどのページを見ているのか、見ていないのかを分析し改善していくとよりよいポートフォリオになっていきます。

メールでの応募

株式会社〇〇　

採用ご担当者様

はじめまして。〇〇と申します。
現在、システム運用の仕事を担当しております。
Web制作に興味があり副業で、
知り合いの手伝いやクラウドソーシングサービスでお仕事しております。

貴社ホームページにてフロントエンドエンジニア職、Webデザイナーの求人を拝見し、
○○ぜひ働かせて頂きたく思い、応募いたしました。ぜひ一度、面接の機会をいただけますと幸いです。

ポートフォリオサイトURL：
https://bizlabo.site/?page_id=807

お忙しいところ恐れ入りますが、ご検討のほどよろしくお願いいたします。

—————————
氏名
住所
電話番号
メールアドレス
—————————

貴社（御社）の○○に魅力を感じ

制作実績を拝見させていただきました。幅広い業種のサイトがあり、仕様やデザインが細部にまでこだわりを感じ、自分もそういった制作の現場に関われる仕事をしたいと思いました。

創業から○○年で安定した会社の基盤があるのも魅力に感じました

不採用返信

選考結果をご連絡いただき、ありがとうございます。
今後、また募集の機会がありましたら、ご検討のほどよろしくお願いいたします。
お手すきの際に、私の応募書類と面接についてフィードバックをいただければ幸いに存じます。今後の就職活動の参考にさせていただきたく思います。選考のため貴重なお時間を割いていただき、ありがとうございました。またご縁がありますことを願っております。

Reactチュートリアル useState() Props

todoリスト

ノードjsインストール確認、Reactひな型作成

コンポーネントの作成

入力欄、ボタン作成

1）useStateで状態を監視→変更で再レンダリング
2）propsでtodos={todos}でコンポーネント間のデータの受け渡し

useState()

Todo.jsを作成（各タスクをコンポーネントにおきかえる）

todoをオブジェクトとして管理

チェックボックスの実装（チェックオンオフは後から実装）

タスクの追加　
useRefで要素の取得（オブジェクトにおけるスプレッド構文の追加）

対応）Warning: Each child in a list should have a unique “key” prop.

uuidインストール

toggleTodoでチェックボックスを管理

残りのタスクの数をいれる

完了したタスクの削除

レンタルサーバで公開

おすすめエージェントサイト

Wantedly

Green

ワークポート

Webist

正社員として就職以外の手段

面接の内容

回答のポイント

志望動機（なぜうちの会社？）

WEB制作を始めたきっかけ / なぜ異業種からWEB業界

未経験分野のスキルを補うために、行なっていることを伝える

強みや弱みは何ですか

質問はありますか？（面接官への逆質問）

ポートフォリオのポイント

制作実績

自己紹介

Googleアナリティクスで分析

メールでの応募

貴社（御社）の○○に魅力を感じ

不採用返信

Reactチュートリアル useState() Props

todoリスト

ノードjsインストール確認、Reactひな型作成

コンポーネントの作成

入力欄、ボタン作成

1）useStateで状態を監視→変更で再レンダリング2）propsでtodos={todos}でコンポーネント間のデータの受け渡し

useState()

Todo.jsを作成（各タスクをコンポーネントにおきかえる）

todoをオブジェクトとして管理

チェックボックスの実装（チェックオンオフは後から実装）

タスクの追加 useRefで要素の取得（オブジェクトにおけるスプレッド構文の追加）

対応）Warning: Each child in a list should have a unique “key” prop.

uuidインストール

toggleTodoでチェックボックスを管理

残りのタスクの数をいれる

完了したタスクの削除

レンタルサーバで公開

おすすめエージェントサイト

Wantedly

Green

ワークポート

Webist

正社員として就職以外の手段

面接の内容

回答のポイント

志望動機（なぜうちの会社？）

WEB制作を始めたきっかけ / なぜ異業種からWEB業界

未経験分野のスキルを補うために、行なっていることを伝える

強みや弱みは何ですか

質問はありますか？（面接官への逆質問）

ポートフォリオのポイント

制作実績

自己紹介

Googleアナリティクスで分析

メールでの応募

貴社（御社）の○○に魅力を感じ

不採用返信

関連記事

1）useStateで状態を監視→変更で再レンダリング
2）propsでtodos={todos}でコンポーネント間のデータの受け渡し

タスクの追加　
useRefで要素の取得（オブジェクトにおけるスプレッド構文の追加）