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

マッチングアプリを作るときにTypeSCriptが重宝する理由

## TypeSCriptを使ってマッチングアプリを作る！

こんにちは！今回は、TypeScriptとFlaskを使ってマッチングアプリを作成する方法をご紹介します。このガイドでは、フロントエンドにTypeScript、バックエンドにFlaskを使用し、step by stepで開発プロセスを説明していきます。

## 1. プロジェクトのセットアップ

まず、プロジェクトの基本構造を作成しましょう。

“`
matching-app/
├── frontend/
│ ├── src/
│ ├── public/
│ ├── package.json
│ └── tsconfig.json
└── backend/
├── app.py
├── requirements.txt
└── venv/
“`

### フロントエンドのセットアップ

フロントエンドではReactとTypeScriptを使用します。

“`bash
npx create-react-app frontend –template typescript
cd f

【JavaScript】のincludesメソッドの使用方法

## includesメソッドとは

配列や文字列に特定の要素や文字列が含まれているかどうかを確認するために使用します。このメソッドは、要素が存在する場合にtrueを、存在しない場合にfalseを返します。

## 基本的な使い方

### 配列に対するincludesメソッド

“`javascript:javascript
const fruits = [‘apple’, ‘banana’, ‘cherry’];

console.log(fruits.includes(‘banana’)); // true
console.log(fruits.includes(‘grape’)); // false

“`

### 文字列に対するincludesメソッド

“`javascript:javascript
const sentence = ‘JavaScript includes method’;

console.log(sentence.includes(‘includes’)); // true
console.log(sentence.includes(‘met

JavaScriptのエクスポート形式について

## エクスポート形式の比較

### 1. `export function` (関数宣言)

– **形式**: 関数宣言をそのままエクスポートする。
– **特徴**:
– ホイスティングが効くため、宣言前に呼び出すことが可能。
– デフォルトエクスポートは不可。

“`jsx
// utils/math.js

export function add(a, b) {
return a + b;
}
“`

– **使用シーン**: シンプルな関数で、ホイスティングが必要な場合に適している。

### 2. `export const 変数名 = function` (関数式)Named export (import)

– **形式**: 変数に関数を代入してエクスポートする。
– **特徴**:
– 関数式であるため、ホイスティングされない。関数が定義される前に呼び出せない。
– 関数を匿名関数やラムダ式としてエクスポート可能。

“`jsx
// utils/math.js

export const add = function

PHP-JavaScript-Server-Sent-Events

# PHPとJavaScriptを使用したServer-Sent Events (SSE) 通信の実装方法

## 概要
Server-Sent Events (SSE) は、サーバーからクライアントへの一方向の通信を確立するための技術です。SSEを使用すると、サーバーからクライアントに対してリアルタイムでデータを送信できます。WebSocketとは異なり、SSEはHTTPプロトコルを使用し、ブラウザでのサポートが広範です。このガイドでは、PHPを使用してサーバー側を実装し、JavaScriptを使用してクライアント側でSSEを受信する方法を説明します。

## サーバー側（PHP）の実装

まず、PHPスクリプトを作成して、SSEストリームを生成します。以下は、サーバー側のPHPコード例です。

### `sse.php`

“`php

JavaScriptの即時関数（IIFE）について

# JavaScriptの即時関数（IIFE）について

## 概要
即時関数（IIFE）は、定義と同時に実行される関数のことです。主にJavaScriptのスコープを管理するために使用され、モジュールパターンやクロージャを利用する際に非常に便利です。

## IIFEの基本構文

IIFEは、関数を定義した直後に実行するための構文を持っています。基本的な構文は以下のようになります。

“`js
(function() {
// ここにコードを書く
})();
“`

### 例

以下は、簡単なIIFEの例です。

“`js
(function() {
var message = “Hello, IIFE!”;
console.log(message);
})();
“`

このコードは、”Hello, IIFE!” というメッセージをコンソールに表示します。関数が定義されるとすぐに実行されるため、`message`変数は関数のスコープ内でのみ有効です。

## IIFEのメリット

### 1. **スコープの管理**

IIFEを使用することで、変

[paiza]3Dプリンタ (paizaランク B 相当)

# ようやくBランクか。。。

https://paiza.jp/works/mondai/b_rank_skillcheck_archive/3d_printer

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!
なんなら今回から入力チェックすらめんどくさくなったので、正常系のデータしか勝たん。

“`javascript:3dPrinter.js
// [問題文（原文）]
// あなたは念願の3Dプリンタを購入しました。早速、いろいろな立体を出力して楽しみましょう！
// 3Dプリンタに入力される立体のデータは、大きさ 1×1×1 の立方体（セルという）を一つ以上組み合わせることで得られます。より正確に述べると次のようになります：
// 三次元空間で図１のような座標系 (x,y,z) を考えます。
// 立体データは、各座標 (x,y,z) でのセルが立体に含まれ

streamlitでクリップボードにコピーボタンを実装

# やりたいこと

streamlit上で、AI生成したテキストをクリップボードにコピーできるボタンを設置したい！
前回の記事でcomponents.htmlを使えばJavascriptを動かすことができることは学習済み！

https://qiita.com/aliceroot0678/items/6487eab357bef2c37eb7

クリップボードにコピーする処理だけ調べました。

# 実装：シンプルなテキストコピー

まずは、普通のテキストをコピーするボタンから作ってみるよ。

“`python:simple_copy.py
import streamlit as st
import streamlit.components.v1 as stc

# コピーするテキスト
copy_text = “これ、クリップボードにコピーされるよ！”

# HTMLテンプレート
html_content = f”””


技術選定しよう！ ~ ビルドツール編 ~

# 技術選定しよう！
技術選定は、重要で大変な作業ですよね。
適切な技術を選ぶためには、候補をしっかりとリストアップし、それらを比較し根拠を持って判断することが欠かせません。
そこでこの記事では、技術選定を行う際のポイントや役立つ情報について紹介しています。
それにより、担当システムに最適な選択肢を見つける手助けとなるでしょう。
ぜひこの記事を参考にして、より適切な技術選定ができるようにしてください！

# 今回選定する技術
今回選定するのは

「**ビルドツール**」　です！

webpack一択の時代は終わりを迎え、新たなツールが人気を集めています。

# 候補一覧
下記2つのツールをピックアップしました！
– [webpack](https://webpack.js.org/)
– [Vite](https://ja.vitejs.dev/)

# 背景
比較する前に、今回記事に取り上げようと思った背景を説明いたします。
本題までスキップしたい方は[こちら](https://qiita.com/q_halleluja

【Jest✕React】Jestを用いたテストの実行時、「supabaseUrl is required.」が表示される。

# はじめに
Jestを用いたReactアプリのテストを実行した際に直面したエラーに対する解決方法を紹介します。

# 問題
Jestを用いたテストコードを実行した際、「supabaseUrl is required.」というエラーが表示され、テストが通らない。
ぱっと見た感じ、環境変数を読み込めてないからなんだろうなと思いつつググってみたところやっぱりそうでした。

“`console:エラーログ
supabaseUrl is required.

1 | import { createClient } from ‘@supabase/supabase-js’
2 |
> 3 | const supabase = createClient(
| ^
4 | import.meta.env.VITE_SUPABASE_URL,
5 | import.meta.env.VITE_SUPABASE_ANON_KEY
6 |

【jQuery】【JavaScript】switch文のメリット※フォールスルーを活用

フォールスルーを活用方法を理解する必要がある

# コード 19行
“`javascript
switch (Number(lamp)) {
case 1: return;
case 6:
derby_king = “-“;
doguti_sp = “-“;
aiti_giant = “-“;
case 5:
tukemai_kosya = “-“;
koiten = “-“;
ipan_oni = “-“;
case 4:
kanto_gamashi = “-“;
teikai_hiroin = “-“;
default:
kakedasi = “-“;
atozaki = “-“;
saikyo_b2 = “-

[paiza]売れ残りにはなりたくねぇなぁ。。。

# 市場から売れ残らないように生きたい
実力社会って厳しい世の中。。。無能は淘汰されていくのね。。。

https://paiza.jp/works/mondai/c_rank_skillcheck_archive/leftover

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!
“`javascript:leftover.js
// [問題文（原文）]
// あなたはスーパーマーケットを経営しています。
// 今、ある生鮮食品を m[kg] 仕入れました。とても新鮮だったため、生のまま販売したところ、 m[kg] のうち p[%] を売ることができました。次にその売れ残りをすべてお惣菜にして販売したところ、売れ残った量のうち q[%] が売れました
// さて、m[kg] 仕入れたこの食品は最終的に何kg 売れ残ったでしょうか。ただし、生鮮食品をお総菜にする際は、

[paiza]みんな大好きFizzBuzz

# ループ・分岐を1度に学ぶならコレ
とりあえず新しい言語を始める時にHelloWorldの次ぐらいにやるのがFizzBuzz。
コレでループとifの書き方を理解してってやるのが下手な教科書で研修やるより1番いい気がする。

https://paiza.jp/works/mondai/c_rank_skillcheck_sample/fizz-buzz

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:fizzBuzz.js
// [問題文（原文）]
// 整数 N が入力として与えられます。
//
// 1からNまでの整数を1から順に表示してください。
//
// ただし、表示しようとしている数値が、
//
// ・3の倍数かつ5の倍数のときには、”Fizz Buzz”
// ・3の倍数のときには、”Fizz”
// ・5の倍数のと

[paiza]みかん農家に俺はなる！

# 命の水だ、ポンジュース（みかんみかんみかん
自分が中学ぐらいにメタルというジャンルを日本に広めた素晴らしいバンドだったと思う。

https://paiza.jp/works/mondai/c_rank_skillcheck_archive/mikan

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:mikan.js
// [問題文（原文）]
// あなたはみかん農園を営んでいます。
// 収穫の季節になると、あなたはみかんを収穫し、重さごとに仕分けなければいけません。
// 仕分け作業は非常に時間がかかる作業なので、あなたはみかんを重さごとに仕分けてくれるプログラムを書くことにしました。
// みかんはある定数 N の倍数のうち、正の整数の重さが書かれた箱に仕分けられます。
// 例えば N = 10 の時、10 g, 20 g,

背景が伸びる見出し

お疲れ様です。

投稿は2日ぶりですが、タイトルの内容の勉強をちまちまとしておりました。
そのまとめです。

“`diff_css
#about-main {
line-height: 70px;
background: linear-gradient(90deg, #ffe4c4, #ffe4c4 50%, #fff 50%, #fff);
background-size: 200% 100%;
padding: .1rem 1rem;
color: #ff8c00;
}
“`
“`diff_javascript
// 自己紹介のアニメ
const aboutMain = document.querySelector(‘#about-main’);

const keys = {
color: [‘transparent’, ‘#fff’],
backgroundPosition: [‘100% 0’, ‘0 0’],
};

const op = {
duration: 1000,
// アニメが変化する速度、タイミング（開始と終了を緩やか

ReactのuseEffectのダークサイド

ReactのuseEffectフックは、コンポーネントの副作用を管理するための強力なツールです。
だけど、このフックには見落としがちな落とし穴や注意が必要な側面が存在します。

この一見無害なReactコンポーネントを見てみましょう。
以下のコードには重大なエラーがあります。

“`react:React
import React, { useEffect, useState } from ‘react’;

function DarkSideOfUseEffect() {
const [count, setCount] = useState(0);
const [pressed, setPressed] = useState(false);

useEffect(() => {
console.log(‘Count is’, count);
setPressed(!pressed);
});

// …他のコンポーネントロジック…

return (

Count: {count}

Blueskyの埋め込みタイムライン出力サービスを作ってみた（BlueskyTimeline）

## Blueskyの埋め込みタイムライン機能が公式で提供されていない
X（旧Twitter）では埋め込みタイムラインウィジェットが提供されていますが、いつのタイミングからかログインしていない状態ではタイムラインが表示されない仕様になっており、公式サイトなどで日々のお知らせなどを告知する媒体としてはイマイチな状態になってしまいました。

Xと近しいサービスで移住先としてBlueskyがひそかに注目されていましたが、執筆時点でもまだまだ発展途上で整備されていない機能も多く、埋め込みタイムラインウィジェットの提供もない状況であったため、ないなら作るか、ということでAPIを通じてタイムラインを出力するサービスを用意してみることとしました。
## [BlueskyTimeline](https://bst.heion.net/jp/ “BlueskyTimeline”) はどんなサービス？
本サービスはBlueskyの非公式タイムラインウィジェットの出力サービスです。
以前にWordpress向けプラグイン[BlueskyTimeline for WordPress](https://www.

DOMとは何か？

# 仕様から考える
DOMの仕様は２つあり、メインは[WHATWG](https://html.spec.whatwg.org/)のものでサブとして[W3C](https://www.w3.org/TR/)の仕様があります。WHATWGの仕様では[1.8 HTML vs XML syntax](https://html.spec.whatwg.org/#html-vs-xhtml)に
> This specification defines an abstract language for describing documents and applications, and some APIs for interacting with in-memory representations of resources that use this language.
The in-memory representation is known as “DOM HTML”, or “the DOM” for short.

> (日本語)この仕様は、文書やアプリケーションを記述するための抽象言語と

【Github Actions✕Firebase】リモートマシン上でfirebase deployを実行時に警告が表示される。

# はじめに
Github Actions上でのFirebaseのデプロイ自体は成功するがリモートマシン上に警告が表示されたので対応しました。

# 問題
以下の警告がGithubのリモートマシン上に表示される。

“`console
⚠ Authenticating with `FIREBASE_TOKEN` is deprecated and will be removed in a future major version of `firebase-tools`.
Instead, use a service account key with `GOOGLE_APPLICATION_CREDENTIALS`:
“`
大まかに訳すと、「FIREBASE_TOKEN」を使った認証は非推奨だからやめてね、代わりに「GOOGLE_APPLICATION_CREDENTIALS」を使った認証の方法にしてね、という感じ。
警告発生時点でのymlの設定は以下の通り。

“`yaml:autoDeproy.yml（抜粋）
– name: Deploy to Firebase

【Supabase✕Firebase✕Github Actions】Github Actionsでのデプロイ時に「Error: supabaseUrl is required.」がブラウザのコンソールに表示

# はじめに
Github Actionsを用いてFirebaseにデプロイを行った際、デプロイ自体は成功するが、
いざアプリを開くと以下のエラーがブラウザ上のコンソールに表示される（画面は真っ白）。
“`console
Error: supabaseUrl is required.
“`

# 問題
ymlファイルの設定は以下の通り。
supabaseへの接続のための環境変数はymlに設定していたが、読み込めていない様子。
※secretsの変数については各々Github上に登録済。

“`yaml:autoDeploy.yml（中略）
– name: Run build
run: bun run build
env:
VITE_SUPABASE_URL: ${{secrets.SUPABASE_URL}}
VITE_SUPABASE_ANON_KEY: ${{secrets.SUPABASE_ANON_KEY}}
“`

autoDeploy.yml（全

JavaScript: カレンダーアプリで今月に記述されている「先月の最終週」と「翌月の最初の週」を取得する方法

## 読んで欲しい人

– カレンダーアプリで下記の部分を取得する方法がわからん人
– 1.先月から今月に、はみ出てきてる奴ら：28, 29, 30, 31
– 2.翌月から今月に、はみ出てきてる奴ら：1, 2, 3, 4, 5, 6, 7

– dotインストールの問題を自力で解こうと頑張ってた過去の俺

## ソースコード

### 1.先月から今月に、はみ出てきてる奴ら：28, 29, 30, 31

“`javascript
const getCalendarHead = () => {

const dates = []
const d = new Date(‘現在の年’, ‘現在の月’, 0).getDate()
const n = new Date(currentYear, current