すべてのカテゴリ

React で入力フィールドの文字を表示するステップ５では入力フィールドに入力された文字を Reactde 表示する方法です。これも、React と Vue では若干違ったやり方になります。この記事では React で実現する二つの方法を紹介しています。リファレンスを使う方法Vue では「v-model」という方法を使って、入力フィールに入力された文字と変数を結びつけていました。（binding）React でも似たような機能としてリファレンス（reference）ができます。import React, { useState } from "react";import "./styles/step5.css";export default function Step5(): JSX.Element {  const fieldValue: React.RefObject<HTMLInputElement> =    React.createRef<HTMLInputElement>();  const [value, setValue] = useState("");  return (    <React.Fragment>      <div className="step5">        <input type="text" ref={fieldValue} onChange={() => getValue()} />        <p>{value}</p>      &lt

ライフコーチングの過程で「ステートにアクセスする」ということについて考えてみたいと思います。ライフコーチングでクライアントと向き合っていると、「何をすべきか」は分かっているのに、なぜか行動できない、あるいは同じ行動をしているのに結果が安定しない、という場面にしばしば出会います。その背景には、多くの場合「能力」や「意志の強さ」「モチベーションの高さ」ではなく、その人がどんな状態（ステート）にあるかという問題があります。NLP（神経言語プログラミング）では、この「状態」を非常に重視します。ここで言うステートとは、単なる気分や感情だけではありません。思考の方向性、頭の中に浮かぶイメージ、内的な言葉や音、身体感覚、姿勢や呼吸といった生理的な要素までを含んだ、心身の総合的な状態を指します。同じ人が、同じ能力を持っていても、ステートが違えば行動の質は大きく変わります。不安や焦りの中では視野が狭くなり、選択肢が見えなくなります。一方で、落ち着きや自信、好奇心といったリソースフルな状態にあると、柔軟な発想や建設的な行動が自然と引き出されます。ライフコーチングにおいて重要なのは、「問題をどう解決するか」以前に、その問題に向き合っているとき、クライアントがどんなステートにいるのかを丁寧に扱うことです。NLPの「ステートにアクセスする」とは、まさにこの視点を実践的な形にしたものだと言えます。ステートにアクセスするとは、現在の状態（present state）から、より望ましい状態（desired state）へと、意識的に自分を移行させるための方法です。ここでいう望ましい状態とは、必ずしも「ポジティ

Reactのステートは注意が必要です！Reactを利用してフロントエンドのUI（ユーザーインターフェース）を作ると、変更があった部分だけを書き換えてくれるので便利です。これに関連して、前回投稿した変数の扱いでReactのステートを使う場合には注意する必要があるという話を書きました。これに関しては、ご質問が多かったのでもう少し詳しく書いて行く事にします。この機能を利用するには「ステート（state）」で変数を管理して、ステートの変化のイベントを検出する必要があります。ところが、配列やオブジェクトはReactのステートではイミュータブルではないので、正しく実装しないと意図した動作をしない事があります。入力した文字列を配列に追加するアプリ少し具体的な例で説明をします。 シンプルなあぷりとして、文字列を入力する「input」とボタンのシンプルなフォームでボタンが押されたら、入力された文字列を配列に追加するアプリを考えます。これを、Reactのクラスコンポーネントで書くとimport React from "react";import { produce } from "immer";import "bootswatch/dist/spacelab/bootstrap.min.css";import "./App.css";interface IProps {}interface IState {  samples: Array<string>;}class App extends React.Component<IProps, IState> {  privat