- 1. React スプレッド構文をなぜ使うのか
- 2. 一般的な破壊的メソッド
- 3. 画面テストの自動化をした話
- 4. Next.jsでFontAwesome を使用できるようにする。
- 5. ChatGPTっぽいサービスのプロトタイプをChatGPTを使ってHTMLとJavascriptで作ってみた
- 6. 羊による羊のためのJavaScript復習
- 7. javascript基礎文法
- 8. Reactで柔軟なコンポーネント設計！Compound Componentsパターンをマスターしよう
- 9. js構文 スプレッド構文
- 10. Reactアプリのボトルネックを特定！React Profiler APIでパフォーマンス分析入門
- 11. javascriptでスクロールさせる
- 12. ページ内リンクによるスムーズスクロール（jQuery利用）
- 13. JavaScript の async/await の動きを自分なりに図にしてみた (返り値を得られるまで)
- 14. TypeScript jestで単体テストを書く
- 15. JavaScript超便利！一瞬で理解する分割代入のすべて
- 16. TypeScriptでStringとstringどっち使うの問題
- 17. ?????APIはカレーでラッピングするが吉?????
- 18. ubuntu版chromium系ブラウザをアップデートしたら、IndexedDBでめっちゃブロックが発生するようになって使えないレベルになった話
- 19. イベントについて野球部向けに解説してみる
- 20. 台風の経路と勢力を眺める２（ベストトラック）
- 21. Vue3のウォッチャーを見てみる
React スプレッド構文をなぜ使うのか
### スプレッド構文をなぜ使うのか
理解のためにはまず破壊的メソッドと非破壊的メソッドを知る必要がある。
– 破壊的メソッドを見ていく
popやpushのような破壊的なメソッドを使うことは最近のJavaScriptではNGとなっている。
破壊的メソッドを避けるためにスプレッド構文が使われると覚えておく。一般的な破壊的メソッド
“`
Array.prototype.push(): 配列の末尾に要素を追加します。
Array.prototype.pop(): 配列の末尾から要素を削除します。
Array.prototype.shift(): 配列の先頭から要素を削除して、残りの要素を前に詰めます。
Array.prototype.unshift(): 配列の先頭に要素を追加し、他の要素を後ろにずらします。
Array.prototype.sort(): 配列の要素をソートします。デフォルトでは破壊的なソートですが、比較関数を提供することで非破壊的なソートも可能です。
Array.prototype.reverse(): 配列の要素の順序を逆転させます。
Arr
画面テストの自動化をした話
## 概要
Postmanを利用してテストの自動化を実現した話。
実行ボタン一度を押すだけで、ユーザーシナリオに準じた一連のテストを実行するというもの。導入前は1回約45分かかっていたテストが、導入後は1回約20秒近くまでに削減成功。
### テスト項目の具体例
テストの主な対象項目は以下の通り– 特定のボタンを押下した際の画面遷移
– ステータスコードに基づくリダイレクトの挙動
– 特定の操作によるメール受信
– メールに記載された確認コードを用いたログイン
– 特定項目の文字数の確認
– 古いメールアドレス/パスワードによるログイン失敗
– 新しいメールアドレス/パスワードによるログイン成功
– 既登録のメールアドレスによるログイン情報の更新失敗
– 退会済みのメールアドレスによるログイン失敗
– 退会済みのメールアドレスによる新規登録の可否などなど。。
## 背景
### テストの時間負荷
– 弊チームでは2週間に1回本番リリースがあり、その度にstage環境と本番待機系環境での2回のテストを実施する必要がある。
– １回のテストで約45分かかること。
Next.jsでFontAwesome を使用できるようにする。
## はじめに
Next.jsでFontAwesomeを使用できるようにしたので、メモとして書いておきます。## インストール
以下のコマンドでインストールする。### 1. SVGコアパッケージをインストールする。
**npmを使用する場合**
“`
npm i –save @fortawesome/fontawesome-svg-core
“`
**yarnを使用する場合**
“`
yarn add @fortawesome/fontawesome-svg-core
“`### 2. アイコンパッケージをインストールする。
**npmを使用する場合**
“`
npm i –save @fortawesome/free-solid-svg-icons
npm i –save @fortawesome/free-regular-svg-icons
“`**yarnを使用する場合**
“`
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg
ChatGPTっぽいサービスのプロトタイプをChatGPTを使ってHTMLとJavascriptで作ってみた
ChatGPTっぽいサービスのデモを速攻で見せるために、サーバーとか気にしなくてもいいように、HTMLとJavascriptで作ってみた。
それも、ChatGPT（GPT-4）と対話して。
## ChatGPTとの対話
まず、最初のプロンプト
“`
# 命令書:
あなたは優秀なフロントエンドエンジニアです。
指示の通りHTMLのサンプルコードを書いてください。# 制約条件
・HTML , CSS , Javascript は１つのHTMLファイルにしてください
・OpenAIのAPIキーは 999999999 としてください
・どんなに長いコードでも必ず一つのhtmlコードブロックに収めてください。# 指示
・ChatGPTと同様の機能のあるウェブアプリを作ってください
“`必要最低限 のをすぐ作ってくれた。
APIの呼び出し方法がちょっと違ってたので、const response のJSONのところだけ手動で直した。
なお、APIキーはこちらで取得する。
https://openai.com/blog/openai-apiなお、当たり前ですが、
羊による羊のためのJavaScript復習
# 1.プログラミングとは
→ コンピュータに対する命令(プログラム：program)を書くこと## プログラムはどのような言語で書かれるか
→ プログラミング言語
ex. JavaScript,Java,Python,PHP,GO…# 2.JavaScriptとは
→ Webページにて動的な機能を可能にさせるプログラミング言語
cf. [JavaScript|MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)## JavaScriptの特徴
・デベロッパーツールを使用してブラウザ上で動かすことができる
・比較的簡単で新しい言語
・習得するとフルスタックのアプリ開発が行える## Google Chromeにおけるデベロッパーツールの開き方
consoleの開き方
・ハンバーガーメニューから
・Command + option + J# 3.コードの記述と実行
## テキストエディタ
→ 実際にコードを書く場所## ブラウザ
→ Webページを閲覧するためのソフト
書いたコードをブラウザで
javascript基礎文法
## HTMLファイルにjavasciptを挿入する方法
““html
““
javascriptのコード部分を`script`タグで囲う### ※’use strict’について
`use strict`と記入すると、使用するコードは、strictモード（厳格モード）となる。
厳格モードになることで、非厳格モードよりも的確なエラーチェックが行われる。
例えば、下記の表のような非厳格モードで受け入れられていたミスをエラーに変換される。| チェック項目 | 非strict | strict |
|——————-|———————————-|—————————|
| 宣
Reactで柔軟なコンポーネント設計！Compound Componentsパターンをマスターしよう
# Reactで柔軟なコンポーネント設計！Compound Componentsパターンをマスターしよう
## 目次
– [はじめに](#はじめに)
– [Compound Componentsパターンとは](#Compound-Componentsパターンとは)
– [Compound Componentsを使った例](#Compound-Componentsを使った例)
– [Compound Componentsを使わない例](#Compound-Componentsを使わない例)
– [対比とメリット](#対比とメリット)
– [まとめ](#まとめ)### はじめに
Reactでは、コンポーネント設計が非常に重要です。今回紹介するCompound Componentsパターンは、コンポーネント間の関係を明確にし、再利用性を高めるための強力な手法です。
### Compound Componentsパターンとは
Compound Componentsパターンは、親子コンポーネント間で柔軟に制御を行う設計パターンです。子コンポーネントは親コンポーネントからのプロパテ
js構文 スプレッド構文
スプレッド構文（Spread Syntax）を使用すると、配列やオブジェクトなどのイテラブルな要素を展開して、別の配列やオブジェクトに含めることができます。スプレッド構文は、コードを簡潔にしたり、配列やオブジェクトを結合したりする際に便利です。
配列の展開：
“`javascript
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];const combinedArray = […array1, …array2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
“`オブジェクトの展開：
“`javascript
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };const combinedObject = { …obj1, …obj2 };
console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }
“`配列のコピー
Reactアプリのボトルネックを特定！React Profiler APIでパフォーマンス分析入門
Reactアプリケーションのパフォーマンスボトルネックを解明し、最適化したいですか？React Profiler APIを使えば、それが可能です。この記事では、React Profiler APIの基本からcallbackの詳細な解説までを提供します。
## 目次
1. [はじめに](#introduction)
2. [React Profilerとは](#what-is-profiler)
3. [React Profiler APIの基本](#profiler-api-basic)
4. [callback関数の詳細解説](#callback-details)
5. [実際の使用例](#real-example)
6. [まとめ](#conclusion)React Profiler APIは、Reactアプリケーションの性能分析に強力なツールです。この記事で、その魅力に迫ります。
javascriptでスクロールさせる
ページトップまでスクロールさせる方法を検索しました。jQueryでの実装方法ならたくさん出ましたが、Vanilla JSで実装しているのはなかなか見つけられなかったので、メモします。
“`js
const scrollBtn = document.querySelector(‘.scroll-btn’);
scrollBtn.addEventListener(‘click’, () => {
window.scrollTo({
top: 0,
behavior: “smooth”
});
});
“`
上記のコードでトップまでスクロールできます。
[こちら](https://zenn.dev/junki555/articles/ba0ff1973182e8)の参考サイトのようにtopを要素の値の座標の値にすれば、特定の位置までのスクロールも可能です。
#### 参考https://zenn.dev/junki555/articles/ba0ff1973182e8
https://developer.mozilla.org/en-US/docs/Web/
ページ内リンクによるスムーズスクロール（jQuery利用）
# ページ内リンクによるスムーズスクロール
お世話になっております。コウヤです。今日はページ内リンクをクリックして、スムーズにページ内を移動する方法について記載していきたいと思います。
以下のリンク（青背景箇所）をクリックすると、特段何も設定しない状態ではそのまま瞬間移動してその個所に飛ぶようになっていますが、これだとどの位置にいるかわかりづらくなってしまいます。
この状態から、リンクをクリックしたらページ内をスムーズにスクロールして、該当の位置に遷移できるように設定していきたいと思います。
リンクをクリックすると、ページ内を遷移しながら
## おことわり
JavaScript の非同期処理をようやく理解できた時の、僕の初心者目線をほぼそのまま綴っています。あくまでも**僕の体感的解釈の話**であり、実際の動作を説明したものではありません。正確さに欠ける表現があるかもしれません。
## 本題
何か返り値のある `async` 関数を実行したとします。
“`js
async function any_f() {
// any sub process
return “any_value”;
}window.addEventListener(“load”, async function() {
// any main process
any_f();
});
“`:::note
`window.addEventListener(“load”, …);` というのは、簡単に言うと「ドキュメントのロードが終わってからこの処理をする」という命令になります。ここでは「C で言う main 関数的なもの」と思ってもらえれば差し支えないです。
:::
2. [配列の分割代入](#配列の分割代入)
3. [オブジェクトの分割代入](#オブジェクトの分割代入)
4. [値の交換と関数の引数](#値の交換と関数の引数)
5. [まとめ](#まとめ)### はじめに
こんにちは！今日はJavaScriptの便利な機能、**分割代入（Destructuring assignment）**について解説します。分割代入は、配列やオブジェクトからデータを抽出して変数に代入するための強力なツールです。それでは、早速詳しく見ていきましょう。
### 配列の分割代入
配列の分割代入では、配列から要素を取り出してそれぞれの変数に代入します。以下に例を示します。
“`javascript
let [first, second, third] = [‘apple’, ‘banana’, ‘carrot’];
console.log(first); // ‘apple’
console.log(second); // ‘banana’
console.log(third); // ‘carrot
TypeScriptでStringとstringどっち使うの問題
# 突然ですが問題です
文字列の変数を宣言するとき、型注釈に`String`と`string`のどちらを使いますか？“`typescript
let foo: String;
let bar: string;
“`あまり意識したことない方もいるのではないでしょうか？
# 答え
`string`の方を使いましょう。
その理由について見ていきましょう。# プリミティブ型とラッパーオブジェクト
`string`はプリミティブ型で、`String`はラッパーオブジェクトです。## プリミティブ型について
文字列、数値、論理値などの基本的な値の型のことです。
プリミティブ型はimmutableという特性を持ちます。つまり、変更することができません。
また、プリミティブ型はメソッドやプロパティを持ちません。## ラッパーオブジェクトについて
ラッパーオブジェクトは、プリミティブ型の値をラップしたオブジェクトのことです。
平たく言うと、プリミティブ型を便利に使えるようにしたものです。
便利に使えるようにしたものですので、ラッパーオブジェクトは`lengt
?????APIはカレーでラッピングするが吉?????
例えばAPIを呼び出す関数を書くとき。
以下のように感じに書くこともできます。“`js
const base_url = “https://example.com”
const async callAPI = (endpoint=”normal”,count=10, q=”Excel”) => {
const url = `${base_url}/${endpoint}?q=${q}&count=${count}`
const response = await fetch(url)
return response.json()
}
“`ですが、urlを切り替えたいときに`base_url`を変更するのはなんだか癪ですよね。
そこで別の選択肢として**カレー化**を使ってみましょう。“`js
// カリー化
const async curreyCallAPI = (base_url = “https://example.com”) => {
return (endpoint=”normal”,count=10, q=”Excel”) => {
ubuntu版chromium系ブラウザをアップデートしたら、IndexedDBでめっちゃブロックが発生するようになって使えないレベルになった話
開発中のウェブサービスで、ある時から、フリーズしたと思うくらい固まってしまう事案が発生。
Chromiumのコンソールを見ると、フロントエンドのストレージとして使ってるPouchDBの、destroyメソッドで止まっている模様。
エラーログを見てもブロックされている理由がよくわからないので、PouchDBのdestroyメソッドを使うのをやめて、IndexedDBを直に操作する方式に変えて、deleteDBに変更してみる。
しかーし、変えてみたけど、これもいっこうに非同期処理が返ってこない。
ブロックされる時間を計るために、ログにDateを仕込んで計測してみると、だいたい3分〜10分くらい。
不思議なのは10分以上にはならない。いろいろ試してみたものの、今の所解決する方法がさっぱりわからない。
現在は回避策として、おとなしくuserAgentでlinuxを判別して、PouchDBを使ってdestroyメソッドは使わずIndexedDBのオブジェクトストア自体を消さずに、bulk updateでドキュメントをdeleteする処理に変更しました。これだとdeleteフラグが着
イベントについて野球部向けに解説してみる
おはようございます！
今日は昨日学習したイベントについて、野球のノックを例にして解説します。
とりあえずイベントとは何なのか、どう使うのか、というところが分かるように書いていきたいと思います。
イベントハンドラとかイベントリスナーという言葉もあるのですが、それは明日の記事で書きます。## ノックの裏でどんなコードが走っているのか？
野球の練習で１体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は、実行中にアクセスしたすべてのリアクティブなプロパティの変更を自動的に監視します。## 特徴
・明示
