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

Stripe Appsで公開したアプリの利用状況を、API / Webhookで取得する方法

Stripeには、ダッシュボードのカスタマイズや独自のワークフローを実現するためのアプリ機能「Stripe Apps」が用意されています。公開されているアプリをアカウントにインストールして利用することもできますし、自社サービスとStripeを連携させるアプリを公開して、ユーザーがStripeとの連携をよりシンプルに実現できるようにも使えます。

https://marketplace.stripe.com/

公開しているアプリの利用状況やインストール・アンインストール数、そしてアプリ紹介ページのページビューなどは、[Stripeダッシュボード](https://dashboard.stripe.com/apps)から確認することができます。この情報を使って、アプリの改善やプロモーション施策の検討などを行うことができます。

![スクリーンショット 2024-04-05 15.03.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/abac5300-92c9-3333-920d-f49

オブジェクト [JavaScript]

オブジェクトとは？

配列同様、データ構造の一つ。
配列と同じように複数のデータを持っておくことができます。

オブジェクトは**プロパティ**の集合です。
プロパティとは名前（キー）と値（バリュー）が対になったものです。

配列のようにインデックスで要素にアクセスするのではなく、
キーを使ってデータにアクセスします。

例：

・変数は１つのデータしか格納できません。
・配列はさまざまな型のデータを複数格納できるのが特徴です。

ではオブジェクトの特徴は？

そこで、例としてユーザー登録のデータを配列で格納したコードを見てみます。
“`js
const array = [“山田太郎”,30,yamada@example.com,090-xxxx-xxxx];
“`

上記コードを見ると、「山田太郎」が名前を意味しているのはなんとなく分かりますが、「30」は何を指しているのか分かりづらいし全体としても見づらい印象を受けます・・・

まったく同じ内容を、今度はオブジェクトで記述すると以下のようになります。
“`js
const
const obj = {
name: ‘田

Reactを使って、クリックするとカードのように裏表が回転するコンポーネントを作成

# はじめに
クリックするとクルクルと回転して、裏表を表示してくれるコンポーネントを作成したので共有したいと思います。

🔽参考GIF

# 実装

jsxファイルに以下を記述して、コンポーネントを宣言します。
解説として、簡単なコメントを入れています。

“`javascript
import “./styles.css”;
import { useState } from “react”;

// 裏面と表面に表示する要素をpropsで受け取る
const Card = (props) => {

const [isFlipped, setIsFlipped] = useState(false);

// クリック時に裏表をstateに割り当て
const handleClick = ()

JavaScriptでWebアクセシビリティに配慮したボタンを作ろう

こんにちは！

# 概要

通常の``要素ではなく、カスタムなボタンを実装する時に、W3のWebアクセシビリティの基準を満たすHTML要素の実装方法を説明します

# なぜWebアクセシビリティ

我々Web開発界隈で最も軽視されがち、誤解されがちなWebアクセシビリティ。多くのジュニアおよびミドル級のWeb開発者にはまずWebアクセシビリティの存在自体に気づいていないのかもしれません。またより愚かなパターンですが、知っているけれど陰謀論のような思想家でWebアクセシビリティに反感を持っている者すらいます。

なので、まずは「なぜWebアクセシビリティが大事なのか」というところから話を始めたいのですが、すでに目から鱗が落ちている方はこの独白スピーチをスキップしてください:joy:

Webアクセシビリティは、[W3](https://www.w3.org/WAI/fundamentals/accessibility-intro/)の説明を拝借しますと、
> 障害を持っているユーザーでも難なく使えるWebサイトをように設計および開発する技術

のことです。

しかし、これ

JavaScriptの “+” 演算子の謎

今回はJavaScriptの+演算子について私が思っていたよりも中々理解しにくいところがありましたので、記事にしてまとめてみました。

### 基本的な概念
JavaScriptでは、`+` 演算子は2つの役割を持っています：
1. **数値の加算**：両方の値が数値の場合、これらを足します。
2. **文字列の連結**：一方または両方の値が文字列の場合、値を文字列として結合します。

### 型変換の例
JavaScriptは、異なる型（数値や文字列）の値が `+` 演算子で一緒に使われたときに、自動的に型を変換します。この型変換の仕組みが、数値が文字列に変換される理由です。

### 具体例で説明

#### 例1: 数値と文字列が混ざった場合
“`javascript
var num1 = 1; // 数値
var num2 = “2”; // 文字列
var num3 = 3; // 数値
console.log(num1 + num2 + num3); // 出力: “123”
“`

1. **最初の演算（num1 + num2）**：

W3Cって何なの？

W3C（World Wide Web Consortium）は、インターネット上のウェブ技術の標準を作るためのグループです。

### W3Cの基本
– **設立者**: ティム・バーナーズ＝リー（ウェブを発明した人）
– **設立年**: 1994年
– **目的**: ウェブを誰でも使えるように、ルールや基準を作ること

### W3Cがやっていること
1. **標準を作る**:
– ウェブページの作り方（HTML）
– ウェブページのデザインの仕方（CSS）
– データの交換方法（XML）

2. **メンバー**:
– IT企業、大学、政府機関などが参加
– みんなで話し合って標準を決める

3. **標準作りの流れ**:
– **ワーキンググループ**: 専門家が集まって話し合う
– **ドラフト**: 最初の案を作る
– **パブリックコメント**: みんなから意見をもらう
– **勧告**: 最終決定として発表

### 具体例
– **HTML5**:
– 動画や音楽を簡単に埋め込めるように

【初心者向け】Reactでよく使うJavaScriptのメソッドや構文13選とReact Hooks(プチ紹介)

# はじめに
最近、ひょんなことから初学者向けのReactアプリをレベル別に10個くらい開発しながら、ハンズオンで学べる教材的なものを作成する機会があり、それを実施する前に最低限理解していたら学習がスムーズに進むだろうと思われるものをまとめました。

また、予習編としてReact専用で使用されるものも簡単に紹介します。

ちなみに、すでに「基本編くらいわかるわ！」って方は予習編はみなくていいので、以下の[リファレンスのチュートリアル](https://ja.react.dev/)をやっちゃってください。Udemyなんかでもいいと思いますのでどんどん手を動かすフェーズに入っていきましょう。

https://ja.react.dev/

# 基本編(JavaScript)
1. **`map`メソッド

特定の子要素のみにクリックイベントを割り当てたいときはe.stopPropagation();を使用する

# はじめに
React×TypeScriptでアプリを作成しています。
「特定の要素だけをクリックしたい！」と思うことがあり、初めて`e.stopPropagation();`を使用したので概要を軽くまとめます。
# e.stopPropagation();とは
**クリックイベントのパブリング（特定のイベントが親要素に伝播する現状）のを防ぐために使用されます。**
つまり、**特定のイベントを特定の要素のみに割り当てたい時に使用します。**
***
**イベントパブリングとは**

JavaScriptのDOMツリー内で発生したイベントが、**発生した要素から親要素に向かって順番に伝播していく現象**です。

仮に子要素のボタンをクリックした場合、クリックイベントは下記の順番で発生します。
“`jsx:jsx

Click me

“`
1.子要素（ボタン）
2.親要素（div）
3.（存在する場合）さらに上位の親要素へ

**1→2への伝播を防ぐ場合に`e.stopP

Markdownをオシャレに！独自構文で魅力的なドキュメント作成

## はじめに

わたしは普段VSCodeのMarkdownPreviewEnhancedという拡張機能を使ってマークダウンで文章を書いたりするのですが、さすかにちょっと味気ないな・・・と感じることがあります。

CSSで見出しを調節してみたりするものの、HTML+CSS全開で作られたブログなどと比べると当たり前ですが劣ります。

そこで、Markdown本来の文章を書くことに集中する。というテーマを見失わない（＝HTMLをゴリゴリ書かない）かつ、ある程度デザインされたものを生成する方法を考えてみました。

なお、今回実装した構文は以下の2つです。

“` markdown: ちょっとおしゃれなボックス
!!!box {タイトル:コンテンツ}
“`

“` markdown: いい感じのQA
!!!qa {質問:回答}
“`

こんな感じになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/9f32a3

FileMaker ProでMermaid記法を使う

## はじめに
皆もすなるWebビューアといふものを私もしてみむとてするなり。
FileMaker ProでMermaid記法を使ってみた。フローチャートを書いて、要素(ノード)をクリックするとFileMakerのスクリプトが動きます。

※要素(ノード)をクリックすると該当レコードに移動するスクリプトが動く

## Mermaid記法とは
Mermaid記法は、テキストでいろんな図がかけるというすごいやつです。フローチャート、ガントチャート、シーケンス図、ER図、色々できるみたい。
https://mermaid.js.org/

しかもめっちゃ簡単。要部はこんだけ
“`
graph LR;
JP–>US;
“`
これで以下の図が書ける。
![image.png](https://qiita-ima

firebaseを使って簡単なチャットシステムを作ってみた（windows os向け）

# 初めに
皆さんこんにちは。今回はfirebaseを使って簡単なチャットシステムを作っていきます。
# 今回使う外部API
今回はfirebase(Google)を使います。
# ファイル構成
今回のファイル構成は以下の通りです(今回は利用規約を省いています。)
“`
chatj
|–css
| |
| |–style.css
|
|–html
| |
| |–main.html
| |
| |–riyou.html(利用規約(多分なくてもok))
“`
# 必要なもの
今回必要なものは以下の通りです。
・Googleアカウント(firebaseのログイン用)
まだアカウントを持ってないよという方は、下のurlからGoogleアカウントを作成してください。（電話番号は必要ありません。（多分））
https://qiita.com/qqn5192/items/24edee88d572b8ba35cf
・node.js 18.0以降(firebase CLIに必要(バー

Proxmox VEログイン時のEnterprise Subscription通知の無効化方法

# 概要
Proxmox VEをサブスクリプション無しで利用すると、ログイン時に毎回「有効なサブスクリプションがありません」とポップアップが表示されます。


このメッセージを無効化する手順は以下の通りです。注意点として、この操作はProxmoxの公式サポートポリシーに反する場合があるため、使用する際は自己責任で行ってください。

### 手順
1. **SSHでProxmoxサーバーにログインする**
– SSHクライアント（例：PuTTY）を使用してProxmoxサーバーにログインします。
– サーバーのIPアドレスと管理者の認証情報を使用します。

2. **通知を無効化するスクリプトファイルを編集する**
– SSHでログイン後、次のコマンドを実行してエディタ（例：nano）を開きます。
“`sh

ユーザーが『アイドル』を歌うとサーバーが停止する

# 起きたこと

僕が運営している『[オンライン絵しりとり](https://eshiritori.net)』というサイトで起きた話となります。
これは訪れたユーザー同士で絵しりとりを楽しめるサービスです。

ある日、このサービスをホスティングしているConoHaVPSより、**規約に違反しているため利用を制限した**旨のメールが届きました。

> お客様のVPSにおきまして、弊社会員規約に反するコンテンツが
> 検出されましたので、ご利用サービスの制限をさせていただき
> ましたこと、ご連絡申しあげます。

そして、メールが届いたほぼ同時刻に**サーバーが停止され、サービスへアクセスできない状態に**なりました。

メールによると、**JASRACより著作権侵害に対する防止措置の申し出**があったとのことです。

指摘対象のコンテンツを確認したところ、**ユーザーがサイト内のチャットでYOASOBIの楽曲である『アイドル』の歌詞の一部を投稿**しておりました。

![Screenshot from 2024-05-21 16-27-54-edited.png](https://qii

[JavaScript] mapメソッドとは

# まとめ

#### `map`メソッドとは
> `map()` は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。オブジェクト指向プログラミングにおいて、プログラム上の手続きの対象を抽象化する概念である。
※[mdn web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

つまり、**配列の各要素に対して指定した関数を実行し、その結果を新しい配列として返すメソッドです。このメソッドは、元の配列を変更せず、新しい配列を返します。**

# 目次
– [基本構文](#基本構文)
– [`for`文と`map`メソッドの比較](#`for`文と`map`メソッドの比較)
– [`for`文](#`for`文)
– [`map`メソッド]()
– [比較結果](#比較結果)

# 基本構文
配列`numbers`の値を`num`としてコールバック関数`n

隠蔽(Shadowing)を理解する

JavaScriptに限らず、プログラミングを学習する上で定義を理解することは中々頭を抱えてしまう問題でもあります。（特に、初学者ではその傾向に陥る人は強いかもしれません。）

今回はJavaScriptの**隠蔽**について分かりやすく解説記事を書いてみました。

よろしければ、学習の参考に見るなり、この記事をベースに分からないワードについてまとめる手助けになれればなと思います。

## JavaScriptエンジンとは
JavaScriptエンジンは、ウェブブラウザの中でJavaScriptコードを読み取り、実行する部分です。このエンジンが、あなたが書いたコードを理解し、それに基づいてウェブページがどう動くかを決めます。

## スコープとは何か
スコープは、変数が存在し、アクセス可能な範囲です。プログラミングにおいて、どこで変数にアクセスできるかを決定します。

– **グローバルスコープ**：プログラム全体でアクセス可能な変数があります。どこからでも使える変数です。
– **ローカルスコープ**：特定の関数内だけでアクセスできる変数があります。その関数内でのみ使える変数です。

【Rails/JavaScript】非同期のフラッシュメッセージ表示

## はじめに
非同期処理に合わせて、Javascriptでフラッシュメッセージも非同期的に表示する実装についてまとめました。

## 実装内容
### フラッシュメッセージを表示する関数
jsの各メソッドについては、後述の[解説](#解説)にまとめています。
“`js
function displayFlashMessage(data) {
const div = document.createElement(‘div’);
div.className = ‘flash-message’;
div.textContent = data.message;

const flashContainer = document.querySelector(‘.flash-message-container’);
flashContainer.appendChild(div);
div.classList.add(data.message_type);

//js側でstyleを設定（画面の中央に固定で配置する）
flashC

JSF**kのカラクリ

# JSF**kとは
JSF**kとはJSFuckのことであり、Javascriptで以下の文字だけでプログラミングするJavascriptの縛りのようなものです。
“`js
![]+()
“`
# JSF**kの基本
## 数の生成
まず、空の配列をNOTするとtrueになります。
“`js
![] //falseになる
“`
そして、boolean同士を足すと数字になります。このときtrueは1、falseは0のようになります。
“`js
!![]+!![] //2になる
“`
あと、最初に+でもいけます。
“`js
+!![] //1になる
“`
## 文字の生成
文字列を生成するには、以下の性質が必要です。
“`js
true + [] //”true”になる
false + []//”false”になる
“`
そう、なんらかのオブジェクトに配列を足すと文字列になるのです。
## コードの実行
### コード実行のカラクリ
これである程度コードは作れますがこれでは何もできません。
が、なんとこのようにして文字列をJavascriptコードとして実行できます。

【JavaScript】ローマ字が複数入力できるタイピングゲームのライブラリと簡単な使用例【typing-jp】

## 前書き

タイピングゲームのライブラリを作ったのでタイピングゲームを作りたいと思う。

https://www.npmjs.com/package/@mogamoga1024/typing-jp

## 成果物

https://mogamoga1024.github.io/TypingGameQ/

## 雑な設計

・日本語のテキストとローマ字を表示する。
・入力に応じてローマ字の色を変える。
・複数のローマ字入力に対応する。
・ミス数、タイムを計測する。

## 作る

### ライブラリの読み込み

ありがたいことにCDNが使えるので使わせてもらう。

“`html

“`

### 問題

問題は適当にChatGPT君に考えてもらう。

JavaScript 〜JavaScriptの変数について〜

## JavaScriptの変数の型の一覧
“`JavaScript
var myVar; // 定義なし
var myVar = “Hello”; // 文字列
var myVar = 42; // 数値
var myVar = true; // boolean
var myVar = null; // null
var myVar = {}; // オブジェクト
var myVar = []; // オブジェクト（配列）
var myVar = function() {}; // 関数
var myVar = Symbol(); // symbol

“`
## Symbolについて
一意の値を表す。
以下のソースコードのように値が同じでもifではfalseの判定がされる。
“`JavaScript
let string1 = Symbol(‘文字列です’);
let string2 = Symbol(‘id’);
console.log(string1 === string2); // false

JavaScriptのserch()メソッド

パターンマッチングする方法で、簡単なメソッドはserch()メソッドです。検索する文字列(正規表現)を引数にしているすると、最初に見つけた文字列の先頭の文字位置を表す数値を返します。マッチする文字が見つからない場合は-1を返します。

“`javascript
“hello world”.search() // 0
“The quick brown fox jumps over the lazy dog”.search(“over”) // 26
“abcdefghijklmnopqrstuvwxyz”.search(“s”) // 18
“JavaScript”.search(/script/ui) // 4
“Puthon”.search(/script/ui) // -1
“`

#### 参考

https://www.oreilly.co.jp/books/9784873119700/

JavaScriptのsearchメソッドで文字列を検索する方法