Reactの基礎１

Reactはユーザインターフェイス(UI)を作成することに特化したJavascriptのパッケージです。

# 環境構築

Windowsでnode.jsをインストールしておきました。エディターはvscodeでvscode上でコマンドプロンプトを動かして操作します。詳しくは以下の記事をご覧ください。

https://qiita.com/gumiTECH/items/4b82e4e3757f226df6b0

https://qiita.com/hiro949/items/8f992bdafa8f90828b62

ターミナルで
“`
npm install -g create-react-app
create-react-app tutorial
“`

と入力してreactが使えるディレクトリtutorialを作り、この中でデモをやっていきます。

以下の記事の通りにやれば、補間機能も設定できます。

https://mattdufeu.co.uk/blog/setup-intellisense-vscode-react-js/

# 実行

ターミナルで

“`
npm

jQueryで画像複数アップロードを作ったよ

# 解説

ファイルを複数選択してドラッグ＆ドロップしてファイルをアップロードする処理を書きました。
Deferredを使って、ファイルアップロードが全部終わったらローディングアイコンを消すようにしました。
※サーバ側の処理は自分で実装してください…。

# 実装

## HTML

“`html

ここにファイルをまとめてドロップ

“`

## CSS

“`css
.drop_area_multiple {
border: 2px dashed gray;
text-align: center;
background: #ffffff;
width: 447px;
line-height: 150px;
}
.dragtarg

【JavaScript】ダークモードの切り替えボタン

ダークモード始めましたか？

エディターをダークモードにしたのがきっかけで、OS、アプリとダークモード始めました！
ダークモードに慣れてしまうと、ダークモード非対応のサイトがめっちゃ眩しい…:persevere:

というわけで、ユーザーの好みに応じてサイトのカラーモードを切り替えられるボタンを作ってみました！

ちなみに…
私はドラキュラテーマの大ファンです。
エディターだけかと思ったら、たくさんのアプリにも対応してくれています。
いっそのことWindowsのOS自体も対応してほしい！

以下のアプリにドラキュラテーマを適用しています。

* Visual Studio Code
* Chrome
* Firefox
* Thunderbird
* Slack

FileZilla にも対応してくれないかな…

https://draculatheme.com/

## 仕様

ブラウザを開いてる間変更したカラーモードを保存するため、セッションストレージを利用します。

* ページ読み込み時のカラーモード
* セッションストレージなし
* OSのカラーモード
* セッ

世界一優しいReactの基本その6 -exportの種類とは-

## はじめに
前回はReactの再レンダリングを学びました。最後にReactのexportの種類についてを書いていきたいと思います。

https://qiita.com/k-tetsuhiro/items/c31dd0dc57a0b2bed902

## 通常のexport
Reactではexportすることによって、コンポーネントの取り込みを行ってきました。

通常のexport
“`components/SampleComponent.jsx
export const SampleComponent = () => {
//　実装
};
“`

import側
“`App.jsx
import { SampleComponent } from “./components/SampleComponent”
“`

ただし、分割代入のイメージと同じで、対象となるexportがないとエラーになります。
“`App.jsx
// TestComponentはないのでエラーになる
import { TestComponent } from “./components/Sa

世界一優しいReactの基本その6 -再レンダリングとは-

## はじめに
前回はReactのStateを学びました。今回はReactの再レンダリングについてを書いていきたいと思います。

https://qiita.com/k-tetsuhiro/items/07118dd9cf7290149ba5

## 再レンダリング
Reactの重要な機能のPropsやStateについてマン出来ましgたが、これらに加えて再レンダリングについて知る必要があります。前回作ったボタンを押すとカウントアップするAppですが、画面をリロードしていないのに、ボタンを押すとカウント数が自動で更新されていました。これは**コンポーネントが再レンダリング**されたからです。

sandboxApp: https://codesandbox.io/s/use-staet-te

世界一優しいReactの基本その5 -Stateとは-

## はじめに
前回はReactのPropsを学びました。今回はReactの重要なStateについてを書いていきたいと思います。

https://qiita.com/k-tetsuhiro/items/99f7d34ac72b2f941404

## State
Reactでは**stateを用いて状態の管理**を行います。
例えば、以下のようなものが考えられます

– ボタンが押せるかどうか
– エラーがあるか
– テキストボックスの中身の値

このようにユーザーの操作によって値が変化する状態をstateを用いて管理します。

### useState
Reactでは`React Hooks`と呼ばれる機能の中で`useState`という便利な機能があります。
これをimportすることで簡単にstateの管理が出来ます

“`jsx
import { useState } from ‘react’;
“`

useStateの使い方は実にシンプルで、1つ目にState変数、2つ目にそのStateを更新するための関数を定義します。例えばnumという変数を管理したい場合以下のよう

世界一優しいReactの基本その4 -Propsとは-

## はじめに
前回はReactのイベントとスタイルを学びました。今回はReactの重要なPropsについてを書いていきたいと思います。

https://qiita.com/k-tetsuhiro/items/cb30125d81a80ad37e5d

## Props
Propsとはコンポーネントに渡す変数のようなものです、
コンポーネントは受け取ったpropsの値を使って処理を行います。

例えば文字を表示するコンポーネントがあった場合、『通常時は黒文字、エラー時は赤文字』を表示する場合、それぞれコンポーネントを用意するのではなく、コンポーネントのスタイルを変数によって動的に切り替えたいと思います。

※コンポーネントについてはこちら

https://qiita.com/k-tetsuhiro/items/88ae3c7eee4aa78942b8

### Propsの基礎
Propsの基礎を実際のコードで学んでいきたいと思います。

まずは下記のようなスタイルが適用されているAppコンポーネントがあります。

“`App.j

ファイルから日本語とスペイン語の文章をそれぞれ順番に読み上げていくスクリプト

ファイルから日本語とスペイン語の文章をそれぞれ順番に読み上げていくスクリプト

ファイルから日本語とスペイン語の文章をそれぞれ順番に読み上げていくスクリプトをJavascriptで作りました

2022.09.11 スペイン語と日本語の読み上げ順序を入れ替えました

---

githubURL: https://github.com/NanjoMiyako/spanishAndJapaniseSpeak
gitHubPageURL: https://nanjomiyako.github.io/spanishAndJapaniseSpeak/

---

使い方
以下のような形式のcsvファイルをページから読み込み、読み上げボタンを一回クリックしてから
待つと、順番に読み上げ始めます

日本語文1,スペイン語文1
日本語文2,スペイン語文2
…

---

スクリーンショット
![scnshot1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412430/16e2

世界一優しいReactの基本その3 -イベントとスタイルとは-

## はじめに
前回はReactのコンポーネント基本を学びました。今回はイベントとスタイルいうところを書いていきたいと思います。
https://qiita.com/k-tetsuhiro/items/88ae3c7eee4aa78942b8

## イベント
Reactにおけるイベントは少し書き方が異なります。
例えばクリックイベントはjsの場合`onclick=xxx`のように書くとおもいますが、
Reactのjsxの場合は`onClick=xxx`のように**キャメルケース**で記載します。

“`jsx
ボタン
“`

## スタイル
スタイルも同様に記載の仕方が通常のhtmlとは異なります。
Reactでは各タグにstyle属性を当てられるのですが、下記のような書き方をします。

“`jsx

タイトル

“`
`style={{}}`となっているのは、**JavaScriptのオブジェクト**を値として入れるためです。
ここでいうJavaSc

Chromeデベロッパーツールの背景画像を変える?

こんにちは。皆さんはChromeデベロッパーツール使ってますか？
VSCodeでもvimでも、テキストエディタでは背景画像やテーマが変えられる拡張機能がありますよね。
じゃあ、Chrome devtoolsは…？と興味本位で調べると、英語でも全然やってる人がいない。

ということで、今回は軽くChromeデベロッパーツールの背景画像（background image）を変えてしまうやり方をシェアします。

（蛇足： 先日[こういうアプリ作ったよ記事](https://qiita.com/yuipapps/items/62d638ca06e06c5693f0)をQiitaに上げていて、このQiitaアカウントではReact.jsとかNext.jsとか、開発に関連する学習記事を上げていく予定でしたが、
Qiitaアカウントの切り替えが面倒なので、このアカウントのまま投稿することにします?）

## 早速、Chromeデベロッパーツールの背景画像を変える

ではやっていきましょう。
まず、完成図がこちら。

![ShareX-220910T154106-K2NzIxHh~chrome-De

React@18 での Signals もどき

# Signals とは

Preact に Signals という新しい機能が追加されました。
> [Introducing Signals – PREACT](https://preactjs.com/blog/introducing-signals/)
> [Signals – PREACT](https://preactjs.com/guide/v10/signals)

次のような感じで、State のバケツリレー問題を Context などよりも軽やかに解決してくれそうなものです。

“`jsx
import { signal } from “@preact/signals”

const count = signal(0)

const Counter = () => {
const increment = () => {
count.value++
}

return (

Count: {count.value}

click me

ActiveHashを用いたプルダウンメニューでの検索機能の備忘録

オリジナルの写真投稿アプリを制作した際にActiveHashを用いたプルダウンメニューでの検索機能を実装したので備忘録に残します。
ransackを用いて実装しています。
ActiveHashの作成については書いていません。

### Gemの導入
Gemfileの最下部へ以下を記述してインストール
“`
gem ‘ransack’
“`
“`
bundle install
“`

### ルーティングを設定
検索結果を一覧で表示したいので検索結果ページへのルーティングを記述する
collectionオプションでpostsコントローラー内のseachアクションに繋がるように設定
“`:routes.rb
resources :posts do
collection do
get ‘search’
end
end
“`

### コントローラーにseachアクションを記述

“`:posts_controller.rb
def search
@q = Post.ransack(params[:q])
@items = @q

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript いびつなリバーシ対戦

# いびつなリバーシ対戦 (paizaランク A 相当)
https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_pincerattack_boss
解いてみました。

## 解答コード例（JavaScript）
縦横斜めを一つ一つ書きました。
“`javascript:javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//盤面の行数 H ,列数 W , プレイヤーの人数 N , 全プレイヤーの合計ターン数 n
const [H, W, N, n] = lines[0].split(” “).map(Number);
//盤面
const board = lines.slice(1, H + 1).map(line => line.split(“”));
//石を置いていく
for (let turn = 1

既存のソースをオブジェクト対応にした苦労ばなし

# 概要
すでにあるソースコードをオブジェクト対応にしたいと思い、試行錯誤したサンプルです。
可読性の悪い既存のソースを可読性のよいオブジェクト対応にしてみました。サンプルに取り上げたソースはGoogleブログで構築した自前のサイトです。このブログサイトにある目次処理のソースコードをオブジェクト対応にしてみました。
# 目次について
目次処理しているソースを開発エディターで見渡してどこをどうオブジェクトにするかの見当をつける。
目次処理に必要なデータは、ブログの全投稿データで、そのデータから目次に必要なデータを抽出して目次データを作っています。
その処理をどこで行っているかを調べます。

ブログの目次は何のために作ったかと言うとそれは、ブログには元々アーカイブでブログ一覧がありますが、どちらかと言うと少々、わかりづらいため、もう少し、見やすいブログ一覧を作りたいということからです。

目次のあるサイト
https://tecoyan.blogspot.com/#main
このページのサイドバーにある「〇人生の応援歌」が目次になります。ここの処理をオブジェクト対応します。オブジェクト対応

Python,Ruby,PHP,Java,JavaScript,Perlのwhile文の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlのwhile文の比較

# Python

https://qiita.com/Morio/items/10d33f6dbb0845ae5038

# Ruby

https://qiita.com/Hashimoto-Noriaki/items/f406bcfb00e79e3937d0

# PHP

https://qiita.com/miriwo/items/2c2aa77d5de66c074ec5

# Java

https://qiita.com/takahirocook/items/05bfe37bb4ba64f3a78e

# JavaScript

https://qiita.com/kaz7991/items/7f98cc17c4df9ab6a009

# Perl

https://perlzemi.com/

#React + fullcalendar + Steinでスプレッドシートをカレンダー化する

## Glideで予約表作ったら紙以下と言われたので仕方なくReactでつくってます

部内の会議室予約が紙ベースで嫌だったので、電子化することにしました。
あまり時間をかけたくないと考え、ノーコードツールの[glide](https://www.glideapps.com/)で作ったのですが、操作感がいまいちだったため、**紙以下**と言われてしまいました
頭にきたので**React + fullcalendarで一から作ってやろう**と言うのが前回記事でした。

https://qiita.com/watanabe-tsubasa/items/12892b4711bf1526051e

## スプレッドシートのデータをfullcalendarのフロントに反映させる

glideで作ったアプリはスプレッドシートをデータベースとして利用していた都合上、同じスプレッドシートのデータを読み込んで、Reactで作成したフロントに反映させることを考えました。
今回は[Stein](https://steinhq.com/)を用いて、スプレッドシートをAPI化して、データを反映させていきます。

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 編 リバーシの操作（縦横）

リバーシの操作（縦横）
https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_pincerattack_step2
を解いてみました。

“`javascript:javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//出力する盤面の行数 H , 列数 W と石を置くマスの y , x 座標である Y , X
const [H, W, Y, X] = lines[0].split(” “).map(Number);
//盤面を作る
let board = lines.slice(1,H + 1).map(line => line.split(“”));
//盤面の ( Y , X ) に石を置き
board[Y][X] = ‘*’;

//石を置いたY行目について、Y固定
//石を置いた左側、盤面の中を調べる

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript編 裏返せる可能性（縦横）

裏返せる可能性（縦横） (paizaランク C 相当)
https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_pincerattack_step1
を解いてみました。

解答例1
盤面を作りながら`!`,`*`,`.`を置いていく。
“`javascript:javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//出力する盤面の行数 H , 列数 W と石を置くマスの y , x 座標である Y , X
const [H, W, Y, X] = lines[0].split(” “).map(Number);
//盤面を作る
let board = [];
//行について
for (let i = 0; i < H; i++) { //列について let board_j = []; f

Viteで本番と開発環境で変数を変えたい

## 本番と開発環境で叩くAPIのURIを変えたいなぁ
そういうときってあるよね。.envでなんとかするんだったけど、どうするんだっけな〜と毎回ググることになるのでここにメモ。

## 手順
1. .env.devと.env.productionファイルを用意する
2. 変数を“`VITE_API_URL=https://*****/**/api“`とする
3. 使いたいところで“`export const API_URL = import.meta.env.VITE_API_URL;“`とする
4. devとbuildのときに変数を渡す

.env.devと.env.productionファイルを用意する
変数を定義する

“`text:.env.dev
VITE_API_URL=https://dev-server***.jp/api
“`

“`text:.env.production
VITE_API_URL=https://prod-server***.jp/api
“`

注)VITE_という名前をつけておかないとvite側で.envの変数を認識してくれ

viteでbuild時にconsole.logを削除する

## build時に自動的にconsole.logを削除してほしい

そもそもeslintでconsole.logはwarnにしているわけですが、手っ取り早くlogを取りたいときもあってたまにconsole.logを使ってしまいます。

そんなときはこれ！

## vite-plugin-remove-console

“`sh
npm install vite-plugin-remove-console -D
“`

## configはこうだ

“`TypeScript:vite.config.ts
import { defineConfig } from ‘vite’;
import removeConsole from ‘vite-plugin-remove-console’;

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
removeConsole()
]
});
“`

これでデバッグ用のconsole.logを削除できます。まあdebugとか使ったほう