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

Google Apps Script (GAS) の使い方【基礎編】

## Google Apps Scriptとは
Google Apps Script（以下gas）は、提供されているGoogleサービスの自動化スクリプトなどを組み、ある程度の自動化を図ることができる優れものです。
また、APIなどを使用して複雑なコードを書く必要がないため初心者でも書きやすいという特徴があります。

操作できるものとして、`Gmail`、`Google Drive`、`Google Document`、`Google Spreadsheets`などいろいろなものがありますが、今回は`Google Spreadsheets`を使用して解説します。

## 下準備
操作するスプレッドシートを準備します。
[https://docs.google.com/spreadsheets/u/0/?hl=ja](https://docs.google.com/spreadsheets/u/0/?hl=ja)
にアクセスし、「空白のスプレッドシート」をクリックし、新規作成します。![image.png](https://qiita-image-store.s3.ap-northeas

ペインドリブンではじめるFigmaプラグイン開発

デザイナーがFigmaプラグインをつくってみた！という内容です。
選択したフレーム群を、命名規則のもと自動的にリネームする機能を開発しました。

https://www.figma.com/community/plugin/1270021574725531926/name-layers

## なぜFigmaプラグイン？

自分でやってみて、デザイナーがJavaScriptに入門するならFigmaプラグイン開発はおすすめなのではと思いました。
– 自身が一番のユーザーであり、確かなペインがある
– ゴールを単一機能の実現に絞れる
– UIで触っているものをコードからも触るので、既知である

## 動機

JSフレームワークを理解したく、そのためにJavaScriptを学びたい。だけど入門書を読むと、概念理解が追いつかず途中で詰まってしまう。つまり書かないと進めない、でも書けない、困った…。
という状況からなかなか抜けられませんでした。

でもある時なにげなく[Figma Plugin APIの公式ドキュメント](https://www.figma.com/plugin-docs/)を眺

プログラマーが落ち着かなくなるコードを書いてみた 番外編

こんにちは Atsu1209です。
今回は プログラマーが落ち着かなくなるコードを書いてみた番外編です。

第一弾

https://qiita.com/Atsu1209jp/items/d4273320d5ce5f690e9a

第二弾

https://qiita.com/Atsu1209jp/items/a1b051107bca65e87ceb

# はじめに
今回は第一弾で作った奇数偶数を判定するコードをパワーアップしてきます。

:::note alert
閲覧注意です!
:::

# 前回のクソコード
前回のクソコードです。
1~10で奇数偶数を判定します。
(JSのみ)
“`javascript:main.js
const textarea = document.getElementById(“textarea”);

function btn(){

if(textarea.value == “1”){
alert(“奇数”);

Chrome拡張を作ってみた② – 非同期処理ChromeStorage

# はじめに
Chrome拡張を作っていると、アプリとしてデータを永続保存したいケースが出てきます。
manifest version2までであれば非推奨ながらもlocalStorageが使えていましたが、Version3からはこれが禁止され、ChromeStorageを使う必要が出てきました。

本稿では、manifest Version3を用いたstorageへのデータ保存について実践します。

# localStorageとChromeStorageの差
どちらもブラウザに対して永続的にデータを保持させる仕組みです。

実装する上で大きな違いは、
localstorageが同期処理による読み書きですが、
ChromeStorageは非同期処理となります。

以下がそれぞれのstorageに対する読み書きのサンプルコードです。

“` javascript:localstorage
// 同期処理
// 書き込み
localStorage.setItem(“lastAccessUrl”, “URL”);
console.log(‘success’);

// 読み込み
const

JavaScriptの本を読んでメモ残すぞ

# はじめに

※こちらの記事は、随時更新していくスタイルです。
　最終的に読んでまとめた読書感想文になります。

私は、仕事をしながらプログラミングについて学習をしています。
残念ながら本を読むのがすごく苦手！学習を続けるのも一苦労！

だけど、少しでも進んでるって足跡を残したら継続の助けになるかなーなんて考えて、こちらでアウトプットしてみることにしました。

と、いうことで、
**[1冊ですべて身につくJavaScript入門講座](https://www.amazon.co.jp/%E3%80%90Amazon-co-jp-%E9%99%90%E5%AE%9A%E3%80%911%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-DL%E7%89%B9%E5%85%B8-JavaScript%E3%83%81%E3%83%BC%E3%83%88%E3%82%B7%E3%83%BC

React + TypeScript: useContextフックでコンポーネントツリーに渡された情報を受け取る

[コンテクスト](https://ja.react.dev/learn/passing-data-deeply-with-context)(context)は、コンポーネントツリーに情報を渡す仕組みです。直接の子でなく、深い階層にある子コンポーネントであっても、`useContext`フックによりコンテクストの値を読み取り、その更新が受け取れます(subscribe)。

本稿はReact公式サイト「[useContext](https://react.dev/reference/react/useContext)」にもとづき、`useContext`はどう使うのか、およびどのような場合に使うとよいのかを解説します。説明内容と順序は、公式ドキュメントにしたがいました。ただし、解説はわかりやすく改め、またコード例とサンプル([StackBlitz](https://stackblitz.com/))はTypeScriptを加えたうえで修正した部分が少なくありません。

# 構文

“`react
const value = useContext(SomeContext)
“`

フ

実は誰でも簡単にNotion のウィジェットを作れちゃう（勤怠管理ウィジェット in Notion）

# 初めに
タイトルの通りNotionのウイジェットって誰でも作れるんです！作ってみたら意外とウケが良かった！でも作り方知られてないみたいだし、ネットにも転がってなかったので記事書く！

### 背景
以前AWSの勉強も兼ねて、チームの勤怠管理を作った（[その１](https://qiita.com/waiiioss/items/6c2ca747a55d3dca9224)、[その２](https://qiita.com/waiiioss/items/f35c1729bb3d17cfbc9e)、[その３](https://qiita.com/waiiioss/items/29a51fb8b8d63bd173c3)の三段に分けて記事にしたので良かったらみてください！）

### 問題点
必要システムとして作ったけど、実際に使うようになって感じた問題点を列挙すると
1. 勤怠を登録するために勤怠管理ページを開くのがめんどくさい
1. めんどくさいが故に忘れがち
2. 可視化意外と誰もみてない

機能だけしっかり作っても**体験してほしいUX**を考えられていないとこうゆう問題点が出てきがちで

kintoneのwebhookで削除時もレコードの内容を取得したい

# はじめに

kintoneはアプリの設定で、以下のイベント時にwebhookのURLを叩いてもらうことが可能

– レコードの追加
– レコードの編集
– レコードの削除
– コメントの書き込み
– ステータスの更新

しかし、レコードの編集や削除の際は、変更前・削除前のレコード情報を返してくれないので非常に困る…

https://jp.cybozu.help/k/ja/user/app_settings/set_webhook/webhook_notification.html

# 代替案

同じ内容で困っている人の記事を見つけた。

https://ict4small.com/kintone-webhook-update-delete/

上記を参考に、更新時のwebhookであればレコード情報を返すことを利用できないかと考えた。

# 解決方法

フィールド内に「delete_flag」というフィールドIDでチェックボックスがある想定。

updateのwebhookを削除だけで使えるのであれば不要だけど、そうもいかない状況だったのでフラグで解決することにした。

React & Firebaseを使ったWebサービス開発入門【ユニットテスト】

## はじめに
先日作成したReact & Firebaseを使った[Webサービス開発入門](https://qiita.com/pigretyasushi/items/add22ebf450eb236a44c)の続編であり、まだ全編を読んでない方はそちらを先にお読みください。

## この記事について
この記事は先日開発した「Movie Guide」を用いてReactのユニットテスト(Jest)を試してみようというものです。
私自身、前職でPHPフレームワーク「Synfony」の上で「PHPUnit」を用いたユニットテストを描いたことはありましたが、Jestを使うのは初めてだったので学習の記録としても記事にしたのもあります。

## ユニットテストについて
採用においてエンジニアの器量を見極めるには「Docker」「リーダブルコード」そして「テストコード」を見るらしい。
実際これらは個人開発ではそこまで重視されないが、チームでやる上では絶対必要な領域である。
今回はそのユニットテストに関する記事だが、テストの意義とはズバリ
**プログラムを構成する小さな単位(コンポーネントや関数)

GitHub上のコードを簡単にCDNで使う方法

## 結論

“`text:url
https://cdn.jsdelivr.net/gh/{ユーザー名}/{リポジトリ名}@{version}/{ファイル名}
“`

versionを省略した場合、最新バージョンとして扱われます。

“`text:url（version省略）
https://cdn.jsdelivr.net/gh/{ユーザー名}/{リポジトリ名}/{ファイル名}
“`

またファイル名の拡張子の前に`.min`をつけると自動でミニファイされます。

## サンプル

https://github.com/mogamoga1024/MedianCut/blob/main/median_cut.js

をCDNで使いたい場合

https://cdn.jsdelivr.net/gh/mogamoga1024/MedianCut/median_cut.min.js

で利用できる。
元ファイルを一切加工せずともミニファイしてくれるのがありがたい。

## 参考元

https://www.jsdelivr.com/?docs=gh

Node.js の fs でフォルダ内の内容を列挙する

## 環境
bun 1.1.3

## 方法
[fs.readdirSync()](https://nodejs.org/api/fs.html#fsreaddirsyncpath-options) を使います。

## コード例
### ファイル構成
“`
|–files
| |–fuga.txt
| |–hoge.txt
| |–piyo.txt
|–index.ts
“`

“`fuga.txt
渚の砂は、崩しても、積る、くぼめば、たまる、音もせぬ。
“`

“`hoge.txt
ただ美しい骨が出る。
“`

“`piyo.txt
貝の色は、日の紅、渚の雪、浪の緑。
“`

### 例1: シンプルにファイル名のリストを取得
`fs.readdirSync()` はディレクトリ内のファイル名のリストを返します。
厳密にはファイルだけでなくディレクトリもリストに含まれます。
ここでは `.forEach()` で全件ループしています。

“`js:index.ts
import fs from ‘fs’;

const dirPath = ‘files’

【TypeScript】unknown型ってなに？any型との違いは？

# **unknown型ってなに？**

簡単に言うと制約の強いany型です。

any型のように何でも代入できます。

“`tsx
let a: unknown;
a = 0; // OK
a = “あいうえお”; // OK
a= { key: “オブジェクト” }; // OK
“`

しかしany型とは違いそのままでは型が明示された他変数への代入やメソッド呼び出しができません。

また型アサーションで型推論を上書きすることもできません。

“`tsx
const a: unknown = “abc”;
// Type ‘unknown’ is not assignable to type ‘string’.でエラーになる
const b: string = a;
// ‘a’ is of type ‘unknown’.でエラーになる
a.toUpperCase();

a as string;
// ‘a’ is of type ‘unknown’.で型アサーションでstringとして型推論を上書きできない
a.toUpperCase();
“`

## 型が明示された

【Next.js】はじめの一歩（１）

# はじめに
このページは、これまでPythonで飯を食ってきた筆者が、春から新しく関わることになったプロジェクトで初めてNext.jsを触ることになったため、最低限使えるようになるまでの学習の軌跡を記したものである。

したがって想定する読者は

– プログラミング初心者**ではなく**（Next.jsの作法や文法を知らないだけ）
– 筆者と同じく初めてNext.jsに触れる**Next.js初心者**

となっているため、プログラミングそのものが初めての人にはお勧めしないことに注意してほしい。

# Next.jsとは
「ReactベースのフルスタックWebアプリケーションフレームワーク」[[参考1][ref_1]]らしい。MITライセンスで開発されており、商用・私用を問わず無償で利用可能なようだ。

また、[こちら][ref_3]には

> Next.jsはサーバーサイドレンダリング(SSR)やファイルベースルーティングなど多くの機能をゼロコンフィグで提供してくれます。また、開発会社Vercelが同名のプラットフォームVercelを展開しており、デプロイ/ビルド/配信までを一気通

[ReviewAI 使用例] 名家 [新大久保 韓国料理店]

# はじめに

レビュー分析AIサービスの ReviewAI (レビューアイ) を開発しています。
本記事ではレビュー分析の例として、新大久保の韓国料理の人気店を取り上げていきます！
[人気店の記事をまとめているページはこちらです。](https://qiita.com/RetegyLink/items/3d94852bf25a724a82cc)

今回は、名家 の食べログに集まっているレビューを分析します。

## 名家

> 料理が美味しく、くつろげる店

[食べログ](https://tabelog.com/tokyo/A1304/A130404/13004157/)

## ReviewAI (レビューアイ)

弊社 RetegyLink が開発中のレビュー分析 AI です。
https://reviewai.next-seed.work/
試作版を公開中で、現在は
– [食べログ](https://tabelog.com/)
– [じゃらん](https://www.jalan.net/)
のレビューを分析できます。

# レビュー分析

さっそくですが、こちらが分析結果で

JavaScriptとJava間違えないで。ダメ。ゼッタイ。

どうもAtsu1209です。

突然ですが…
### 「JavaScriptとJavaは同じです。」
これを見て舌打ちをした方もいるんではないでしょうか。
でもよく間違えられます。

僕も台パンしました。

そこでめちゃくちゃ短くわかりやすく解説します。

# HelloWorld
ではまずは親の顔より見た`HelloWorld`を出力しましょう。

“`javascript:JavaScript
console.log(“HelloWorld”);
“`
簡単です。
続いてJava
“`java:Java
public class Main {
public static void main(String[] args) {

System.out.println(“Hello World”);

}
}
“`
“`console:コンパイル
javac Main.java
“`
“`console:実行
java Main
“`
:::note alert
Javaほとんどわからないので間違ってるかも
:::

こ

読みたい記事は「見出し」と「いいね」で選んで、簡単情報収集！

# はじめに
情報が溢れる世の中、なるべく効率的に目的のものを見つけたいという思いは皆さんあるかと思う。そこで、特定のテーマに関連するQiitaの記事から、タイトルといいね数だけを抽出して、効率よく閲覧できる仕組みを構築したいと考えた。

# やってみたいこと
・Qiitaから『顔認証』についての記事を探す
・タイトルといいね数を抽出し、一目で人気の記事が分かるようにしたい

# Node-REDを活用
Node-REDで、Qiitaの顔認証の記事をピックアップしてみることにした。

・HTTPリクエストノード
QiitaのAPIを使用して特定のクエリに基づいてアイテム（記事）を検索する。https://qiita.com/api/v2/items というURLは、パラメーターに検索クエリを設定することで、特定のキーワードを含む記事を取得することが可能である。

・Functionノード
検索クエリに含まれる日本語や特殊文字をURLエンコードする必要がある。そこで、Functionノードを使って、msg.query = encodeURI(“顔認証”); を実行することで、msg.qu

カラーコードの仕組み

# カラーコードってどんな仕組みか、知ってる？

ざっくりその辺の解説について。

# カラーコードや色とは？

基本的に色はRGBの3原色で構成されているというのはご存じかと思います。
赤＋青で紫
赤＋緑で黄
全て合わせると白

みたいな形ですね。

https://tomari.org/main/applets/iro/gen.html

これを16進数(HEX)にしたのがカラーコードとなります。
内訳はこんな感じ。

`#DE5040`は

“`
Red = DE
Green = 50
Blue = 40
“`
といった形で表現されています。
これらを10進数に変換したものがRGBとなります。

HEXをRGBのコードに変換するとしたらこんなコードで変換できます。

“`js
// rgbを分解する。
const [r, g, b] = ‘#de5040’.replace(‘#’, ”).match(/.{2}/g);

// rgbを10進数に変換する。
const red = parseInt(r, 16);
const green = par

【js/ts】Date型のtoStringでYYYY/MM/DDを取得してみる

## そのままtoString()をすると色々余計な文字がついてくる
※Dateの第二引数(Month)は１月＝０となる。例えば２月なら「1」を設定する。
“`javascript
const d = new Date(2024, 1, 10)
console.log(d.toString())
“`
“`console:結果
Sat Feb 10 2024 00:00:00 GMT+0900 (日本標準時)
“`
## よく見かける方法
“`javascript
const d = new Date(2024, 1, 10)
const s = `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`
console.log(s)
“`
“`console:結果
2024/2/10
“`
ただ毎回これを書くのは面倒……

## Date.prototype.toStringを上書きしてみる
“`javascript
Date.prototype.toString = function get() {
re

GPT-4o と Node.js の process.loadEnvFile() と OpenAI のライブラリを組み合わせる

リリースされたばかりの GPT-4o を API経由で試すのに、以前、以下の記事で書いた「Node.js の process.loadEnvFile()」を組み合わせてみたという内容です。

●【小ネタ】Node.js v21.7.0 の新機能で環境変数用のファイル読みこみを軽く試す： process.loadEnvFile() – Qiita
　https://qiita.com/youtoy/items/ae838cacd43b3c3e61e1

## GPT-4o について
GPT-4o　については、既にいろいろな方が記事を書いていると思うので、詳細はそれらをご参照ください。

●GPT-4o – Google 検索
　https://www.google.com/search?q=GPT-4o

## OpenAI の Node.js ライブラリ
今回、GPT-4o を API経由で試します。
その処理には、以下の OpenAI の Node.js用ライブラリを使います。

●openai – npm
　https://www.npmjs.com/package/openai

画像にグリッド線を入れるツールをHTMLを作りました

今回HTMLとJavascriptを使用して作成したのは、画像をアップロードすると、自分の好きな幅のグリッド線を追加することができるツールです。

## はじめに
このツールは、学校等の美術で模写をする際に簡単に画像にグリッド線を追加したいという場合等に使用していただけると嬉しいです！

## 作成方法
見た目を自分で作成し、JavaScriptの部分等の動作のコードは、ChatGPTに手伝ってもらいコーディングをしました。いくつか試作品を作成いたしましたので。どこが違うか考えてみてください！

# 試作品１
“`html:test1.html