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

イベントについて野球部向けに解説してみる

おはようございます！
今日は昨日学習したイベントについて、野球のノックを例にして解説します。
とりあえずイベントとは何なのか、どう使うのか、というところが分かるように書いていきたいと思います。
イベントハンドラとかイベントリスナーという言葉もあるのですが、それは明日の記事で書きます。

## ノックの裏でどんなコードが走っているのか？
野球の練習で１体1でノックを受ける場面を想像してみてください。バッティング練習中にファールゾーンで行われているイメージです。

その時の流れは、
1.コーチが選手を呼ぶ。
2.ノックを受ける
という流れです。

ノックを受ける部分をもう少し詳しく説明すると、
2-1.選手が「おねがいします！」と言う。（叫ぶ）
2-2.コーチがノックを打つ
2-3.選手がボールを取る
という感じですね。

これをコードにするとおそらくこんな感じです。
“`
// 1.コーチが選手を呼ぶ
const ノックを受ける選手 = document.querySelector(“#YOOJI”);　

// 2.選手が「お願いします！」と叫ぶと、コーチがノックを打つ
ノックを受け

台風の経路と勢力を眺める２（ベストトラック）

## はじめに
先日、以下の記事で、2001年以降の台風位置表 CSV を用いて、台風の位置と勢力の関係を概観してみました。

https://qiita.com/mg_kudo/items/7c7d5dfc3685a9333079

一方、2001年より前の台風データについては、気象庁から「ベストトラック（Best Track）」というデータで提供されています。今回は、こちらのデータを用いて、1951年～2023年現在までの台風の位置と勢力について、見てみたいと思います。

## データの入手と加工
気象庁の以下のページでデータを入手可能です。

https://www.jma.go.jp/jma/jma-eng/jma-center/rsmc-hp-pub-eg/besttrack.html

1951年～現在（2023年）までの台風データがひとつのテキストファイルにまとまっています。一方、[2001年以降の台風位置表 CSV](https://www.data.jma.go.jp/yoho/typhoon/position_table/index.html) とは異なり、整然デー

Vue3のウォッチャーを見てみる

# Vue.js 3 の watch と watchEffect について
Vue.js 3には、リアクティブなデータを監視して何らかの処理を実行するための2つの主な機能があります。それらはwatchとwatchEffectです。以下でそれぞれの特徴と使い方について解説します。

## watch の基本
watchは、指定したリアクティブなプロパティまたは計算プロパティの変更を監視し、その変更に応じて処理を実行します。

## 特徴
・監視するプロパティを明示的に指定します。
・以前の値と新しい値の両方を取得することができます。

### 例
“`js
import { watch } from ‘vue’;

watch(someRef, (newValue, oldValue) => {
console.log(‘新しい値:’, newValue, ‘以前の値:’, oldValue);
});
“`

## watchEffect の基本
watchEffectは、実行中にアクセスしたすべてのリアクティブなプロパティの変更を自動的に監視します。

## 特徴

・明示

TypeScriptで特定の型プロパティを使う方法 – `Pick`ユーティリティを使いこなす

## 目次
1. [はじめに](#introduction)
2. [問題の説明](#problem)
3. [解決策: Pick ユーティリティ](#solution)
4. [Pick ユーティリティの使い方](#usage)
5. [まとめ](#conclusion)

## はじめに

TypeScriptはJavaScriptに静的型付けとクラスベースのオブジェクト指向を追加したスーパーセットです。これにより、大規模な開発プロジェクトでも安全性と生産性が向上します。この記事では、TypeScriptの強力な型システムの一部である`Pick`ユーティリティ型を紹介します。

## 問題の説明

TypeScriptでオブジェクトを扱うとき、オブジェクトが持つ特定のプロパティだけを利用したいケースがあります。例えば、次のような型があるとします。

“`typescript
export type SomeType = {
propA: string;
propB:

JavascriptとCSSのfixedでヘッダーを固定しつつ横スクロールさせた話とAWSでデプロイした話

# AWSのデプロイした話から

昨日めでたく実務で初デプロイをしてきました。めでたい！
ちょこっとした修正ですが、引き継ぎでもらったコードだったので、
読むの疲れた、、、

ってことで、デプロイの流れを。

# まずはデプロイ用のブランチを最新に
gitの管理はソースツリーを使っております。
他のツールでも大体一緒なはず。

デプロイ用のブランチとdevブランチをマージで統合

→リモートリポジトリへプッシュ

→AWSのEC2インスタンスにSSH接続
※インスタンスに入るときは、.sshディレクトリに入ってからね。ここに鍵になるpemファイルが入ってないとだめ。
私はホームディレクトリからやって繋がんなくてちょと焦った。

→AWS内でさっき最新にしたデプロイ用のブランチをgit pull！
これで完了。

Laravelのマイグレーションファイルを作ってたり、DBのカラムを作成していたら、
本番環境のDBの更新も忘れずに行います。

# これでデプロイ完了！めでたい！
ビールを飲んで完了です。

# Javascriptでの横スクロールとCSSのfixedでヘッダーを固定しつつ

【Vue.js】xxx/undefinedでInternal Server Error 500エラーになってしまった場合の原因と解決方法

# 概要
Vue.jsで`api/v1/properties/files/undefined`というエラーがDevツールのコンソールに表示されて、`Internal Server Error 500`になってしまいました。本記事ではこのエラーの原因と解決方法を記載します。

# エラーの原因

原因は以下の箇所にありました。

“`vuejs
:src=”url+’api/v1/properties/files/’+property?.image”
“`

`property?.image`が`undefined`のとき、`api/v1/properties/files/undefined`という不正なURLになってしまったのです。

`property?.image`は、Vue.jsのセーフナビゲーション演算子（optional chaining operator）を使用していますが、これは`property`オブジェクトが存在しない場合にプロパティに安全にアクセスするための方法です。

ちなみに、`property?.image`という表記は以下のように動作します。
・もし`p

【GAS】QQEnglishの予約メールからGoogleカレンダーに自動登録する

# はじめに
– 最近オンライン英会話にハマっており、毎日レッスンを受けています。日によって受講時間が異なるため、毎回予約完了後に手入力でGoogleカレンダーに登録していましたが、面倒くさい…
– 予約完了メールが毎回送られてくるので、それをトリガーに登録できれば完全に自動化できそうです。ということで先人の知恵を拝借しつつ初めてのGoogleAppScriptに挑戦してみました
– こちらの記事を参考に作成しました、ありがとうございます→[DMM英会話の予定をGoogleカレンダーに自動登録する方法](https://designoma.com/dmm-eikaiwa-google-calendar/)

# コード
“`js
const CRITERIA = “from:noreply@notify.qqeng.com subject:【QQEnglish】レッスン予約完了のお知らせ is:unread “;

function main() {
eachMessage(CRITERIA, function (message) {
const cal = Calend

型安全を徹底する！TypeScriptの型ガード入門

## 目次
1. [はじめに](#introduction)
2. [型ガードとは？](#what-is-type-guard)
3. [基本的な型ケガードの使い方](#how-to-use-type-guard)
4. [自分で定義する型ガード](#custom-type-guards)
5. [型ガードのメリット](#benefits-of-type-guards)
6. [まとめ](#conclusion)

## 1. はじめに
TypeScriptを使用して開発を行っている皆さん、JavaScriptから移行した皆さん、こんにちは！TypeScriptの強力な型システムには、多くの機能があります。その中でも特に「型ガード」は非常に便利な機能の一つです。本記事では、この型ガードについて詳しく解説し、具体的な使い方やそのメリットを説明します。

## 2. 型ガードとは？
型ガードは、ある変数が特定の型を持っていることをチェックし、その範囲で型を制約するための方法

GitHub Codespacesでの実行か、GitHub Actions上での実行かを環境変数で判定する

GitHub Codespacesで開発して、GitHub Actionsにデプロイするときにデプロイ先なのかローカル（とは言わなそう）なのかの判定をして処理を振り分けたい時があります。

## コピペ用振り分け

こんな感じで環境変数で振り分けができました。 2023/8/4時点の環境なので仕様が変わる可能性はあります。

“`js

if(process.env.CODESPACES){
//Codespacesでの実行
}else if(process.env.GITHUB_ACTIONS){
//GitHub Actionsでの実行
}
“`

## それぞれ独自の環境変数

GitHub Codespacesの場合は環境変数に`{“CODESPACES”: ‘ture’ }`があり、GitHub Actionsの場合は`{“GITHUB_ACIONS”: ‘ture’ }`が入っています。

– Codespaces

> ![スクリーンショット 2023-08-04 17.57.50.png](https://qiita-image-store.s3.ap-n

cytoscape.jsでネットワーク図

我が家のネットワーク図を書いてみました。


細い線は100Mで太い線は1Gです。

Reactアプリのパフォーマンスを飛躍的に改善！React.lazyとSuspenseの使い方

目次：

1. [はじめに](#introduction)
2. [React.lazyとは](#whatisreactlazy)
3. [React.lazyの基本的な使用方法](#howtousereactlazy)
4. [React.lazyとSuspenseを組み合わせる](#usingreactlazywithsuspense)
5. [まとめ](#conclusion)

—

## 1. はじめに

こんにちは、Reactを使ってウェブアプリケーションを開発している皆さん！大規模なアプリケーションを作っていると、パフォーマンスが頭を悩ませることがありますよね。そんなときに役立つのが、React.lazyとSuspenseです。この記事では、React.lazyとSuspenseの使い方を紹介します。

## 2. React.lazyとは

React.lazyは、Reactの機能の一つで、コンポーネントの読み込みを遅らせる（遅延させる）ことができます

Notion APIでロールアップのカラムの検索をする

https://www.npmjs.com/package/@notionhq/client こちらの公式のSDKを使って試していて、

学籍番号で学生の検索をかけようとした時の話題です。

## 文字列プロパティからロールアップになる現象

元々は文字列で直接入ってましたが、管理する上でデータ定義がされていくとDBが分かれてリレーション/ロールアップになっていくのは必然な気もします。

元々は以下のような指定で学籍番号にPEO05が含まれたら検索するといった検索をしていました。

“`js
const res = await notion.databases.query({
database_id: studentDBId,
filter: {
or: [
{
property: ‘学籍番号’,
rich_text: {
contains: “PEO05”
}
}
],
},
});
“`

データベースの正規化によ

JavaScript Primer を読んだ感想

# よかったところ
– 第一部でJavaScriptの基本文法（変数、配列、条件分岐、関数など）を学べます。どの項目も厳格なルールに沿ったサンプルコードが豊富でした。またNG例も多数ありコードのお作法をより詳しく知ることがきました。以下のコードは[変数名に使える名前のルール]( https://jsprimer.net/basic/variables/#:~:text=%E3%81%9B%E3%82%93%E3%81%A7%E3%81%97%E3%81%9F%E3%80%82-,%E5%A4%89%E6%95%B0%E5%90%8D%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8B%E5%90%8D%E5%89%8D%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB,-%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%A7)のサンプルコードです。
#### 正しい例
“`javascript:sample.js
let $; // OK: $が利用できる
let _title; // OK: _が利用でき

JavaScriptのメソッド　使用メモ

### trim()
trim()は、文字列（String）の両側から空白文字（スペース、タブ、改行など）を取り除いた新しい文字列を返すJavaScriptのメソッドです。文字列の先頭と末尾にある空白文字を削除するために使用されます。

以下は、trim()メソッドの使い方と例です：

‘’‘javascript
const str = ” Hello, world! “;
const trimmedStr = str.trim();

console.log(trimmedStr); // “Hello, world!”
’‘’

上記の例では、元の文字列strには先頭と末尾に空白文字が含まれています。trim()メソッドを使うことで、これらの空白文字が取り除かれてtrimmedStrに代入されます。

trim()メソッドは、ユーザーの入力データを処理する際に特に便利です。ユーザーが入力した文字列に誤って余分な空白文字が含まれている場合、trim()を使ってそれを取り除くことができます。これにより、データの整形や正規化を行い、アプリケーション内での処理をスムーズにすること

GoogleColaboratoryはjavascript・htmlも使用できる

# 結論
セルマジックを使うことでjavascript・htmlが使用できます

# セルマジックとは
下記の記事が参考になります。

https://qiita.com/mgsk_2/items/437656b8ce42c03e41a6

https://qiita.com/kazoo04/items/a0bd374199a7783ca0e

# サンプルコード
### javascript

“`.js
%%javascript
const div = document.createElement(‘div’);
div.textContent =’Hello world!’;
document.body.appendChild(div);
“`

—–

### html
“`.html
%%html

hello w

ループ処理を野球部に説明してみた

おはようございます！
今日はループ処理を野球部に説明してみた、というテーマの記事です。
この記事を読むことで、ループ処理の基本的な使い方と、それがプログラム内でどのように機能するのかを理解できるようになることを目指します。

### ループ処理とは
ループ処理とは、同じ処理を繰り返し行うことを指します。同じ処理のコードを何度も書かなくて良くなるというメリットがあります。
例えば、PP10本という練習メニューをループ処理有りと無しに分けて書いてみるとこんな感じです。

#### ループなし
“`
ダッシュする // 1本目
ダッシュする // 2本目
ダッシュする // 3本目
ダッシュする // 4本目
ダッシュする // 5本目
ダッシュする // 6本目
ダッシュする // 7本目
ダッシュする // 8本目
ダッシュする // 9本目
ダッシュする // 10本目
“`

#### ループあり
“`
for (let i = 1; i <= 10; i++) { ダッシュする； } ``` すごくスッキリしましたね！ 他にも、野球は表と裏の攻撃

:%s/帰ってきたニート/ぼんポぽ！WWW/g

### はじめに
前回の記事でQiita->noteの宣言をしましたが、戻ってきてしまいました。

https://qiita.com/HenNayume2023/items/68af372b68f97f84ba2d

noteで投稿してみたものの、評価はつくんですが、「記事を良いと思って」の評価なのか
「僕のアカウント見てね！おねがいね！ね！」の評価なのか分らないです・・・。
難しいですね・・・。

また、ギークな私はやっぱりQiitaの方が居心地が良いです。
なので、すみませんが両方のプラットフォームで投稿させてください。
不快に思う方いたら、すみません・・・!

### 掲題の件につきまして
掲題の件ですが、昨日からChatGPTに教えてもらいつつChromeの拡張機能をいじってます。
目標は、Webサイト上の文字を**ヌードル亭麵吉に変換する機能**の作成です。
とりあえず、表示された文字を全部ぼ|んポ|ぽ！|ｗｗｗに変換するところまできました。

・処理前
![before.jpg](https://qiita-image-store.s3.ap-northeast-1.a

【Vite+TypeScript+React】環境変数の活用方法とそのトラブルシューティング

## 目次

1. はじめに
2. Viteにおける環境変数の設定方法
3. ローカルと本番環境で異なる環境変数を設定する方法
4. 「プロパティ ‘env’ は型 ‘ImportMeta’ に存在しません」の解決方法
5. まとめ

## 1. はじめに

皆さん、こんにちは！今回は、Vite + TypeScript + Reactの環境で、環境変数を活用する方法とその際に遭遇する可能性のある問題の解決方法について解説します。

## 2. Viteにおける環境変数の設定方法

まずは、Viteで環境変数を設定する基本的な手順を見ていきましょう。

1. プロジェクトのルートディレクトリに`.env`ファイルを作成します。
2. `.env`ファイルに環境変数を設定します。例えば、次のように設定します：

“`bash
VITE_APP_TITLE=My App
“`

3. TypeScriptとReactのコード内で`import.meta.env.VITE_APP_TITLE`を使用して環境変数にアクセスします：

“`typescript
console.log(

アコーディオンテキストの作り方（jQuery利用）

# アコーディオンテキストの作り方

お世話になっております。コウヤです。
今回はアコーディオンテキストについて作成方法を確認していきたいと思います。

アコーディオンテキストとは以下のようなものです。


上記の質問箇所をクリックすると、以下のように回答が出てくるものです。これの効能として、縦にページが長くならないように、必要なときのみ表示させるといったことができます。


## アコーディオンテキストのHTML/CSS部分を記載する

今回のフォルダ構成は以下のとおりです。
![image.png](h

React Developer ToolsのProfilerの使い方【初心者向け】

React Developer Toolsは、Reactアプリケーションのパフォーマンスを最適化するための強力なツールです。その中でも、「Profiler」タブは特に有用で、Reactのコンポーネントがどのようにレンダリングされ、どの程度の時間を要しているかを詳細に分析することができます。ここでは、その使い方を初心者向けに解説します。


## 1. React Developer Toolsのインストール

まずはじめに、React Developer Toolsをインストールする必要があります。Google ChromeまたはFirefoxのブラウザに対する拡張機能として提供されています。

## 2. Profilerタブを開く

React Developer Toolsを開き、「Pr