JavaScript関連のことを調べてみた2023年08月04日

GoogleColaboratoryはjavascript、htmlも使用できる

# 結論
セルマジックを使うことでjavascript、htmlが使用できます

# セルマジックとは
下記の記事が参考になります。

https://qiita.com/mgsk_2/items/437656b8ce42c03e41a6

https://qiita.com/kazoo04/items/a0bd374199a7783ca0e

# サンプルコード
### javascript
“`.js
%%javascript
const div = document.createElement(‘div’);
div.textContent =’Hello world!’;
document.body.appendChild(div);
“`
—–
### html
“`.html
%%html

hello worl

ループ処理を野球部に説明してみた

おはようございます！
今日はループ処理を野球部に説明してみた、というテーマの記事です。
この記事を読むことで、ループ処理の基本的な使い方と、それがプログラム内でどのように機能するのかを理解できるようになることを目指します。

### ループ処理とは
ループ処理とは、同じ処理を繰り返し行うことを指します。同じ処理のコードを何度も書かなくて良くなるというメリットがあります。
例えば、PP10本という練習メニューをループ処理有りと無しに分けて書いてみるとこんな感じです。

#### ループなし
“`
ダッシュする // 1本目
ダッシュする // 2本目
ダッシュする // 3本目
ダッシュする // 4本目
ダッシュする // 5本目
ダッシュする // 6本目
ダッシュする // 7本目
ダッシュする // 8本目
ダッシュする // 9本目
ダッシュする // 10本目
“`

#### ループあり
“`
for (let i = 1; i <= 10; i++) { ダッシュする； } ``` すごくスッキリしましたね！ 他にも、野球は表と裏の攻撃

:%s/帰ってきたニート/ぼんポぽ！WWW/g

### はじめに
前回の記事でQiita->noteの宣言をしましたが、戻ってきてしまいました。

https://qiita.com/HenNayume2023/items/68af372b68f97f84ba2d

noteで投稿してみたものの、評価はつくんですが、「記事を良いと思って」の評価なのか
「僕のアカウント見てね！おねがいね！ね！」の評価なのか分らないです・・・。
難しいですね・・・。

また、ギークな私はやっぱりQiitaの方が居心地が良いです。
なので、すみませんが両方のプラットフォームで投稿させてください。
不快に思う方いたら、すみません・・・!

### 掲題の件につきまして
掲題の件ですが、昨日からChatGPTに教えてもらいつつChromeの拡張機能をいじってます。
目標は、Webサイト上の文字を**ヌードル亭麵吉に変換する機能**の作成です。
とりあえず、表示された文字を全部ぼ|んポ|ぽ！|ｗｗｗに変換するところまできました。

・処理前
![before.jpg](https://qiita-image-store.s3.ap-northeast-1.a

【Vite+TypeScript+React】環境変数の活用方法とそのトラブルシューティング

## 目次

1. はじめに
2. Viteにおける環境変数の設定方法
3. ローカルと本番環境で異なる環境変数を設定する方法
4. 「プロパティ ‘env’ は型 ‘ImportMeta’ に存在しません」の解決方法
5. まとめ

## 1. はじめに

皆さん、こんにちは！今回は、Vite + TypeScript + Reactの環境で、環境変数を活用する方法とその際に遭遇する可能性のある問題の解決方法について解説します。

## 2. Viteにおける環境変数の設定方法

まずは、Viteで環境変数を設定する基本的な手順を見ていきましょう。

1. プロジェクトのルートディレクトリに`.env`ファイルを作成します。
2. `.env`ファイルに環境変数を設定します。例えば、次のように設定します：

“`bash
VITE_APP_TITLE=My App
“`

3. TypeScriptとReactのコード内で`import.meta.env.VITE_APP_TITLE`を使用して環境変数にアクセスします：

“`typescript
console.log(

アコーディオンテキストの作り方（jQuery利用）

# アコーディオンテキストの作り方

お世話になっております。コウヤです。
今回はアコーディオンテキストについて作成方法を確認していきたいと思います。

アコーディオンテキストとは以下のようなものです。


上記の質問箇所をクリックすると、以下のように回答が出てくるものです。これの効能として、縦にページが長くならないように、必要なときのみ表示させるといったことができます。


## アコーディオンテキストのHTML/CSS部分を記載する

今回のフォルダ構成は以下のとおりです。
![image.png](h

React Developer ToolsのProfilerの使い方【初心者向け】

React Developer Toolsは、Reactアプリケーションのパフォーマンスを最適化するための強力なツールです。その中でも、「Profiler」タブは特に有用で、Reactのコンポーネントがどのようにレンダリングされ、どの程度の時間を要しているかを詳細に分析することができます。ここでは、その使い方を初心者向けに解説します。


## 1. React Developer Toolsのインストール

まずはじめに、React Developer Toolsをインストールする必要があります。Google ChromeまたはFirefoxのブラウザに対する拡張機能として提供されています。

## 2. Profilerタブを開く

React Developer Toolsを開き、「Pr

TypeScriptでnpmパッケージ（CommonJS・ES Moduleの両方に対応）を開発して公開してみた

## はじめに

普段から多くのOSSライブラリたちを利用させてもらっているが、そういったライブラリを自分でも作ってみたくなった。今回はあまり複雑ではないかなりシンプルなライブラリをTypeScriptで開発し、それを公開し利用するまでをやってみたいと思う。

開発するライブラリの機能としては、[Express](https://expressjs.com/)のmiddlewareになる。

## ライブラリを実装する

Expressのmiddlewareとして利用できるライブラリで、機能としてはAuthorizationヘッダーのBearerトークンを`req.token`から利用できるようにするもの。[cookie-parser](https://github.com/expressjs/cookie-parser/tree/master)や[body-parser](https://github.com/expressjs/body-parser/tree/master)のように、`req.○○○`のプロパティアクセスができるようにするもの。

今回はかなり単純に以下のような実

自作ライブラリを jsDelivr から取得

専用のファイル置き場がない状況で、既存のサービスなどで使うために自作の JavaScript ライブラリをどこかに置きたいことがあります。そういうときは GitHub と jsDelivr の組み合わせが便利です。

# jsDelivr

大量にアクセスされるファイルをキャッシュして高速に配信する仕組みを CDN (Contents Delivery Network) と呼びます。

jsDelivr は CDN の 1 つです。

https://www.jsdelivr.com/

# GitHub 連携方法

jsDelivr に登録手続きを行わなくても、GitHub に公開リポジトリがあれば jsDelivr から配信できます。

:::note info
自作のライブラリや、CDN への登録情報が見当たらない既存のライブラリを利用するのに便利です。
:::

トップページにある GitHub のタブをクリックすれば利用方法が表示されます。それを引用して解説を加えます。

“`
// load any GitHub release, commit, or branch
//

VS Codeでの赤線 “Type ‘number’ is not assignable to type ‘string’.js(2322)” への対応方法

## はじめに

VS CodeでSveltのチュートリアルをやっていた時に、propsの実装の際に以下のような赤線（VS Codeからのエラー提示）が出た。

今回はこれの原因と解決方法を備忘録として残す。

## 原因

`jsconfig.json`の以下の設定が`true`になっていたことが原因。
“`json:jsconfig.json
{
“compilerOptions”: {
…
/**
* Typecheck JS in `.svelte` and `.js` files by default.
* Disable this if you’d like to use dynamic types.
*/
“checkJs”: true
},
…
}
“`

意味についてはコメ

DOM

# DOMとは
Document Object Model（ドキュメントオブジェクトモデル）の略で、HTMLやXMLの文書を扱うためのAPIです。
DOMではHTMLやXMLのデータ内の要素をオブジェクトとして扱い、オブジェクトが階層的に組み合わされたものとして識別します。

# ノード
DOMでは識別されたオブジェクトのことをノードと呼びます。
ノードにはいくつか種類があり、それぞれが役割を担っています。

|ノードの種類 |概要
|—|–
|ドキュメントノード |HTML文書全体
|要素ノード |HTMLタグ
|テキストノード |HTMLタグ以外のテキスト
|属性ノード |HTMLタグの属性（classやidなど）
|コメントノード |コメントアウトされたテキスト

これらのノードが階層的に組み合わさり、木構造を形成したものをDOMツリーと呼びます。

# 階層構造
DOMではノードが組み合わさることで階層構造を形成します。
以下のようなコードがあったとします。
“`html

CDKでNode.jsのLambda関数を作るときにjs|ts以外のファイルをバンドルする

# TL;DR

`bundling.commandHooks.beforeBundling`
を定義して、その中で`cp`でコピーしてあげればOK！

“`ts
new NodejsFunction(this, ‘lambda’, {
runtime: Runtime.NODEJS_18_X,
architecture: Architecture.ARM_64,
functionName: ‘my-nodejs-function’,
handler: ‘handler’,
entry: ‘lambda/index.ts’,
bundling: {
commandHooks: {
beforeBundling(inputDir: string, outputDir: string): string[] {
return [`cp ${inputDir}/lambda/hoge.txt ${outputDir}`];
},
afterBundling(): string[] {
retu

【React】フルスタックエンジニアになるまでの我流ロードマップ

## まえがき
趣味程度のWebコーディングしかしてこなかった自分。
調子に乗ってパソコンにFull-stack Developerのステッカーを貼ってしまったので、将来的な投資としてとりあえず目指してみようと思う。今回はバックエンドを中心に、フロントエンドは最新のものを学び直したい。

兎にも角にも計画を立ててからでないと始まらない自分なので、我流のロードマップを作ってみた。異論は大いに認めるし、何なら受け入れたい。自分用の備忘録としてまとめているけど、参考リンクなども含めて誰かの役に立ったら嬉しいな。

:::note info
**前提**
– 期間：のんびりと進めたい
– 目標：Webをベースとしたアプリ／サイト開発
– 環境：Windows 11 Home (WSL, Ubuntu 22.04)
– 経験値
1\. HTML/CSSは一通り学んでいる
2\. Web最適化の知識（SEOなど）は4年前で止まっている
3\. あくまで趣味なので、収益化は考えず初期投資は最低限に
（将来的に副業にできればいいな）
4\. Gatsby.js+Github Page/Netlifyを

breakとreturnとcontinueの違いがよく分からんのでまとめてみたよ～！

どうも、堕罪ｵｻﾑです。
相変わらず(？)**国語学・日本語学**を専攻しています。
夏季休暇前ラストのレポートが終わらず発狂しそうになっています。ヤバめ。
早く終わらせねば……。

まあ、そんなこんなで本題に入ります。

# return？break？continue？

この記事を書こうと思ったきっかけはfor文の中でif文を書いているときのこと――。

「んー。ここって**return**なのかな？それとも**break？**」
「いや待てよ、**continue**ってのもあるよな？」
「**そもそもreturn、continue、break ってどうやって使い分けるんだろう？**」

結局そのとき書いていたものは全部使わないで動かせたのですが(オイ)、なぜ必要ではなかったのかも理解できるようになりたいなという目標のもと、記事を進めていこうと思います。

## 1．return文について

returnについて調べてみると

**関数内で「処理をした結果」をその関数の呼び出し元に「戻り値」として値を返すことができる命令文**です。

もう少し付け加えるなら、**命令された地点で

ReactとJavaScript: Reactと他のJavaScriptフレームワークの比較

React JavaScriptの利点と他のJavaScriptフレームワークとの優位性を探ってみましょう。以下の記事では、Reactを他のフレームワークと比較し、それぞれの技術の利点やメリットを理解することができます。信頼性と効率性を持つウェブアプリケーションを構築するための最適な選択肢を見つけるために、ぜひ読み進めてください。

Reactと他のJavaScriptフレームワークの比較
Cre: twire

1. React JavaScript – Facebookの強力なJavaScriptライブラリ

Reactは、ウェブ開発の分野でトップの技術の1つとなっています。Facebookによって開発され、Reactは高いパフォーマンスとコンポーネントの再利用性により人気を博しています。Virt

youtube字幕入力をサポートするプラグインを作成しました。

# はじめに
youtubeの字幕入力エディターを使ってみて、わかったことは、字幕の作成は、結構、大変な作業だということです。テレビや、映画の字幕を製作している現場はかなり、大変な重労働なのかなと、思ったりしました。
youtubeでは、音声を字幕に落としている動画もありますが、これだと、自動変換ツールで苦労なく作成できるかと思いますが、ここでは、すでにある動画に字幕をいれることを想定しています。
## 字幕入力ポップ画面
この「ポップ画面」は、youtubeプレーヤーの再生、一時停止ボタンをクリックすると
表示されます。

# youtubeの字幕ツールを使ってみて
まず、最初に気づいたことは、時刻の設定です。これが意外に面倒で、字幕が多い場合は、滅入ってしまいます。スタートとエンドの設定を間違えるとエラーになります。
字幕メッセージの入力に関しては特に、気になりませんでした。
動画を再生しながら、一時停止して字幕を入力する作業が大変です。
これらの大変さを少しでも

【PDF印刷】html2canvasとjsPDFでの複数ページ印刷時にautoTableを導入した話

# はじめに

「印刷」ボタンクリックでテーブルをPDF出力する機能を作ることになりました。
今回導入したautoTableに関する日本語のドキュメントが少なかったこともあり、
結構な時間試行錯誤したので、記録しておきます。

# 本題
## html2canvasとjsPDFだけでは複数ページに渡るテーブルの印刷はうまくいかなかった

このテーブル、ユーザ入力により行数が変動するので少ない時は
印刷時に１ページに収まってくれるのですが、多い時は2ページ以上になります。
この時、これらのライブラリだけだとどう頑張っても表示崩れが起きてしまいました。
表示崩れの調整で各種ドキュメントやstackoverflowなどを眺め、
試行錯誤していたら丸1日経過していました。
その上うまくいきませんでした。

## 試行錯誤の結果：autoTable導入
調査する中で知った[autoTable](https://github.com/simonbengtsson/jsPDF-AutoTable)という、テーブル描画に特化した
jsPDFのプラグインを導入してみることにしました。
すると少ないコード

Next.jsでURL遷移を検知して特定の関数を発火させる方法

こんにちは、皆さん。今日はNext.jsでURLが変更されたときに特定の関数を発火させる方法について話します。これは、ページ遷移だけでなく、ブラウザバックの際にも発火します。

## 目次
1. [はじめに](#はじめに)
2. [Next.jsとは](#Next.jsとは)
3. [URL遷移の検知とは](#URL遷移の検知とは)
4. [URL遷移の検知方法](#URL遷移の検知方法)
5. [URLの変更判定について](#URLの変更判定について)
6. [まとめ](#まとめ)

## はじめに
Next.jsはReactのフレームワークで、サーバーサイドレンダリングや静的サイト生成など、多くの機能を提供しています。本記事では、Next.jsの`useRouter`フックとReactの`useEffect`フックを組み合わせることで、URLの遷移を検知し、特定の関数を発火させる方法を解説します。

## Next.jsとは
Next.jsは、ReactベースのJavaScriptフレームワークで、サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)など、React

プログラミング初心者の野球部にif文を教えてみた

おはようございます！
今日は昨日書き切れなかったif文の概念についての記事を書いていきます。

https://qiita.com/yangyooji1946/items/a920bc02a8d93c46a845

今日はバントをするときの場面を想像しながら、if文がどのように動作するのかを説明します。
その後「バカ話ジェネレーター」内で実際に使われているコードを使って、if文がどのようにプログラム内で機能するのかを示します。

この記事を読むことで、if文の基本的な使い方と、それがプログラム内でどのように機能するのかを理解できるようになることを目指します！

### プレー中の判断はif文の連続
今回は、打席でバントをする際の判断をif文で表現してみましょう。

まず、バントをするかどうかを判断するときに大切なことは2つあります。
1つは投球がストライクなのかボールなのか、もう1つは、相手の守備陣がシフトを引いているかどうか
です。

これら2つの要素によって、バントをするかしないかを決めています。

例えば、投球がボールだったらバットを引きますし、相手がシフトを引いてきたらバスター

NPMコマンド実践ガイド：パッケージを熟知し、プロジェクトを最新に保つ

## 目次

1. [はじめに](#はじめに)
2. [npm docsコマンド](#npm-docsコマンド)
3. [npm repoコマンド](#npm-repoコマンド)
4. [npm outdatedコマンド](#npm-outdatedコマンド)
5. [npm vコマンド](#npm-vコマンド)
6. [まとめ](#まとめ)

—


## 1. はじめに

Node.jsの開発者にとって、npmは欠かせないツールです。しかし、npmにはたくさんのコマンドがあり、それぞれのコマンドの機能を完全に把握している人は少ないかもしれません。この記事では、いくつかのnpmコマンドについて解説し、それぞれのコマンドが開発者の生産性をどのように向上させるかを明らかにします。

—

## 2. npm docsコマンド

npm

「npm audit」でJavaScriptプロジェクトのセキュリティをチェックしよう！

## 目次

1. [はじめに](#はじめに)
2. [npm auditとは](#npm-auditとは)
3. [npm auditの使い方](#npm-auditの使い方)
4. [npm auditの詳細](#npm-auditの詳細)
5. [npm auditで脆弱性を修正する](#npm-auditで脆弱性を修正する)
6. [まとめ](#まとめ)


## はじめに

こんにちは、皆さん。今日はJavaScriptプロジェクトのセキュリティチェックについて解説します。JavaScriptのプロジェクトを管理するために、Node Package Manager（npm）を使っている人は多いと思います。npmには便利なセキュリティチェック機能があります。それが「npm audit」です。

## npm auditとは

「npm