JavaScript関連のことを調べてみた2023年07月22日

React Hook Formを使ってバリデーションエラー時にページ上部に移動する

フォームのバリデーションエラーは、ユーザーエクスペリエンスにとって重要な要素です。ユーザーがフォームを送信しようとしたときに、何か問題があるとすぐに通知することで、問題を速やかに修正することができます。しかし、長いフォームではバリデーションエラーメッセージが見落とされることもあります。特に、エラーメッセージがページの上部にあると、ユーザーがスクロールせずには見られません。

そこで、この記事ではReact Hook FormとYupを使用して、バリデーションエラーが発生したときにページの上部に自動的にスクロールする方法を紹介します。この実装はカスタムフック内で行われ、フォームがこの挙動を共有するために再利用可能です。

## なぜそれが必要なのか？

長いフォームでは、エラーメッセージがすぐには見えない可能性があります。特に、ページの下部で「送信」ボタンを押した後、エラーメッセージがページの上部にあると、ユーザーは何が問題なのかわからないかもしれません。この問題を解決するために、バリデーションエラーが発生したときにページの上部に自動的にスクロールすると、ユーザーはすぐにエラーメッセ

CSV テキストと Markdown Table をキーボードショートカットで相互変換できる Chrome 拡張機能作ってみた

CSV テキストと Markdown Table をキーボードショートカットで相互変換できる Chrome 拡張機能作ってみました。この記事では、作ったものの仕組みや開発にあたって工夫・苦労した点などについて記します。

Chrome Web Store:

https://chrome.google.com/webstore/detail/csv2md-shortcut/fakcffdpcdlhgphdbcanlningmnoigoe

GitHub リポジトリ:

https://github.com/yamamoto-yuta/csv2md-shortcut

## 作ったもの

今回作った Chrome 拡張機能には次の機能があります:

– CSV テキストを範囲選択して Alt/Cmd + j を入力すると、 Markdown Table へ変換されたテキストがクリップボードに入る
– Markdown Table の テキストを範囲選択して Alt/Cmd + j を入力すると、 CSV 形式 へ変換されたテキストがクリップボードに入る
– それ以外で Alt/Cmd +

OutlookアドインをjavascriptとAngularとReactで試して沼ったこと

# はじめに
仕事でOutlookのアドインを試すことになったのですが、javascriptとAngularとReactの3つで試したのでそれぞれの沼ったことやすべてに共通して沼ったこと(主にmanifest.xml)を自分の備忘録用にまとめます。

# 環境
– Visual Studio Code
– Node.js v16.14.2

# 共通していること
すべてYeomanジェネレーターを使用してプロジェクトを作成しています。
ので、以下コマンドでジェネレーターをインストールする必要があります。

“`
npm install -g yo generator-office
“`

ツールの起動は以下コマンドをうつことでできます。

“`
yo office
“`
詳細な使い方は、参考にも載せているこちらの[公式ドキュメント](https://learn.microsoft.com/ja-jp/office/dev/add-ins/develop/yeoman-generator-overview)をご覧ください。

# javascript編
こちらの[公式ドキュメント

[React×TypeScript]propsでデータを渡す際の型定義について

## はじめに
propsでコンポーネントにデータを渡す際の型定義のテクニックについて書いていきます。

## 型定義について
コードを書いていきます。
“` page.tsx
type text = {
name: string;
age: number;
}

return (
<>


)
“`
まずは、親コンポーネントであるpage.tsxでpropsで送るデータの型を決めます。
そして、子コンポーネントであるPractice.tsxにpropsを渡します。
この時に、nameはstring型に、ageはnumber型に設定してるので、それ以外の型のを渡そうとすると、以下のようにエラーになります。
![スクリーンショット 2023-07-21 20.57.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/3d7fdaad-633e-1955-e8b

ニコ生ゲームの個人用tipsみたいなやつ。

ツイッターでタグ付きでいつでも確認できるように書いてたけど、表示に反映されないことがあるのでこっちにメモ。

もしかしたらいつかみんなの役に立つかもしれません。

# 自分なりのカウントダウン処理

“`javascript:main.js

let CountFont = new g.DynamicFont({
game: game,
fontFamily: “Dela Gothic One”,
size: 48
});

let CountLabel = new g.Label({
scene: scene,
text: “5”,
font: CountFont,
fontSize: CountFont.size,
textColor: “black”,
anchorX :0.5,
anchorY: 0.5,
x: g.game.width/2,
y: 680,
hidden: true
});
scene.append(CountLabel);

scene.setTime

【JavaScript】【Jquery】文字列の配列をINT(数値型)にする

コード
“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var aaa = [‘1′,’2′,’3’].map(Number);
console.log(aaa);
“`

# 結果
“`javascript
[1,2,3]
“`

AIの力で懇親会を盛り上げる – 15周年記念イベントでの共通点探しゲーム


# 1.導入

今回は、 **AIを用いた共通点探しゲーム** の記事になります。

当社の15周年記念イベントは、従業員間の団結、働く喜び、そして仲間、お客様、パートナーへの感謝、未来への挑戦意識の共有といった価値を強調する場として設けられました。このイベントを成功させるため、多くの仲間と共にプロジェクトチームを組み、特別な瞬間を創出することに努力を注ぎました。

その結果、事前に行われたワークショップ、当日の洗練されたプレゼンテーション、そして当社の歴史を振り返る映像など、多様なプログラムが実施され、参加者には忘れられない体験を提供することができました。

私が参加した懇親会プロジェクトチームでは、 **AIを活用した「よりそう一枚岩　共通点探しゲーム

[悪用禁止] ブラウザだけでカメラ、キャプチャ、VideoやCanvasを録画してダウンロード

# TL;DR
## MediaStreamの取得
“`js
// mediaStreamの取得(video/canvas)
stream = document.querySelector(‘canvas’).captureStream()

// mediaStreamの取得(画面キャプチャー)
stream = await navigator.mediaDevices.getDisplayMedia()

// mediaStreamの取得(Webカメラ)
stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
“`

## MediaRecorderの作成
“`js
function processMediaWhenStop(stream, onStop) {
const mime = MediaRecorder.isTypeSupported(“video/webm; codecs=vp9”) ? “video/webm; codecs=vp9” : “video

React Hook FormとZodを活用した複数フィールドのバリデーションチェック

今回は、React Hook FormとZodを活用して、複数のフォームフィールドのバリデーションを効率的に行う方法について詳しく解説します。

# 開発環境
– react-hook-form: v7.15.4
– zod: v3.11.6

# はじめに
React Hook Formは、Reactでのフォームバリデーションを効率的に行うためのライブラリです。React Hook Formを使用することで、フォームフィールドの値の取得、バリデーション、エラーメッセージの表示などを簡単に実装できます。

一方、ZodはTypeScript向けのバリデーションライブラリで、簡単にバリデーションスキーマを定義でき、カスタムバリデーションもサポートしています。React Hook FormとZodを組み合わせることで、簡潔で理解しやすいコードで、複雑なバリデーションを含むフォームを実装することができます。

# Zodでの一つのフィールドのバリデーション
まず、一つのフィールドに対するバリデーションをZodを使ってどのように作成するか見てみましょう。ここでは、`firstName`というフ

イベント／予定／タスクの終了日時は「非包括的（non-inclusive）」で設計した方が良い

※この記事のサンプルコードはC#やJavaScriptで書かれていますが、記事の内容はプログラミング言語に依らない一般的な設計上の話です。

# 結論

カレンダー系のシステムにおいて、イベントの開始日時と終了日時があるとき、開始日時は「包括的（inclusive）」、**終了日時は「非包括的（non-inclusive）」（又は「排他的（exclusive）」）** なものとして扱った方が良い。

# 解説

開始日時が包括的である、とは、イベントの期間に開始日時が「含まれる」ということだ。
逆に **終了日時が非包括的である、とは、イベントの期間に終了日時が「含まれない」ということ** になる。

例えば、2023年10月23日と10月24日の2日間にわたるイベントがあった場合、システム上は、開始日と終了日を次のようなデータで持つ方が良い。

|フィールド|値|
|-|-|
|開始日時|2023-10-23 00:00:00|
|終了日時|2023-10-25 00:00:00|
|終日フラグ|true|

（※日時はDateTime型とする。GMTの指定はこの記事では考慮しない）

【JavaScript】【Jquery】配列の指定した要素を削る

コード
“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var aaa = [1,2,3].filter(function(v){
return ! [2].includes(v);
});
console.log(aaa);

var aaa = [1,2,3].filter((v) => ![2].includes(v));
console.log(aaa);

“`

# 結果
“`javascript
[ 1, 3 ]
“`

COTOHA API：漢字かな混じり文の日本語を発音記号(IPA)に変換するページ

# COTOHA API：漢字かな混じり文の日本語を発音記号(IPA)に変換するページ

– COTOHA APIの無料プランは、制限があって各APIごとに《1000コール/日》まで
– COTOHA APIのアクセストークンは《24時間以内が有効》
– 個人でちょっと試すなら、ブラウザとJavaScriptのみでもイケる
– **COTOHA × JavaScript で、データの取得から加工まで、すべてJavaScriptで**

## 前文
1. 各API(10種類以上の複数)ごとに COTOHA アクセストークン取得するのじゃなく、アクセストークン取得を共通化したパターンのCODE。
**→アクセストークン取得を共通化したJSコード作ってみた`_cotoha.js`**

2. 作りたいwebページ(html,css)での実際の使い方に即した取得したデータの加工方法まで含まれているのが少ない。そこまで共通化したCODEのテンプレセットがあればいいのに。
**→ そういう風に作って

寿司作りで学ぶ！非同期処理入門(TypeScript)

# はじめに

今回は自分がちょっと昔、非同期処理を学び始めた際につまずきやすいと感じた、Promiseやasync/awaitといった概念を、寿司作りのプロセスを通して解説していきます。

JavaScriptやTypeScriptを始めるにあたり、APIからのデータ取得などにより非同期処理は避けて通れない重要な概念です。非同期処理とは、プログラムが一部のタスクをバックグラウンドで実行し、そのタスクが完了するのを待たずに次のタスクに移ることを指します。しかし、実際にコードを書いていても **「この処理は同期的に動作しているのか、非同期的に動作しているのか？」** と混乱してしまうことがありました。

**ある日、寿司を食べながら寿司職人の仕事を考えていたら、その混乱がすっきり解消される瞬間がありました。** その体験を基に、TypeScriptにおける非同期処理を例を交えながら紹介します。
![sushi_kaitenzushi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149986/d5fbf6

【JavaScript】「キレイなコード」を考える #2 ロジックを「幹」と「枝」で捉える

「キレイなコード」について考える記事、2つめです。

https://qiita.com/honey32/items/2abe8ca1443b57824396

上記の記事では、Null 安全に関わる `?.`, `??` 演算子を取り扱いましたが、その最後で

– 通常の条件分岐（および三項演算子）では処理の流れ・フローが「二股の分岐」 になる
– `?.`, `??` を使うと正常系という「幹」と異常系という「枝」として捉え直すことで扱いやすくなる

と述べました。

この「幹と枝」の発想に注目してみようと思います。

## Null 合体・オプショナルチェーン

ふたたび Null 合体・オプショナルチェーンを使ったコードと、修正前の三項演算子を使った例を見てみましょう。

“`ts
// 三項演算子
const name = personObj
? personObj.address
? personObj.address.prefecture
? personObj.address.prefecture
: “”
: “”
:

javascriptのproxyを使って変数の値の変更を検知する。

## なにがやりたかったか

変数の値の変更を検知して処理を実行したかった。

> 例 : 変数Aに値が代入されたときに関数Bを実行する。

## 実現方法

javascriptのproxyを使えば、**変数の値がset/getされたときに行う処理を中継できる**

実際の動作を見た方が早いのでplaygroudのコードを添付します。

[playground](https://www.typescriptlang.org/play?#code/MYGwhgzhAEAqCmEAu0DeAoaXoAcCuARiAJbDQTFLwDCA9gCbwBca0AbmCHs+UgE7EAdgHNoAH2h5BjAGZD49aAF8A3JmzBag5HzzAktPgAoAlGnXZsSABbEIAOgpU6jaAF5og+AHdoABT5aAA8ATyMLS0jUdk5uFgByeOUAGgjI7Ax0rOwIeCQWGSl9Yi1oIyQwPmE8ljBBEOToAGt4EJYdIWFGji4eDpFxSWl4OS96M0zsqaxiGTKe7gm06anNbVoQeHsQWmEjeNykKj5

Google Earth Engine でチャートを扱ってみる

## はじめに
Google Earth Engine (GEE) は、人工衛星などで取得した情報を地図上に描画することが可能です。それだけではなく、その情報を使ってチャートを作成することができます。

今回は、富士山の登山ルートの一つである吉田ルートの各チェックポイントの標高を使ったチャートを作成しました！

## Google Earth Engine でチャートを扱ってみる
### 吉田ルートについて
日本一標高が高く、世界文化遺産にも登録されている富士山は、7月になると登山シーズンをむかえます。登山ルートは、吉田ルート、須走ルート、御殿場ルート、富士宮ルートとあり、その中で最もメジャーなルートが吉田ルートです。

https://fujisan-climb.jp/trails/index.html

今回は、この吉田ルートの合目の標高をプロットしたチャートを作成します。

### チャートの作成工程

今回使った合目の位置については、コース案内をもとに Google Map から位置座標を取得しました。一部 Google Map でわからず取得できていないものもあります。また、

[React]hooksまとめ

## はじめに
Reactでは必須のhooksについてまとめていきます。

## 目次
今回まとめていくhooksは以下になります。
**・useState**
**・useEffect**
**・useCallback**
**・useMemo**

## 説明
ここから説明していきます。

### useState
こちらは値の状態を保持するhooksになります。コードで説明していきます。
以下は、カウントアップボタンが押されたと同時に、countの値を1ずつ更新していくコードになります。
“`
// setCountは値(count)を更新する関数。
// useState(0)の0はcountの初期値になる。
const [count, setCount] = useState(0);

// ボタンを押されたときに更新関数を呼び出して、countの値を更新する。
const onClickCountUp = () => {
setCount(count + 1);
};

// HTML↓
// 更新される値を画面に表示

{

Reactプロジェクト始めよう

## とりあえず自己紹介:man_tone1:
　男　３４歳
　妻　娘３人
　元航空自衛官
　プログラミンスクールでJava、PHP、HTML、CSS、
　SQLを習得し、エンジニア転職
　現在は、主のJava使いのSE
（やっと基本設計以降経験したて）
　趣味：技術記事を読む、技術ブログを見る、
　　　　技術書を読む
　夢：フルスタックなテックリードなプロジェクトマネージャーになる
　初めてQiitaに投稿します。Reactを独学中なので、既にたくさん出ているReactの記事をなぞりながら自分なりのペースと粒度で投稿をしていきたいと思うのでお手柔らかに

## Reactとは！？
　ある日TwitterでReactの求人が出ているのを発見し、聞いたことあるけどなんだっけ？？と思い、Wik!で調べてみた。Reactは、Meta社（旧FaceBook社）とコミュニティ？によって開発されているユーザーインターフェース構築のためのJavaScriptライブラリらしい…　　　　　　　　　　　　　　　　　　　　　　　　　　他に難しいことがいっぱい書いていたが、いい感じに学習コストが安く、大規模シ

Reactメモ

## React17のインストールから起動まで
1. `npx create-react-app react-test`でreactファイル作成
2. dependenciesを下記に書き替える
`
“@testing-library/jest-dom”: “^5.16.2”,
“@testing-library/react”: “^11.2.7”,
“@testing-library/user-event”: “^12.8.3”,
“react”: “^17.0.2”,
“react-beautiful-dnd”: “^13.1.0”,
“react-dom”: “^17.0.2”,
“react-scripts”: “5.0.0”,
“web-vitals”: “^0.2.4”
`
3. package-lock.jsonとnode_modulesを削除
4. `npm install` で再インストール
5. index.jsを下記に書き替える

`import React from ‘react’;`
`import ReactDOM from

【JavaScript】【Jquery】チェックボックスで片方チェックしたら片方外す

# html inputでtypeがcheckboxのセレクタが対象
“`html

チェック1
チェック2

チェック1
チェック2

“`

# js
“`javascript
$(‘label input[type=”checkbox”]’).change(function() {
//両方チェックを外す
$(this).closest(‘div’).find(‘label input[type=”checkbox”]’).pro