- 1. 【学習記録】JavaScript
- 2. ChatGPTとの会話を横取りして送信内容をスプレッドシートに記録するブックマークレット
- 3. CloudFront Functionsで一つの関数に複数サイトのBASIC認証情報をまとめて設定する方法
- 4. Chrome拡張機能を使ってファイルパスを他人に共有するときの変換の手間を省く【Windows向け】
- 5. Node.js頻出の用語についてストックしていきたい
- 6. オブジェクトのクローンにJSON化を使う時代は終わった！【JavaScript】
- 7. for…in…は使わない
- 8. kintone REST API のエラー確認
- 9. 【AudioContext】【Tone.js】ゼットンの声をJavaScriptで再現してみる【Pizzicato.js】【XSound】
- 10. JavaScript の文字列・配列・オブジェクト操作
- 11. javascript 文字列の中に特定の文字列が存在するかを判定する includes()
- 12. プログラムを調べるとよく出てくる「オブジェクト」とは？
- 13. 「プログラマー脳」のchapter3「プログラミング言語の文法を素早く習得する方法」
- 14. mapbox-gl-jsで地図を日本語化する方法【2023】
- 15. フロントエンドまわりのツールの設定ファイルのフォーマットまとめ
- 16. 【JavaScript】JavaScriptまとめ⑨（通信と非同期処理）
- 17. 【コピペだけ】NuxtJSでCodePenのクローンを作成しよう
- 18. 「プログラマー脳」のchapter2「コードを速読する」
- 19. JavaScriptの基礎的な文法とメソッド一覧
- 20. 【JS】Phaser 3.60 の新機能がアツい【ゲーム開発】
【学習記録】JavaScript
## コールバック関数について
#### コールバック関数を用いることで、繰り返し実行される関数をまとめて記述できる
##### -コールバック関数を用いた表現-
“`
//⑤関数unfollowが実行される
function unfollow() {
console.log(‘フォローを外しました’);
}function cancelTweet() {
console.log(‘ツイートをキャンセルしました’);
}//②(fn)が関数unfollowを受け取り、関数confirmedが実行される
function confirmed(fn) {
//③ブラウザにYorNウィンドウが表示され、Yesを選択するとifがTrueになる
if (window.confirm(“実行しますか？”)) {
//④if = Trueのとき、(fn)で受け取った関数unfollowを呼び出す
fn();
}
}
//①引数unfollowを入れて関数confirmedを呼び出す
confirmed(unfollow
ChatGPTとの会話を横取りして送信内容をスプレッドシートに記録するブックマークレット
https://chat.openai.com/chat で入力をGoogleスプレッドシートに記録するブックマークレットです。`fetch()`を横取りしているので、メッセージの入力だけでなく、送信後の編集にも対応しています。
# Googleスプレッドシート
2つのシート、`History`と`Users`を準備します。
`Users`シートには1列目に利用できる人のメールアドレスを記述していきます。# Google Apps Script
スプレッドシートの上部メニュー「拡張機能 > Apps Script」を選択し、スクリプトエディターに入力します。入力後、ウェブアプリとしてデプロイします。
“`javascript:Code.gs
const HISTORY_SHEET_NAME = ‘History’;
const USERS_SHEET_NAME = ‘Users’;function validateUser_(email) {
const sheet = SpreadsheetApp.getActive().getSheetByName(USERS
CloudFront Functionsで一つの関数に複数サイトのBASIC認証情報をまとめて設定する方法
以下の内容を全文コピペして貼り付けると良いのだ
トリガーは `ViewerRequest` にするのだ
`getAuthMaps` 関数内に、設定したいサイトのホスト名と、BASIC認証のID/PWを適宜入力するのだ特定のディレクトリ配下にだけBASIC認証をかけたい？知らね
“`javascript
/**
* Get basic auth informations
*
* @return {Array-object} maps
*/
function getAuthMaps()
{
var maps = [
{ “hostname”: “test.example.com”, “username”: “onamae”, “password”: “pasuwaado” },
{ “hostname”: “test.example2.com”, “username”: “onamae2”, “password”: “pasuwaado2” }
];
return maps;
}/**
* Get spec
Chrome拡張機能を使ってファイルパスを他人に共有するときの変換の手間を省く【Windows向け】
# 概要ファイル管理アプリの[Dropbox](https://www.dropbox.com/)や[Box](https://www.box.com/ja-jp)は便利ですが、デスクトップアプリ版を使っていると、同じアプリを使っている人にパス位置を共有する時にファイルパスに自身のユーザー名が入り、そのまま貼っても相手とは異なってしまうため、「このファイル見て！」と共有する際に一手間挟む必要があります。
“`plaintext:例（Boxの場合：Windows）
C:\Users\PC1234\Box\
“`上記の場合、`PC1234`がユーザー名の想定です。
これはユニークですがWinodwsの場合、`%username%`という環境変数を使うことでエクスプローラーで開いた時にそれを入力した人のユーザー名に自動で置き換えること
Node.js頻出の用語についてストックしていきたい
## 概要
職務上でNode.jsを使用する機会が増えてきたが、完全素人の何それ美味しいの状態なので、早い段階から整理していくことにする。.
【参考資料】
・[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)### 1. モジュール
機能ごとに分割された小さなコードの単位で、JavaScriptファイルやファイルをまとめたフォルダを指す。### 2. 内部モジュール
Node.jsのインストールに含まれている標準的なモジュールのこと
（例：fs、http）### 3. 外部モジュール
npmなどのパッケージ管理ツールを使ってインストールすることができるモジュールのこと（例：gulp）### 4. パッケージ
外部モジュールのこと。JQueryやGSAPとかのライブラリと似たようなニュアンス### 5. npm
パッケージ管理（インストールなど）を実施するツールのこと。
（MacにおけるHomebrewと同類）### 6. アセット
Webアプ
オブジェクトのクローンにJSON化を使う時代は終わった！【JavaScript】
# 結論
これからのオブジェクトのディープコピーには[`structuredClone`](https://developer.mozilla.org/ja/docs/Web/API/structuredClone)関数を使おう。“`javascript
const obj = { hoge: [new Date(2023, 3, 12), 1], fuga: ‘foo’ };const objClone = structuredClone(obj); // ディープコピー
obj.hoge[1] = 10;
console.log(objClone.hoge[1]); // 1objClone.hoge[0].setFullYear(2050);
console.log(obj.hoge[0].getFullYear()); // 2023
“`# 背景
JavaScriptのオブジェクトや配列の代入はシャローコピーです。“`javascript
const arr = [0, 1, 2];
const arr2 = arr; // シャローコピーar
for…in…は使わない
個人的な考えです。
僕は、for…in…文を使わずに、for…of…文で代替しています。“`js
const obj = { a:1,b:2 };for(const [key,value] of Object.entries(obj)){
console.log(key,value);
}
“`
理由は二つあります。① 単純に、for…in…文でobj[key]とするのが面倒だから。
② Object.hasOwnPropaty()を使用しないと、プロトタイプチェーン内も対象としてしまうから。懸念点は、Object.entries(obj)によるパフォーマンス低下ですが、現時点では特に気にせずに使用しています。
kintone REST API のエラー確認
kintone でエラーが発生している場合、REST API のエラーが分かりにくい場合がありますので、確認方法を紹介
# 概要
レコード編集画面の submit イベント処理で、エラーが発生した場合、画面が編集画面から詳細画面に遷移してしまい、エラー情報が確認できないことがあります。
ブラウザーの開発ツールの「ログを保持」をチェックすることで、前の画面のログを見ることができます。
※開発ツールの使い方は、下記を参照
[kintone JavaScript カスタマイズデバッグまとめ](https://cybozudev.zendesk.com/hc/ja/articles/4977994758297-kintone-JavaScript-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E
【AudioContext】【Tone.js】ゼットンの声をJavaScriptで再現してみる【Pizzicato.js】【XSound】
きっかけは、[note](https://note.com/kurokky/n/nb56a1f815669)の方に書いてるのでこちらは技術的な部分のお話です。
制作物は以下で
– [こちら](https://bu-kurokky.github.io/vc/wetton)がエフェクトとしてトレモロをかけたもの
– [こちら](https://bu-kurokky.github.io/vc/wetton_base)は無理矢理トレモロを実音として実装したものですロジックとしては、
1. クマゼミの音を1/2の音程で再生する
1. 「ウェットン」という音声ファイルを1/2の音程で再生する
1. ド#からオクターブ上のドまでのsine波の音にトレモロをかけるこれらだったので、以前にAudioContext、Tone.jsなどを使ってJavaScriptで音を鳴らしたりマイクにエフェクトをかけてWebRTCしてみたりしていた経験もあったので『簡単に実装できるだろうなぁ』と思っていたのですが、意外とつまづきました。
## つまづいたところ 1
音声ファイルをローカルで再生しようとする
JavaScript の文字列・配列・オブジェクト操作
自分用にちまちま書いていたメモです。
文字列を配列に変換
“`javascript
// Array.fromを使うパターン
const str = ‘ABC’
let arr = Array.from(str)
console.log(arr)
// [ ‘A’, ‘B’, ‘C’ ]// split で分割するパターン
const str = ‘ABC’
let arr = str.split(”)
console.log(arr)
// [ ‘A’, ‘B’, ‘C’ ]
“`文字列が含まれているかどうか
“`javascript
const char = “a”
const str = “abc”str.includes(char) // true
“`変数を利用した置換や正規表現の処理を行う
“`javascript
// new RegExp() を使うことで、変数を利用した置換や正規表現処理が行えるconst str = ‘abcde’
const char = new RegExp(‘ab’)
console.log(str.rep
javascript 文字列の中に特定の文字列が存在するかを判定する includes()
# 概要
– 文字列の中に特定の文字列が存在するかを判定する方法を簡単にまとめる。
# 方法
1. `includes()`を使って下記のように判定する。
“`javascript
let str = “hoge fuga piyo”;console.log(str.includes(‘hoge’));
“`1. 上記を実行して`includes()`の引数で指定した文字列が変数strの中に格納された文字列に存在していた場合trueを返す。存在していなかった場合falseを返す。
プログラムを調べるとよく出てくる「オブジェクト」とは？
私はJSを勉強した後に.Netのプログラマになったので、どの言語にもオブジェクト(JS)みたいな概念があると思っていました。
ですので、JSのオブジェクトみたいなのが、.netにはない？
そもそもオブジェクトってなに？と初期はなったのでまとめています。
結論から言うと、以下3つの単語をまとめましたが、それぞれすべて違う意味で使われます。
1.オブジェクト
2.オブジェクト型
3.JSのオブジェクト## 1.オブジェクト
特にオブジェクト指向の言語で使われる言語で、誤解を恐れず書くと、クラス、インスタンスのこと。
何かしらを作り上げる工程をプログラム。
でそのプログラムが動いて出来上がったデータのことをオブジェクトという。
ネット上でも結構曖昧に使われているので深堀するとわけわからなくなります。
とにかく、「プログラムされて出来上がった結果物」という理解をしておけば大体意味が通ります。## 2.オブジェクト型
データ型の1種。
オブジェクト型は全型(String等の変数定数で使う型からクラス型まで。とにかく全て。)なんでも入る。
型の種類はクラス型(参照型)。
で、基本的に、
「プログラマー脳」のchapter3「プログラミング言語の文法を素早く習得する方法」
文法を調べることで作業の妨げにならないように文法を多く記憶しておくことが大切です。
私たちはプログラミングの文法を頭で記憶しているかを気にしていない
なぜなら、それらの情報をインターネットで調べることができるからしかし、何を記憶しているかはコードをどれだけ効率的に処理することができるかに影響することをchapter2で知りました。
従って、プログラミング言語の文法や概念、データ構造を記憶することで、コードを処理する速度を上げることができます。→ より多くのコードをチャンク化することができる
### 文法を覚えるためのテクニック
– フラッシュカードを使って文法を素早く覚える
– 忘れ物を防ぐ
– 想起練習(積極的に何かを思い出そうとする)
– 推敲(新しい知識を既存の知識と積極的に結びつける)長期記憶の仕組み
– 脳の中の記憶は階層構造になっておらず、ネットワーク構造で構成されている
– 勉強時間を増やすよりも期間を徐々に開けながら、長い期間で繰り返し行うことで長期記憶に組み込まれる### 長期記憶から情報を取り出す際に、貯蔵強度と検索強度の2つのメカニズムがある
mapbox-gl-jsで地図を日本語化する方法【2023】
## mapbox-gl-jsで地図を日本語化する方法
ちょっとハマったので共有。
[公式ドキュメント](https://docs.mapbox.com/jp/mapbox-gl-js/example/language-switch/)には`setLayoutProperty`で地図の言語を変えられると書いてあるが、こちらは現在日本語は未対応だそう。
日本語にするには`mapbox-gl-language`で実装する必要がある。
https://github.com/mapbox/mapbox-gl-language①パッケージインストール
`npm install –save mapbox-gl @mapbox/mapbox-gl-language`②サンプルコード
“`
import mapboxgl from ‘mapbox-gl’;
import MapboxLanguage from ‘@mapbox/mapbox-gl-language’;mapboxgl.accessToken = ‘YOUR_ACCESS_TOKEN’;
const map =
フロントエンドまわりのツールの設定ファイルのフォーマットまとめ
フロントエンドまわりのツールの設定ファイルのフォーマットについてまとめました。
設定ファイルがあるツールをつくる際の参考にするといいかもしれません。## commitlint
https://github.com/conventional-changelog/commitlint#config
|ファイル名|フォーマット|
|—|—|
|`.commitlintrc`|JSON/YAML|
|`.commitlintrc.json`|JSON|
|`.commitlintrc.yaml`|YAML|
|`.commitlintrc.yml`|YAML|
|`.commitlintrc.js`|JavaScript|
|`.commitlintrc.cjs`|JavaScript|
|`.commitlintrc.ts`|TypeScript|
|`.commitlintrc.cts`|TypeScript|
|`commitlint.config.js`|JavaScript|
|`commitlint.config.cjs`|JavaScript|
|`commitl
【JavaScript】JavaScriptまとめ⑨（通信と非同期処理）
# 概要
JavaScriptの理解を深めるため、
[](https://www.amazon.co.jp/%E3%82%B9%E3%83%A9%E3%82%B9%E3%83%A9%E3%82%8F%E3%81%8B%E3%82%8BJavaScript-%E6%96%B0%E7%89%88-%E6%A1%9C%E5%BA%AD-%E6%B4%8B%E4%B9%8B/dp/4798173266/ref=sr_1_15?crid=341O9294X80Z7&keywords=javascript&qid=1679238835&sprefix=javas%2Caps%2C185&sr=8-15)
で学習した内容を記載していく。本記事では、通信と非同期処理について記載する。
## 通信と非同期処理
### 効率的なページ遷移
通常のWebサイトは、
【コピペだけ】NuxtJSでCodePenのクローンを作成しよう
皆さん、[CodePen](https://codepen.io/)は使ったことがありますか？CodePenはHTML、CSS、JavaScriptを入力してその結果をブラウザで見れるウェブアプリになります。CodePenはCSSやJavaScriptを使ってアニメーションを探したりするときにつかったりします。
今日はシンプルなCodePenのクローンを作成したので紹介します。
CodePenの例：
今日は自作でJavaScript、HTML、CSSを入力できるエディターとその結果が表示されるアプリのベースを作っていきます。
完成形は画像のようになります。[完成したコードはこちらのGitHubリポ](https://github.com/TraitOtaku/js-builder)からどうぞ。
として分割する### 文字やキーワードのような細かい情報で覚えない
下記の2つの文を5秒以内に覚えてください
“`
tse cvake aeos
“`“`
cat loves cake
“`1つ目の行よりも2つ目の行の方が覚えられたと思います
1つ目の行は12文字を全て覚えなければ
JavaScriptの基礎的な文法とメソッド一覧
javascriptの基礎的な文法とよく見かけるメソッドを記載しました。 ~~自分用メモです~~
## 文法
#### 条件分岐
“`javascript
const number = 10;if (number > 0) {
console.log(“+の値”);
} else if (number < 0) { console.log("-の値"); } else { console.log("0"); } ``` #### 三項演算子を用いた条件分岐 ```javascript let a = 15; let message = a > 10 ? “aは10以上” : “aは10以下”;
console.log(message);
“`
※三項演算子は、条件式が true の場合は`?`の左側の式を、false の場合は`:`の右側の式を評価。#### switch文で条件分岐
“`javascript
const dayOfWeek = new Date().getDay();switch(dayOfWeek) {
case 0:
【JS】Phaser 3.60 の新機能がアツい【ゲーム開発】
JS最強のゲームライブラリ「[Phaser3](https://github.com/photonstorm/phaser)」に、大きなアップデートが来るようです。
`Version 3.60.0 – Miku` （ミクさん！？）
リリースは、Phaser10周年の4/12とのこと。
Phaser3は息が長く、大分完成されていた感はありますが、ここに来て大きな機能追加が行われるようで、期待大です。
抜粋して簡単に紹介します。
:::note info
Phaser3関連の他の記事もよければ！
『[Web屋がJavaScriptでゲームを作ってSteamで配信するまでの道のり](https://qiita.com/laineus/items/0bb62f58910ccdfa1d34)』
『[ゲームエンジンにVueを合体させたらゲーム開発が捗った](https://qiita.com/laineus/items/7a8980d0d8af69161cf3)』
:::# ビルトインFX
目玉機能ですかね。
Glowで発光させたり、ドロップシャドウをつけたりといったグラフィッ
