- 1. 【React】onClickとhandleClickの違い・使いどころ
- 2. googleapisを利用してGmailをAPIで取得する
- 3. 配列からオブジェクトへ変換
- 4. オブジェクトから配列に変換
- 5. 【JavaScript】Web Storageが使用可能か判定する方法
- 6. コールバック関数／高階関数についてまとめてみた
- 7. DIVをスムーズに追加するアニメーション
- 8. StandAloneで稼働しているUIから一部だけライブラリとしてPublishした話 feat. rollup
- 9. JavaScriptでなんちゃって演算子オーバーロード—四則演算子
- 10. Stripeを利用して、2回目以降の支払いに備えてクレジットカード情報の保存と再利用を行う方法
- 11. Shopifyで出荷予定日をJavascriptで表示（アプリなし）
- 12. 四則演算とは
- 13. 【jQuery】animateメソッドとは
- 14. p5.toio を使ったシンプルな p5.js のプログラム：接続中の toio の数の表示や move()、rotate() などによる走行
- 15. nizima LIVEのスクリプト機能(β)の特徴・注意点
- 16. 【JavaScript】snake_caseをcamelCaseに変換する方法
- 17. p5.js でのシェーダーを使った描画に WebGL 2.0（GLSL ES 3.0）を使う 〜その3：JavaScript側から時間の情報を渡す、createFilterShader() を併用〜
- 18. 【jQuery】valメソッドとは
- 19. 【JavaScript】プロパティはいくつまで繋げられるのか？
- 20. JXA で note のお気に入り作者の記事一覧を csv 形式で保存する
【React】onClickとhandleClickの違い・使いどころ
## Reactにおける`onClick`と`hancleClick`の違いについて
TypeScriptとNext.jsを使ったWebアプリケーション制作にチャレンジしていますが、それ以外にもReact構文を頻繁に使う機会があるため、Reactもしっかり学ぶ必要性があると感じました。
Reactの関数コンポーネントを実装するなかで疑問に思った点として、ロジックを複数の処理に分けて実装するという点です。
まず理解できていない点としてonClickとhandleClick。ボタンを押したときに数字がカウントアップするようなロジックを作りたいとき、onClickで関数hendleClickに渡し、実際のカウントアップの処理はhandleClickで表現する、、、。みたいな実装方法を行う場面があります。
なぜ、ボタンをクリック〜数字カウントアップという2つの挙動を実現するために、2つの関数コンポーネントに分ける必要があるのか？という疑問があります。
この疑問は今後、幾度となく訪れる場面があると想定されるため、きちんと理解して腹落ちした状態にしておきたいと思い、よくよく調べることに
googleapisを利用してGmailをAPIで取得する
## 目的
PlaywrightでGoogle Gmail APIを使用してメールを受信すること。
Playwrightでe2eテストコードを実装する中で、メール認証時の認証コードを取得したかったのでAPIでメールを取得したかった。
## 前提
– Googleアカウントがあること
## 事前準備
まずはgoogleapisでGmailを取得するために必要な認証情報を取得します。
### Google Cloud Consoleでプロジェクトを作成
以下にアクセスしてプロジェクトを作成します。
https://console.developers.google.com/project
以下の手順でプロジェクトを作成
1. Google Cloud Consoleへアクセス
2. プロジェクトを作成ボタンをクリック
3. 適当にプロジェクト名を入力
4. 作成ボタンをクリック### Gmail APIを有効化
サイドバーを開き「APIとサービス > ライブラリ」をクリックし、APIライブラリからGmail APIを有効化します。
https://conso
配列からオブジェクトへ変換
# 配列からオブジェクトへ変換
配列からオブジェクトに変換する方法（キーは連番）の備忘録。### 1. `reduce()`メソッドを用いる
“`javascript
let array1 = [111, 222, 333, 444, 555, 666];let obj = array1.reduce((acc, value, index) => {
// acc は蓄積されるオブジェクト
// value は現在の要素の値
// index は現在のインデックス// スプレッド演算子を使用して、acc を展開し、新しいオブジェクトを作成し、新しいキーと値を追加する
return { …acc, [‘key’ + index]: value };
}, {} );console.log(obj);
// { key0: 111, key1: 222, key2: 333, key3: 444, key4: 555, key5: 666 }
“`#### ChatGPTによる説明
オブジェクトから配列に変換
## オブジェクトから配列に変換
GAS（Google Apps Script）でオブジェクトを操作する際の備忘録。## 1. `Object.values()`
`Object.values()` メソッドは、与えられたオブジェクトの値の配列を返します。
“`javascript
const person = {
firstName: ‘John’,
lastName: ‘Doe’,
age: 30
};const values = Object.values(person);
console.log(values); // [‘John’, ‘Doe’, 30]
“`この例では、`person` オブジェクトの値が配列 `[‘John’, ‘Doe’, 30]` として取得されます。
## 2. `Object.keys()`
`Object.keys()` メソッドは、与えられたオブジェクトのキーの配列を返します。
“`javascript
const person = {
firstName: ‘John’,
lastName:
【JavaScript】Web Storageが使用可能か判定する方法
以下のように判定用の関数を作成します。
“`javascript
function storageAvailable(type) {
let storage
try {
storage = window[type]
const x = “__storage_test__”
storage.setItem(x, x)
storage.removeItem(x)
return true
} catch (err) {
return (
err instanceof DOMException &&
(err.name === “QuotaExceededError” ||
err.name === “NS_ERROR_DOM_QUOTA_REACHED”) &&
storage &&
storage.length !== 0
)
}
}
“``localStorage`が使用可能か判定するには以下のようにします。
“`javascript
if
コールバック関数／高階関数についてまとめてみた
コールバック関数とは、ある関数の引数として渡された関数のことを指します。このように２つの関数「受け取る側の関数」と「渡す関数」が出てきますので整理する。
* **「受け取る側の関数」について**
> 受け取る側の関数は、引数に関数をもらい処理の中で利用する。受け取る側では全体の処理は定義されており、特定のタイミングで行う具体的な処理を引数でもらう。受け取る側の関数を高階関数とも呼ぶ。
>
* **「渡す関数」について**
> 渡す関数は具体的な処理内容を持っており、適切なタイミングで実行されるのを待つ。
>* **コールバック関数/高階関数の記述方法**
このときbox2を追加したら、box2は上から降りてきて、box0とbox1は下に押し出される、というアニメーションを作りたいです。
こうかなーと適当にやると、box2を追加したとき、すでにあるbox0とbox1が最終的な位置に瞬間移動してしまいます。その押し出される
StandAloneで稼働しているUIから一部だけライブラリとしてPublishした話 feat. rollup
## はじめに
所属プロジェクトでは大量のReactコンポーネントを持っており、その中の一部(60%くらい)のコンポーネントを社内の別のプロジェクトでも使うため、ライブラリとして公開しろという指令が出ました。
実は既に社内で使われていましたが、ビルドがコンシューマ側で行われていたので、ここを何とかしろという話でした。(~~お前らのせいでビルドに余計な時間がかかるだろうが！~~)
##### 結論: rollup (https://www.npmjs.com/package/rollup) を使った。”まぁまぁ”うまくいった。
## 1. 現状とゴールの確認
#### 現状:
コンシューマが`npm install <プロジェクト>` を実行するとほぼソースコードそのものがnode_modules以下にinstallされる(babelでトランスパイルだけされている)、のでコンシューマ側でビルドが必要。
使う側はコード上で `import {Component} from @プロジェクト/src/components/library/index` のように、ファイルパスまで
JavaScriptでなんちゃって演算子オーバーロード—四則演算子
# はじめに
前回は自作の数値計算ライブラリの実行用(フロントエンド)を紹介した。
この数理計算ライブラリには複素数、ベクトル、行列クラスなどがある。
そうなると欲しくなるのが四則演算`+,-*,/`などの演算子オーバーロードである。
JavaScriptは演算子オーバーロードはサポートされていないがトランスパイラであるBabelのPluginを使うことで擬似的に作ることができる。
その方法を、備忘録を兼ねて記事にする。## Babel Plugin
Babelは言わずとしれたトランスパイラである。
Babel Pluginはこ のBabelの処理の途中に独自の処理を加えてソースコードを書き換えるものである。
その処理には元JSからAST(抽象構文木)に変換してそれを元に別のJSに変換するのもである。
そのため、この処理をより深く理解するためにはASTの知識が合ったほうがいいがその知識は参考文献にしておく。白状するとこの記事はほぼこの記事、[JavaScriptで演算子オーバーロードしてみる(BabelでAST)](https://qiita.com/taqm/items/1e
Stripeを利用して、2回目以降の支払いに備えてクレジットカード情報の保存と再利用を行う方法
ECサイトや予約サービスなど、顧客が複数回商品やサービスを注文するユースケースでは、「**クレジットカード情報を保存する仕組み**」が重要です。2回目以降の注文で、クレジットカード情報を入力する必要がないようにシステムを構築することで、顧客が注文フローの途中で離脱する「カゴ落ち」のリスクを下げることができます。
Stripeによる[「EC サイトの決済に関する調査レポート」](https://stripe.com/jp/guides/state-of-asia-pacific-checkouts-2022
)では、「注文・決済フローが3分以上かかると、49％のユーザーが注文を諦める」との結果がでています。![スクリーンショット 2024-02-07 13.57.05.png](htt
Shopifyで出荷予定日をJavascriptで表示（アプリなし）
## はじめに
ECサイトで商品を購入する際には出荷予定日が表示されていると、購入する側からすると安心ですよね。
今回アプリを使用しないで、Javascriptのみで商品出荷予定日を表示できるよう実装しました！
詳細は以下の通りです。
– 商品購入日が平日で9時前であれば当日の日付を表示
– 商品購入日が平日で10時以降であれば翌日の日付を表示
– 翌日が休日の場合は休日明けの日付を表示（翌日が土曜日であれば月曜を表示、お盆休みや正月休みも休み明けの日を表示）
– 商品購入日が休日の場合も同様に休日明けの日付を表示今回の実装ではAPI連携を行わずに、祝日やお盆休みをJavascript内に配列として定義しています。
## 実際のコード
“`js