JavaScript関連のことを調べてみた

＃10　【Chrome用】Google Chatの改行設定を変更してみた

## 追記(2023/09/14)

閲覧数が多かったのでchromeウェブストアに公開しました。
こちらのURLより適用してください。
https://chrome.google.com/webstore/detail/google-chat-%E6%94%B9%E8%A1%8C%E3%82%AD%E3%83%BC%E8%A8%AD%E5%AE%9A/mfnigpcpfllpnmaobnojkhbhkefnemhk
インストール後、拡張機能のポップアップ(chromeのアドレスバーの横にあるパズルのピースの形のボタン)から改行設定をしてください。

ここから下は、開発時の内容です。仕組みが知りたい方はどうぞ↓

## 概要

Google Chat のデフォルトは、`Enter`で投稿、`Shift + Enter` で改行です。
今回作成した拡張機能を読み込ませることで、 `Enter` で改行、`Shift`, `Ctrl`, `Alt` のどれか + `Enter` で投稿になります。

Google Chat のWindowsアプリ または Google Chrome で適用

非同期処理とは【初心者向け】

非同期処理とは？
—
非同期処理とは、あるタスクを実行しつつ、他のタスクを並行して処理することです。
これにより、処理の待ち時間を最小限に抑え、効率的なプログラムを作成することができます。

コールバック関数
—
最も基本的な非同期処理の方法はコールバック関数を使用することです。
“`js
function fetchData(callback: (data: string) => void) {
setTimeout(() => {
callback(“データ取得完了”);
}, 1000);
}

fetchData((data) => {
console.log(data);
});
“`

Promise
—
コールバック関数の欠点（コールバック地獄）を解消するために、Promiseが導入されました。Promiseは、非同期操作の完了や失敗を扱うオブジェクトです。
“`js
function fetchData(): Promise {
return new Promise((resolve) =

JSF**k講座 4限目【全ての英字(小文字)】

# 初めに

[3限目](https://qiita.com/shimgo2008/items/8fe67d6a40a516b7a6da)の復習をしっかりとしておきましょう
3限目では以下のコードによりJSFで作ったStringの任意のコードの実行ができることを学びました
“`js
[][‘at’][‘constructor’](/*任意のString型で記述されたコード*/)()
“`
# 第4限の内容
JSFでいろいろなコードを実行できるようになるために、全ての小文字の英字を取得していきます
それに必要な

# function String() { [native code] }

constructor以外の部分を見るとかなり短くまとまっているコードで取得できます
“`js
(([]+[])[‘constructor’]+[])
//’function String() { [native code] }’
“`
“`js
(([]+[])[([][[((![]+[])[+!![]])+((!![]+[])[+[]])]]+[])[+!![]+!![]+!![]]+(

アロー関数の省略記法について

# はじめに
reactでtodoアプリを作成しているのですが、アロー関数の省略記法についての理解が不足していると感じたので今回の記事を書いてみます。今回は省略記法に絞った記事のためアロー関数とは何かについては書いておりませんのでよろしくお願いします。また、もし間違いなどがあればコメント頂けますと私の勉強になりますのでよろしくお願いします。

# 省略記法の書き方
+ **引数が1つだけの時はカッコを省略できる**

“`js
//通常の書き方

const hello = (word) => {
return word
}

console.log(hello(“こんにちは”) //出力結果　こんにちは
“`
省略記法を使うとこのように書くことができます。
“`js
//省略した書き方

const hello = word => {
return word
}

console.log(hello(“こんにちは”) //出力結果　こんにちは
“`
引数のカッコがなくなりました。

+ **関数の処理が式を直接返す場合**
“`js
//通常の書き方

const h

TypeScriptコンパイラによる未使用パラメータと変数のチェック

TypeScriptコンパイラには、コードをチェックする際にリンターのような機能を持つオプションがあります。その中には、パラメータや変数が未使用のままになっていることを防ぐものがあります。

### `noUnusedLocals`オプション

`noUnusedLocals`は、デフォルトでは`false`に設定されていますが、これを`true`に設定すると、未使用のローカル変数がある場合にコンパイラがエラーを出すようになります。以下のコード例を見てみましょう。

“`typescript
function printItem(item: any, index: number) {
const indexedItem = `${index}: ${item}`;
// ^^^ ‘indexedItem’ is declared but its value is never read.

console.log(item);
}
“`

上記のコードでは、`indexedItem`という変数が宣言されていますが、その値が一度も使用されていないため、コンパイラがエ

外部システム連携に役立つ！kintoneアプリのフィールド名とIDを取得して一覧化するスクリプト

# 課題

kintoneで外部システムとの連携を設定するときなどに、
外部システムでフィールドIDだけで表示/指定することがあるが、
IDを英数字で設定している場合、ぱっと見ではそれが何を表しているか分からない。
（自分で付けたものの130個以上あったので私は覚えきれない…）

しかし、kintone上のGUIで下記のように1個1個確認していくには大変すぎる。
他人に共有するのも大変だし。。。

そのため、フィールド名とフィールドIDが並んだ一覧を取得したい。
（ついでに、チャットGPTにID名を含むSQLを書かせたい）
JavaScriptを使ってかんたんに取得できる方法を記載していく。

## 事前準備（必要なパッケージのインストール） ※初回のみ

ターミナルから必要なパッケージをインストールしておく

“`

ArrayQueryでオブジェクト配列をタイプセーフORMっぽく扱う

## ArrayQueryとは

[ArrayQuery](https://array-query.vercel.app/)は2024年7月18日にローンチされた、タイプセーフORMライクにオブジェクト配列を扱えるように設計された強力なTypeScriptライブラリです。

軽量でありながら機能豊富なライブラリで、オブジェクト配列に対して複雑な操作を簡単に実行できます。特に、メモリ内の大規模データセットを操作する際や、フロントエンドアプリケーションで高度なフィルタリング、並べ替え、ページネーションを実装する場合に便利です。

https://array-query.vercel.app/

## 主な特徴

– **ページネーション**: 大規模データセットを簡単にページ分割できます。
– **全文検索**: データ内の複数フィールドにわたる柔軟で強力な検索ができます。
– **高度なフィルタリング**: 複雑なフィルタを適用して正確なデータ取得ができます。
– **柔軟な並べ替え**: 昇順と降順の両方をサポートし、任意のフィールドでの並べ替えが可能です。
– **型安全な操作**:

【COLOR ME】お気に入りボタンとグローバルメニューのお気に入り商品数の表示を連動させる

＜＜　問題　＞＞
カラーミーショップを使って制作したECサイトの改修で下記を追加したが

• ①商品ごとのお気に入りボタン（商品詳細ページ）
• ②お気に入りアイコン（共通ヘッダー）
• ③お気に入りアイコン右上にお気に入り商品数を表示

ページの再読み込みをしないと③が増減しなかった。

※イメージ

■ 実現したいこと
①のクリックと③の数字を連動させたい。
（お気に入りボタンのクリックで数字を増減させたい）

---

＜＜　原因　＞＞
カラーミーショップの独自タグは正しいお気に入りの商品数を表示しない。

---

＜＜　解決　＞＞
単純に、お気に入りボタンのクリック時に③の数字を取得して+1,-1するよう

【勉強会資料】日付と正規化

社内で勉強会をしたときのスライド資料です。

文字列や日付等、ソフトウェア内部で表現が混在すると障害につながるケースの対策について書いています。

スプレッドシートでコピーしたものをJavaScriptで配列にする

スプレッドシート（Excelや、Googleスプレッドシート）で範囲をコピーし、他のアプリで貼り付ける際に、貼り付け先によってはTSV（Tab-Separated Values）の形式で貼り付けられます。

TSVでは、タブ文字は1つ右のセルへの遷移、改行文字は1行下への遷移を意味します。セルの文字列にタブ文字や改行文字を含む場合は、セルの文字列の両端を「”」（ダブルクォーテーションマーク）で挟み、かつ当該文字列内の「”」は「””」に置換します。

今回、TSVをJavaScriptで配列にパースするコードが見つからなかったので、自作してみました。

“`
const TSV={}
TSV.parse=function(tsv){
const result=[[“]]
let row=0
let column=0

const regExp=/^\t|^\n|^”([^”]|””)*”|^[^\t\n]*/g
while(tsv){
switch(tsv[0]){
case`\t`:
result[row][++column]=“
tsv=tsv.

JavascriptにもIteratorがあるよって話というよりIteratorの話

# TD; LR;
JavascriptにもIteratorがありますよ、という話

# Iterator
表で活躍するということは少ないかもしれませんが、Javascriptにもiteratorがあります
iteratorはなに?みたいになってしまった方は、こんな記事を読む前にGoFのiteratorパターンについて理解しておくのがいいかもしれませんが、この手の説明って全然わからないよね!!
https://ja.wikipedia.org/wiki/Iterator_%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3

# いてれーしょん
実例みると早いかどうかはわらないが実例
“`javascript
const ary = [1,2,3,4,5]
const itr = ary[Symbol.iterator]()
itr.next() // {value: 1, done: false}
itr.next() // {value: 2, done: false}
itr.next() // {value: 3, done: false}
itr.nex

＃03　[Angular] Standalone components

“Components declaration that we have learned is adding your components to the `imports` array in the `@NgModule` . It doesn’t bother us when we just develop a TODO app or some small-scale project for study or mainly for **fun**. When having a scale project, Angular’s declaration can make the import list as long as you want. Or you **don’t?** Maybe you can try a new staff from Angular 14, **standalone components**.

As the name they call, “”standalone””, allow specifying components, directives or

＃01　marked.js + highlight.js でMarkdownをきれいにHTMLに変換

## 概要

Markdownで書いたページをHTMLに変換する際に、
marked.js と highlight.js のライブラリの組み合わせが使いやすかったのでご紹介です。

* marked.js (Markdown→HTML変換用)
* highlight.js (コードを書いてる部分をきれいにする用)

## 準備

### marked.js

Documentation: https://marked.js.org/
Github: https://github.com/markedjs/marked

NPMで適用することもできますが、今回はgithubから直接ダウンロードしました。

1. [marked.min.js](https://github.com/markedjs/marked/blob/master/marked.min.js)をダウンロード
1. /assets/js ディレクトリに配置
1. HTMLファイルに以下を追記
“`javascript

JavaScriptで半角数字を全角数字に変換する

# やり方
画面で作ってみました

“`ruby: