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

[Rails] Rails7 cocoon導入方法

## 目的
rails7でフォームの追加・削除をしたかったのでcocoonを使い実装しました。
cocoonの公式githubではrails6までのやり方しか書いておらず
なおかつrails7ではrails6とは導入方法が異なり、導入の記事も少なくハマったので備忘録として残そうと思い記事にしました。

#### 対象者
– rails7でcocoonの導入がわからない人・ハマっている人

## 開発環境
– rails 7.0.4.3
– ruby 3.1.2
– cocoon 1.2.15
– jQuery 3.7.1

## 導入方法
#### cocoonをインストール
“`:Gemfile
gem ‘cocoon’
“`
“`:ターミナル
$ bundle install
$ yarn add @nathanvda/cocoon
“`
cocoonのインストールはrails6でもrails7でも全く一緒です。

#### cocoonを設定
ここからrails６とrails7では違ってきます。
公式のgithubにはrails6までのやり方しか書いておらず、ここから苦戦

[ReviewAI 使用例] くるむ [新大久保 韓国料理店]

# はじめに

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

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

## くるむ

くるむ

新大久保で話題のサムギョプサルが食べられるお店

> 新大久保駅から徒歩5分とアクセス抜群。改装された2階の店内は半個室席が多く、落ち着いた雰囲気が魅力的。人気の蜂の巣サムギョプサルは2人前から注文可能で、野菜とのバランスが良く、組み合わせの自由度が高いと評判。残った野菜はスムージーとして提供してもらえるのもうれしいポイント。ランチタイムは混雑するため、夜に訪れるのがおすすめです。
> 引用元 [AutoReserve](https://autoreserve.com/ja/restaurants/ff2agG6tuqbDf1Yr4Kqj)

[食

Reactのhooksについてちゃんと理解する ~State・Context・Ref編~

## はじめに

Reactにおいてhooksはとても重要な要素ですが、これまであまり理解できずに利用していた節があるのでドキュメントを読んでちゃんと理解しようと思います。

## そもそもhooksとは

コンポーネントから利用できるReactの様々な機能のことで、Reactに組み込みのものや自分で作成したものを利用することができます。

## hooksの注意点

– hooksはReactがレンダーされている間のみ利用することが可能
– コンポーネントのトップレベルまたはカスタムフック内でのみ呼び出すことが可能
– 条件分岐、ループ、ネストされた関数の中でフックを呼び出すことはできない

## Stateフック

stateを利用すると情報をコンポーネントに記憶させることができます。
**コンポーネント**にという部分が重要で、stateは別コンポーネントでは利用できないため、別コンポーネントでも利用したい場合は別の方法を利用する必要があります。([stateのリフトアップ](https://ja.react.dev/learn/sharing-state-between

スクリプトでinDesign CC の特定のテキストエリアに文字を挿入する

## 環境
– inDesignCC(2024)
– Visual Studio Code
– plugin: [ExtendScript Debugger v2.0.3](https://marketplace.visualstudio.com/items?itemName=Adobe.extendscript-debug)

## ステップ

#### Step1
inDesignで新規ファイルを作成、テキストエリアを作成、テキストエリアにスクリプトラベルを登録する。
スクリプトラベルは例として `input-hoge`としておく。

> スクリプトラベルの設定方法↓
> テキストエリアを選択した状態で、
> ヘッダーメニュー ウインドウ > ユーティリティー > スクリプトラベル


[React] コンポーネントを用いたレンダリング

# 目次
– [使用するプロジェクトのフォルダ構成](#使用するプロジェクトのフォルダ構成)
– [main.jsxのソースコード](#main.jsxのソースコード)
– [main.jsxのソースコードの解説](#main.jsxのソースコードの解説)
– [index.htmlのソースコード](#index.htmlのソースコード)

# 使用するプロジェクトのフォルダ構成
~~~:fold_structure
├── node_modules/
├── public/
│ └── vite.svg
├── src/
│ ├── App.jsx
│ ├── App.css
│ ├── index.css
│ ├── lectures.js
│ ├── main.jsx
│ └── (other components)
├── index.html
├── package.json
├── README.md
└── vite.config.js
~~~

# index.htmlのソースコード

~~~html:index.html

Google Chrome用Qiitaのリンクを取得するブックマークレット

# 手順

1. Google Chormeを開く
2. 適当にブックマークをする
3. タイトルをQURLとかユニークにする
4. Urlのところに以下のスクリプトをコピペする
5. コピペすると改行コードが消えて１行になる

# Javascript

“`javascript
javascript:(function(){
var title = “[” + document.title + “]”;
var url = “(” + window.location.href + “)”;
var text = title + url;
navigator.clipboard.writeText(text);
})();
“`

## ポイント
### `)`の意味がわからない
`})();`
ラストの２番目の`)`は対応するものがない。だからと言って削除すると全く動かない。

### alertはない
なので、何の予告もなくクリップボードに入る

## ソース
かってにAIが作っても危ないので
[Document – Web

ES Modulesからexportされている関数や変数の一覧を取得する方法

## はじめに

ESModuleを動的にロードして、そのモジュールでexportされた関数や変数の一覧を取得する方法です

`dynamic import`でロードすると、moduleの`key`がexportした名前になっていました

https://github.com/murasuke/list_module_export

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/import

## 調査対象モジュール

関数、変数、classをexportするだけのモジュールです

“`javascript:exports.mjs
// 関数、変数、classをexport(確認用)

export function func1(args) {
console.log(`called func1(${args})`);
}

export const func2 = (args) => {
console.log(`called func2(${args})`);
};

e

GPT-4o の入力に Base64エンコードした画像ファイルを使う：Node.js の process.loadEnvFile() と OpenAI のライブラリの組み合わせ

以下の記事のと同様に、「GPT-4o、Node.js、公式ライブラリ」が関係する記事です。

●GPT-4o と Node.js の process.loadEnvFile() と OpenAI のライブラリを組み合わせる – Qiita
　https://qiita.com/youtoy/items/d535f9dd3db95b914fab

今回も、上記と同様に OpenAI の Node.js用ライブラリを使って、GPT-4o の API を扱います。
また、処理の内容は GPT-4o での画像ファイルの入力で、さらに、その画像は自前で Base64エンコードするというものです。

流れとしては、入力用の画像ファイルを用意して、それを Node.js の処理で Base64エンコードして、そのエンコードされた結果を GPT-4o の API にわたす形です。

## GPT-4o での画像入力
### Web上の画像を扱う（※ 公式サンプルベース）
まずは、公式サンプルをベースに、GPT-4o での画像ファイルの入力に URL指定を使うやり方を試します。

元にするサンプルは以下

promiseを即時関数を使わずに分割して書いてみた

promiseがやっとわかった（気がした）ので投稿します。そもそもPythonからはいった身としては、promiseのサンプルに出てくる即時関数が多くて理解しにくいと感じます（単に慣れていないだけですが）。そこで即時関数を使わずに理解しようとしました。そもそもpromiseとはなにか、一度整理してみると

Promiseの正体はインスタンスである。引数にはexecutor関数（実行させたい処理）を取る。
executor関数は2つの引数（resolve, reject）を受け取る。
resolveとrejectもまた関数であり、executor関数の中で実行される。
resolve関数を実行するとPromiseは成功（fulfilled）状態になる。
reject関数を実行するとPromiseは失敗（rejected）状態になる。
resolveとreject関数は引数に値（例えばメッセージやデータ）を取る。この値をmesとする
この値（例：メッセージ）はPromiseインスタンスのメソッドである.then()や.catch()の引数に渡される。
.then()も関数を

yutdyfdsgdshkjdsf

https://github.com/orgs/phidatahq/discussions/911
https://github.com/orgs/phidatahq/discussions/914
https://github.com/orgs/phidatahq/discussions/912
https://github.com/orgs/phidatahq/discussions/915
https://github.com/orgs/phidatahq/discussions/916
https://github.com/orgs/phidatahq/discussions/917
https://forum.mush.com.br/topic/216983/gyyuftryrdtrdyrdyfdrdtrd
https://dev.to/zahranabila/cnn-breaking-news-latest-news-and-videos-a86

p5.js の noise() で遊ぶ

# はじめに
たくさんのパーティクルが連続的に、かつそれぞれ独立して動くようなものを作りたいと思います。
`Math.random()` のような関数を使って、パーティクルの座標を動かしていってもいいのですが、それぞれの動きがバラバラすぎて、パーティクルの数を増やしていくと目にうるさくなってしまいます。

# 方法
Processing に用意されている `noise()` というメソッドを使います。
これは、パーリンノイズと呼ばれる、人間にとって自然なゆらぎに見える連続した数値を与えてくれるものです。

# 環境
[editor.p5.js](https://editor.p5js.org/)
p5.js: v1.9.3

本プロジェクトにIDEを使う利点が見出だせなかったので、今回は Processing (Java) ではなく p5.js で実装しました。

# コード例
“`js:sketch.js
class DriftingPoint {
constructor() {
this.seed = random() * 10;
this.noiseLeve

JavaScriptのtry…catch構文について

# はじめに
JavaScriptには、コードの実行中に発生する可能性のあるエラーをキャッチして適切に処理するためのtry…catch構文があります。この構文を使用することで、エラーが発生してもプログラムがクラッシュせずに処理を続行できます。
## 基本的な構文
“`ts
try {
// エラーが発生する可能性のあるコード
} catch (error) {
// エラーが発生した場合に実行されるコード
} finally {
// （オプション）エラーの有無にかかわらず常に実行されるコード
}
“`
– **tryブロック**：エラーが発生する可能性のあるコードを記述します。
– **catchブロック**：tryブロック内でエラーが発生した場合に実行されるコードを記述します。発生したエラーを引数として受け取ります。
– **finallyブロック**（オプション）：エラーの有無にかかわらず常に実行されるコードを記述します。

# 基本的な使用例
“`js
try {
let result = someFunction(); // ここでエ

自称モダンなLodash：Radashを触ってみた

## GitHub

https://github.com/sodiray/radash

## 何をするライブラリ？

underscore, lodashなどと同じ、ユーティリティ関数を集めたライブラリ。
公式曰く以下のコンセプト

– Zero dependencies
– Readable
– Semi-Functional
– Types

## 読み方

「ラダッシュ」（/raw-dash/）
「La」mbda – 「dash」　からきているとどこかのドキュメントに書いてあった記憶

## 触ってみた上での所感

公式のコンセプトを軸に評価。

### Readable

→そのとおり:grin:

ライブラリの細かい仕様を確認したいってときにどうするかというとソースコードを確認するということがありますが、
ライブラリが大規模あるいは複雑だったりすると該当箇所を確認するためにもそれなりのノウハウと時間が必要です。

Radashの場合はライブラリのセクションがそのままソースコードの階層に対応しているのですぐ確認できます。
なのでライブラリをブラックボックスとして扱わなくて

Google Apps Script (GAS) の使いかた【基礎メソッド編】

# Google Apps Script (以下gas) とは
詳しくは[こちら](https://qiita.com/tacopic-007/items/05fff88270f9eb59e826)の記事に記載していますが、簡単に説明するとGoogleサービスの自動化スクリプトをAPIなどを使用せずに開発できる、めちゃんこ便利な言語です。

# 概念の説明
“`js:コード.gs
const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
const sheet = spreadsheet.getActiveSheet();
“`
この2つが頻繁に使用する、スプレッドシートオブジェクトです。
ぱっと見たところ、同じようなものに見えますが何が違うのでしょうか？

`spreadsheet`は、名前の通りそのスプレッドシートを取得しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3714044/cc96cbf4-

【JavaScript】オンラインIDEで動くコードがローカルのIDEだと動かない

# はじめに
Udemyの【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門 を受講しながら、JacaScriptの基本を学んでいます。セクション5、「素のJavaScriptだけでToDoアプリを作成してみよう」で詰まってしまったことがあるのでそのエラーについて投稿します。

# 作ろうとしているもの
入力欄にテキストを入力すると未完了のTODOとして表示され、完了を押すと完了したTODOとなる画面


# コード

Udemyの講座の課題のコード

“`index.html