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

ReactとTypeScriptでChrome Extensionを開発

# ReactとTypeScriptでChrome Extensionを開発

## はじめに
初投稿です。

表題の件を実施しようと思ったきっかけは、このプロジェクトの前にCookieに関するChrome ExtensionをTypescriptを使わずにJavascriptとReactを使って製作しました。ですが、思わぬところでエラーが出たりエラーを解決するのに時間がかかってしまったりしたことがあり、もしも、Typescriptを使って開発したら何か違いが出るか試したかったからです。

今回は、ReactとTypescriptを使って「Stand-Up Reminder」という特定の時間内である間隔ごとに、立って体をほぐすことを促すようなExtensionを作りました。長時間座り続けてしまうのはエンジニアの性だと思いこのテーマを思いつきました。

本プロジェクトの完成コードのGithubは[こちら](https://github.com/memorandumtk/stand-up-prompt)から。

本記事では、Chrome ExtensionをReactで作るうえでの、Re

CDN版のReactを使ってWebsocketのチャットクライアントを実装してみました

# はじめに

### 【欲望】

（１）インストール作業は極力したくない

PC内で使うモジュールをガチガチにして重たくしたくない

（２）オフラインでも動くようにしたい

ブラウザへのドラッグ＆ドロップで使いたい
（つまりはWebサーバーレスでも使える）
（つまりはfileプロトコルでも使える）

という願いを叶えられたら幸せだよねー。
そういう思いから以下のルールを決めました。

### 【ルール】

（１）CDN版を利用する

インストール回避のため

（２）CGIは使わない

Webサーバー回避のため

【ルール】の（１）に関しては、そのままだとオンラインでしか使えなくなるのでダウンロードしたモジュールを使います。
また、アクセス先のファイルが変更される事で発生する不具合の影響を小

JSDocのフォーマットまとめ

# はじめに

自分がよく使うフォーマットを中心に備忘録としてまとめておきます。
IDEの１つであるVSCodeのツールチップとJSDoc出力後のイメージをセットで掲載しておきます。

# 環境

JSDoc

v4.0.3

VSCode

v1.90.0

# 【スカラー型】

## ・boolean
“`javascript:ソース
/**
* true or falseの２値型
*
* @type {boolean}
*/
let data_boolean = false;
“`

##### 　－ツールチップ－


##### 　－出力イメージ－

![image.png]

Javascriptを使用してフォームを何個も追加

# はじめに!

ポートフォリオ制作中です！
書こう書こうとずっと思ってはいたのですが、なかなか手がつけられず…
忘れないうちに書き始めようと決心しました…！

今回はJavascriptでフォームを何個でも追加できるような実装をアウトプットします✍️
`accepts_nested_attributes_for`を使用して子要素を親要素で保存や変更できるようにしています！
（後々調べると、`accepts_nested_attributes_for`は使用しない方がいいかもという記事をちらほら見かけますが、ポートフォリオも終盤で今更変えられないのでこのままでいきます！)

https://zenn.dev/murakamiiii/articles/5ecefb7a58d1ef

https://zenn.dev/ysi831/articles/0faa4c301e7d9f

# 完成図
旅行やデートのプランを共有するSNSサイト「Go out Planning」を絶賛作成中です
プラン概要の中に何個でもスケジュールフォームを追加できるようにするため、
今回は動的フォーム追加を実装しま

GoogleのBloggerの記事Feed取得API

rss2jsonがうまく動作しなくなったので、GoogleのBloggerから記事を取得するAPIの方法を利用しましたメモ

GoogleAPIのキーが必要なので、参考サイトを参照してAPIキー作成してます

IDやKEY,URLの設定

“` js
//0000000000000000000やAAAAAAAAAAAAAAA-AAAAAAAAAAAAAAAAAAAAAAAの箇所は自身のIDやKEYを入力
const BLOG_ID = ‘0000000000000000000’,
API_KEY = ‘AAAAAAAAAAAAAAA-AAAAAAAAAAAAAAAAAAAAAAA’,
BLG_API_URL = `https://www.googleapis.com/blogger/v3/blogs/${BLOG_ID}/posts`,
FEED_NEWS_URL = `${BLG_API_URL}?q=${‘news’}&maxResults=${‘2’}&key=${API_KEY}`,
FEED_KNGE_URL = `${BLG_API_URL}?q=${‘

nodeコマンドのオプションと環境変数

## コマンドのオプションと環境変数

nodeコマンドにはさまざまなコマンドラインオプションが用意されています。

コマンドラインオプション一覧は **-h** や **–help** をつけてnodeコマンドを実行することで表示できます。

### ヘルプ

“`javascript
node — help
“`


### バージョン確認をする

nodeコマンドのバージョンは **-v** オプションで確認できます。

“`javascript
node -v
“`

### ワンライナーコードを実行をする

**-e** オプション似続けてJavaScriptのコードを記述すると、そのコードを実行させることが可能です。
ワンライナーコードを実行させる場合に便利です。

“`javascript
node -e ‘cons

【Figma Plugins】コンポーネント プロパティを編集する

## はじめに

FigmaのPluginを開発する際、コンポーネントのプロパティを入れ替えたいと思ったことはありますか？
この記事では、コンポーネント プロパティを編集する方法を解説します。

## コンポーネント プロパティを編集する
### コンポーネントを取得する
コンポーネントを取得方法は以下の記事で詳しく解説しました。
ぜひご覧ください。

https://qiita.com/degudegu2510/b1faa95f5b575a889587

“`ts
const componentKey = ‘****************************************’

const createComponent = async () => {
const component = await figma.importComponent

【ブックマークレット】マケプレ商品を除いて再検索するブックマークレット「マケプレ・ニフラム」

進学、就職、服選び。
選択肢が多いというのはだいたいの場面で嬉しいことです。

プライムセールのマーケットプレイス商品。君以外は。

マケプレを除くためのパラメータを追加し、再検索するブックマークレットです。
# マケプレ・ニフラムのコード
毎回URL手打ちするのはプログラマーの美徳である「怠惰」が足りないのでブックマークレットにしましょう。
“`javascript
javascript: (function () {
let url = new URL(window.location.href);
let params = new URLSearchParams(url.search);
params.set(“emi”, “AN1VRQENFRJN5”);
url.search = params.toString();
window.location.href = url.toString();
})();
“`
# 使い方
1. ブックマークのURLに上記ブックマークレットを設定
2. 検索結果ページでブックマークをクリック

これで、検索結果がグッと

可読性 EarlyReturnと 蝉の声

この記事では、early returnというコードの可読性を向上させるコーディング方法について簡単に紹介する。

タイトルに特に意味はない。夏っぽさとプログラミングっぽさを感じさせる俳句のようなものだね(？)。

:::note info
この記事は、5分以内で読むことができます。
:::

## early returnとは
まず、early returnは直訳すると**早期リターン**になる。

関数やメソッドの途中で、特定の条件が満たされた場合に、処理を早期(early)に終了(return)して関数から抜けるプログラミング技法だ。

early returnを用いることで、不要なネストや複雑な条件分岐を避け、コードの可読性と保守性を向上させることができる。

つまり、場合にもよるが、**early returnを用いることでリーダブルになる**わけだ。

## early returnを使わない場合と使った場合
実際に、処理は同じだけどearly returnを使っていない場合のコードと、使った場合のコードを見比べて、可読性が向上しているかを見てみよう。

例として、認証情報

同じファイル内で同じ名前のものを分割代入したときの解決策

# はじめに

こんにちは、エンジニアのkeitaMaxです。

reactで実装していた時に困ったことがあったので、それの解決策を記事にさせていただきます。

# 困ったこと

以下のように、同じファイル内で同じ名前のもの分割代入した時に、名前が被ってエラーになってしまいました。

“`react
const { isLoading, getQuestion, question } = useGetQuestionAPI()
const { isLoading, postUser, user } = usePostUserAPI()
“`

# 解決策

分割代入の際に呼び出す側で変数を変更できる機能が、JavaScript(TypeScript)にはあるらしいです。

>分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。
(参考URL：https://developer.mozilla.org/ja/docs/Web

FastAPI を使って PC のファイルを別の場所にコピーするだけの無駄機能を作る

## デモサイト

推奨ブラウザは Google Chrome です。
アクセスに時間がかかる場合がありますので、あらかじめご了承ください。

https://copy-file-muda.onrender.com

:::note alert
ファイルの内容をサーバに保存するなどの処理は行っていませんが、サーバを経由しますので、機密情報等をアップロードしないようにお願いいたします。
:::

ソースコードはこちらです。

https://github.com/noritakaIzumi/copy-file-muda

## モチベーション

FastAPI でファイルのリクエストを学習しているときに思いつきました。

## 概要

ユーザがアップロードしたファイルを別のディレクトリにダウンロードします。


## ソースコード

ファイル構造

JSDocコメントちゃんと書いていこう！

みなさんはコメントと言われてどんなものを想像するでしょうか？
“`typescript
// ここにコメントを残します

/*
* 複数業だとこんな感じ
* コメントを残します
*/
“`

上記のようにコメントを残すことは多いと思います。
ただ、コメントを残すのではなくコーディングのヒントになるものを残せるのがベストです！
なので「JSDocコメント」について復習も兼ねてまとめてみました！

:::note
読んでくれた人が明日からJSDocコメント書いてみようと思えるようになることを目指した記事です！
:::

## JSDocコメントってなに？
JSDocコメントとは関数や変数の宣言前に記載するコメントです。
`@type`や`@param`を記述します！

“`typescript
/**
* @type {boolean}
* @param {string} name
*/
“`

## JSDocコメントの種類
JSDocコメントには先にあげた`@type`や`@param`以外にたくさんあります！
よく使われるものを紹介します！

|JSDocの種類|

htmlを動的に追加された要素でも関数が効くようにする方法・jqueryとvanilla js

# jqueryなら
“`javascript
$(document).on(‘click’, ‘.js-delete’, function() {
// クリックされたボタンの最も近い親の

を削除
$(this).closest(‘table’).remove();
});
“`

# vanilla jsなら

### DOMNodeInsertedは非推奨とのご指摘をいただいたので再度
短い！ありがとうございます。

“`javascript
document.addEventListener(‘click’, ({ target }) => {
if (target.closest(‘.js-delete’)) {
target.closest(‘table’).remove();
}
});
“`

### observerを使う方法

“`javascript
// ページ読み込み時に実行される関数
document.addEventListener(‘DOMContentLoaded’,

元記事を表示

JavaScriptにおけるvarとletの違い

JavaScriptには変数を宣言するためのキーワードとして`var`、`let`、`const`の3つがあります。
特に`var`と`let`の違いは混乱を招きやすいポイントです。
本記事では、`var`と`let`の違いを明らかにし、なぜ`let`が推奨されるのかを解説します。

## varとletの基本的な違い
### スコープの違い
`var`は関数スコープを持ちます。関数内で定義された変数は関数全体でアクセス可能です。
一方、`let`はブロックスコープを持ち、ブロック（if文やfor文など）内で定義された変数はそのブロック内でのみアクセス可能です。
“`
function scopeExample() {
if (true) {
var x = 10;
let y = 20;
}
console.log(x); // 10 (関数スコープなのでアクセス可能)
console.log(y); // ReferenceError: y is not defined (ブロックスコープなのでアクセス不可)
}
s

元記事を表示

ドムドーラ地方の生成（アレフガルド in マインクラフト Part7）

# はじめに
　[前回の投稿](https://qiita.com/yamamorisoba/items/2e6fb100b4ed73d77a27)から、ひと月ほど間が空いてしまいましたが、ドムドーラ地方の測量と地形の生成がようやく一段落しました。ドムドーラといえば、ドラゴンクエストの攻略上非常に重要なアイテムを手に入れる仕掛け（イベント？）がある街です。街自体の生成はこれからですが、その仕掛けを再現する方法についても検討したので、地形の生成と仕掛けの実現方法についてまとめてみます。
※本投稿には、ドラゴンクエストの攻略に関するネタバレを含みます。ご注意ください。

# ドムドーラ地方の生成
[以前生成したメルキド地方](https://qiita.com/yamamorisoba/items/f27bc50be589953ce696)の面積は、440×270=118800ブロック分でしたが、今回生成したドムドーラ地方は、528×420=221760ブロックと、メルキド地方の約2倍の広さとなりました[^1]。

![ドムドーラexcel.jpg](https://qiita-ima

元記事を表示

ベクトルの外積を用いて二直線の交点を求める

# はじめに

数年に一度必要となるたびに調べて計算していたが、疲れてきたのでここにメモを残す.
問題は、「平面上に与えられた二直線 AB、CD の交点を求めよ」である.


# ベクトルを用いた問題の書き換え

上の問題は、ベクトルを用いて以下のように書き直すことができる:
$P = A + s \overrightarrow{AB} = C + t \overrightarrow{CD}$
を満たす定数 s、または t を求めよ.

この P が元の問題で求めるべき交点である.

# 補助線を引き、問題をさらに書き換える

“`math
\begin{align*}
E = A + \overrightarrow{CD} \\
F = B + \overrightarrow{CD}
\end{align*}
“`

として、以下

元記事を表示

ニコニコ(Re:仮)の10連ガチャを選択しやすいようにしてみた[要ブラウザ拡張機能]

:::note warm
※この機能はブラウザ拡張機能「Tampermonkey」用 スクリプトコードです。
:::
## 動画の再選択機能が「SSRガチャ」と呼ばれているらしい
「ニコニコのページにいたずらして使いやすいようにする」スクリプト第二弾

元はキーボードショートカットを使えるようにするスクリプト。
動画リロードボタンのショートカットを入れたのでリリースします。
SSRを目指せ！

### 使い方
* “` CTRLキー “` : 対応する数字番号などを表示する。（表示されていなくてもスクリプト自体は機能します。）
* “` 数字キー “` : 対応する番号にジャンプします。
* “` Rキー “` : 動画をリロードします。（連打できないように “3秒待機ルール” があります）
## ガチャをキーボードショートカットで回すスクリプト
“`javascript ニコニコ動画キーボードショートカット SSRを引け！.js
// ==UserScript==
// @name ニコニコ動画キーボードショートカット SSRを引け！
// @names

元記事を表示

JavascriptでUUID4を取得する

“`javascript
function uuid4(){
return […new Array(36)].map((_,i) => {
switch(i){
case 8:
case 13:
case 18:
case 23:
return ‘-‘;
case 14:
return ‘4’;
case 19:
return parseInt(Math.random() * 4 + 8, 10).toString(16);
default:
return parseInt(Math.random() * 16).toString(16);
}
}).join(“”);
}
“`
自分用メモ。

“`javascript
“RRRRRRRR-RRRR-4RRR-rRRR-RRRRRRRRRRRR”.replaceAll(/R/g,()=>parseInt(Math.random()*16).toString(16)).replaceAll(/r/g,()=>parseInt(Math.ran

元記事を表示

【JavaScript】スマホ向けサイトでロングタップを実装したい

# 0. INDEX
1. 概要
2. 前準備
3. 実装
4. あとがき

# 1. 概要
スマホ向けWebアプリ開発で、ロングタップ（押しっぱなし）的なトリガーがあると思い込んでいたが為にやらかしました。

[^salesman] [^shachiku-chan]

[^salesman]: 弊社にはこのような営業はおりません。全ては私の中にいる悪魔（サービス精神旺盛）の所業であり、ただの自爆です。

[^shachiku-chan]: マンガは **社畜ちゃん台詞メーカー** で作りました。
https://blog.oukasoft.com/OS/scenemake/

という事で、スマホアプリのファイラー等でよく見かける、**ロングタップをするとファイルを選択する** という感じの事をWebアプリでもやりたくて、 **ロングタ

元記事を表示

obnizのREST APIにアクセストークン付きでリクエストする

obnizのREST APIたまに使うと便利だったりします。

https://docs.obniz.com/ja/reference/cloud/hardware-api/rest-api

## 通常サンプル

アクセストークン無しだと以下のようにリクエストできます。

“`bash
curl https://obniz.com/obniz/1234-5678/api/1 -H “Content-Type: application/json” -X POST -d ‘[{“display”:{“clear”:true, “text”:”Works fine.”}}]’
“`

## アクセストークン付き

アクセストークン付きのサンプルリクエストがドキュメントページになかったのでメモしておきます。

HeaderのAuthorizationに入れ込めば良いという単純なやつですがコピペサンプルがあると楽なのと最近アクセストークン発行を行っておくと管理者コントロールがしやすいことを学んだのでこちらの使い方をデフォにしていく可能性もあったりします。

> ![スクリーンショット 2

元記事を表示

OTHERカテゴリの最新記事

• 
  • 2024.09.19

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

• 
  • 2024.09.19

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

• 
  • 2024.09.19

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

• 
  • 2024.09.19

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

• 
  • 2024.09.19

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

• 
  • 2024.09.19

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