WindowsでのReact環境構築をしてみた

# Reactの勉強をするためにViteを利用してReactの環境構築をしてみました。

## 1.Node.jsをインストールする

1-1.[公式サイト](https://nodejs.org/en)にあるインストーラーを使用してインストール

1-2.コマンドプロンプトでバージョン確認してインストールできたことを確認
“`
node -v
npm -v
“`

### —なぜNode.jsをインストールするの？—
・Node.jsに付いてくるnpmというパッケージ管理ツールでReactで使うパッケージの管理を簡単にするため
・ローカル開発サーバーを使って開発アプリの動作を確認するため

## 2.Viteの環境構築構築をする

2-1.以下のコマンドでViteプロジェクトを作成する
“`
npm create vite@latest
“`
2-2.作成するとプロジェクト名は何にするか聞かれるので任意のプロジェクトを入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com

React｜todoアプリが開発できて、開発の理解が深まるサイト

エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
約2分程度で読めるので最後まで読んでもらえると幸いです。

# 対象

– Reactのインプットが完了してお手頃なアプリを開発したい方
– フロントのみで実装したときの『データの流れ』を理解したい方

# サイトのURL

https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning

# アプリのご紹介

こんなアプリが開発できます。


# 何が学べるか？

### CRUDの開発

登録（Create）・参照(Read)・更新(Update)・削除(

Hydration mismatch回避にuseEffectを使うな

タイトルの通りです。

## Hydration mismatch

ReactなどでSSRを伴う開発をしていれば一度は遭遇したことがあるのではないでしょうか。
SSRでレンダリングされたHTMLと、それを読み込んだクライアントが同様にレンダリングしたHTML(相当)に差異が生じた際、console上に記録されるエラーです。

例えば、以下のようなケースです。

“`jsx
export function App() {
const now = new Date().toLocaleString();
return

now: {now}

}
“`

少し露骨ではありますが、サーバーでレンダリングされる瞬間と、クライアントでハイドレーションされる瞬間は多くの場合で一致しないので `now` の値が違うぞ、となるわけです。

## 回避にuseEffectを使う

SSR時は仮の値を表示しておいて、useEffectでマウント時に値を設定することで差異の発生を防ぐことができます。

“`jsx
import { useEffect, useState }

きれいだな。花火を見るゲーム。



### スペースキーを押すと花火が見れます。（スペースキーを押すだけの簡単操作のゲームです。）

#### 花火が見れるゲーム。
“`python
import http.server # HTTPサーバーの機能を提供
import socketserver # 簡単にサーバーを構築するためのモジュール
import tempfile # 一時ファイルを作成するためのモジュール
import webbrowser # デフォルトのウェ

Array.map()で配列内のオブジェクトのプロパティを変えるときに沼った。

“`js:プロパティを変更したいオブジェクトが連なった配列
let originalArray = [
{
name: Bob,
age: 15 // 1歳（=indexの数値 + 1)増やしたい
},
{
name: Nancy,
age: 15 // 2歳（=indexの数値 + 1)増やしたい
}
]
“`

“`js:ダメな変更方法
const updatedArray = originalArray.map((item, index) => {
item.age = item.age + (index + 1)
return item;
});

// => なぜかBobもNancyも17歳になる

“`

“`js:これでもダメ
const updatedArray = originalArray.map((item, index) => {
let updatedItem = item;
updatedItem.age = update

【JavaScript】高階関数について（コールバック、クロージャ、カリー化）

# はじめに
JavaScriptの高階関数などについて概要をまとめました。
概念的で難しく、かなり理解に苦しみました（まだ全て理解できていないと思います…）。
実際のプログラミングにおいて有効利用するにはもっと習熟しなければいけないと感じました。

# 高階関数
– 関数を返す関数のこと
– 関数をその他のオブジェクトと同様に扱うことで実現されている。このようなことができるプログラミング言語は、**第一級関数**を持つ、という

# コールバック関数
– 他の関数に引数として渡される関数のこと
– 例としては、Array.prototype.map()、Array.prototype.forEach()、setTimeout()など

# クロージャ
– クロージャとは、それが内包する変数や関数などをまとめて閉じ込める役割を果たすものである
– JavaScriptの関数は入れ子にすることができる
– 内側の関数は、外側の関数のスコープ内に存在する変数にアクセスできる
– 一方で、内側の関数には、外側の関数の中からしかアクセスできない
– ゆえに、ある関数の内部は閉じられたひとつの範

JavaScript: 圧縮とかLogistic Mixing

P_i(1) を i 番目のmodelが予測する次のbitが 1 である確率とする。このとき、Logistic Mixingによる最終的な予測確率 P(1) は以下のように計算される。

• x_i = stretch(P_i(1))
• P(1) = squash(Σ_i w_i x_i)

ここで

• stretch(x) = ln(x/(1-x))
• squash(x) = 1/(1+exp(-x)) (stretch の逆演算).

それぞれの予測の後、Dataを符号化する計算量を最小化するように重みが調整される。

• w_i ← w_i + η x_i (y-P(1))

ここでηは学習率(典型的な値は 0.002 から 0.01)、y は予測bit、(y-P(1))は誤予測。

## 実装
[r

javascript 簡単だと思ったタイピングゲーム作成が意外と奥の深い話になります

## タイピングゲームは自体は難しくない、日本語が難しい

夏休みの自由研究として、javascriptでタイピングゲームを作ろうと思いましたが、意外なところでつまいづいたという話。

基本的にやることは３つです。
１．問題を表示する
２．基本的にaddeventlistnerでキャッチした入力をhtmlのdivのidめがけて放り込んで、一致したら正解。
３．次の問題へ

しかしここからが沼です。

“`html:typinggame.html

タイピングゲーム

hello