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

＜3：変数と宣言＞Progate学習修了者がJavaScriptPrimerを読んだら

# はじめに：
こんにちは。Satoです。
本稿では、Progate学習を修了した段階のプログラミング学習者が、JavaScriptPrimer（以下、Primerとします）を学習するとどうなるのかを記録したものです。基本的には自身のアウトプットを主眼に置いていますが、初学者が躓いた点とその解決方法も記載するつもりです。良かったら参考にしてみてください。
# 学習事項：
## 変数と宣言に関する概要
* 変数：文字列・数値等のデータに名前をつけることで、繰り返し利用可能にする機能
* 変数の宣言：JavaScriptの場合、const, let, varで宣言する
→varはバグを発生させやすいので、constやletを使った方が良い。
## [ES2015]const
constとは、再代入できない変数を宣言するキーワードのこと。
Cf：再代入の一例として、下記constの変数を”Kyoto”から”Tokyo”にすることが挙げられる。なお、constでこれをやるとエラーが発生してしまう。
~~~
// const 変数名 = 初期値;
const japanCapital = “Ky

BashでNo such file or directoryというエラーが出る

## GitBashで㏅移動した際にエラーが発生する事象について
やりたいこと
* GitHubにコミットをしたく、作成したアプリのディレクトリに移動したい
## 以下は自分のユーザ名に置き換えてください
* username
# 発生したエラー
“`:GitBash
bash:cd:C:usernameOneDriveドキュメントTodoApp:No such file or directory
“`
# エラーが発生したときのコマンド
“`:GitBash
cd C:\Users\username\OneDrive\ドキュメント\TodoApp
“`
* 原因：\が特殊な文字や機能として扱われていた
（エスケープシーケンス）
# 解決法
“`:GitBash
cd “C:\Users\username\OneDrive\ドキュメント\TodoApp”
“`
“`:GitBash
cd cd C:\\Users\\username\\OneDrive\\ドキュメント\\TodoApp
“`
# さいごに
GitBashでディレクトリを移動するときにはパス

コピペで喋れ！ずんだもん！！

## はじめに
ずんだもんって知ってます？

最近Youtubeよく見かける枝豆の妖精(?)らしいんですが、こいつを自由に喋らせたらちょっと楽しくないですか？

入力した文章をずんだもんに喋らせることが出来たら理由あって声を出せない方、喋るのがめんどい方等がはっぴーはっぴーになるんじゃないかと思い記事を書くことにしました。

この記事では全てコピペで実装することができますので、初学者の方はこの記事で紹介するコードベースにどんどん拡張してみて遊んでください！

(※この記事では**1ファイル**しか触りません)

## 開発環境構築
本アプリはReactで実装します。
ターミナルとエディタを起動して次の手順を実行しましょう。

1. 以下コマンドをコピペしてターミナルにペーストします。
“`
npx create-react-app speak-zundamon –template typescript
“`
上記コマンドを実行するとReactプロジェクトが作成されます。
`speak-zundamon`の箇所はアプリの名前になりますので、よ

Web push 通知？サイトに実装？…うぇ～い（汗

# § 初めに
この記事は、以下の内容でお話が進む（かも）というようになっています：

– Web push 通知？なにそれ美味しいの？
– Push.js？なにそれ美味しいの？
– HTTP？HTTPS？なにそれ美味しいの？

※すみません。昨日のお昼から食べてないので…

# § Main.article
この記事では、web サイトに通知機能はどのようにして実装できるのか、そして、実装する際の注意点などについて、記載させていただきます。

少しでもなにかしらの参考になりましたら幸いです
（※幸いすぎです。えへ）

## Web push 通知？なにそれ美味しいの？
Web push 通知とは何か！
ざっくり解説するに、**通知を許可したユーザーにWEBブラウザ経由でプッシュ通知をする**ことです。

ブラウザ経由で行われるため、ユーザーは特定のアプリをインストールする必要がなく、サイトを訪れた際にポップアップされるメニューなどで通知を許可するだけで受信できるようになります。

WEBプッシュ通知は任意のタイミングで行えます。
サイトに訪れてから一定期間経過後に通知する、定期的

【 JavaScript / TypeScript 】requireとimportの使い分

## はじめに
JavaScriptやTypeScriptでモジュールをインポートする際に、**requireとimport**のどちらを使うべきか迷ったことはありませんか？

この記事では、それぞれの違いや使い分けについて詳しく説明します。

## requireとimportの違い

### require
:::note info
**使用方法**
const module = require(‘module-name’);
:::

:::note info
**環境**
CommonJSモジュールシステムを使用しているNode.js環境で使用されます。
:::

:::note info
**動作**
モジュールを同期的に読み込みます。実行時にモジュールをインポートします。
:::

:::note info
**ファイルの種類**
通常、.jsファイルを読み込みますが、TypeScript（.ts）ファイルもコンパイル後の.jsファイルとして読み込むことができます。
:::

### import

:::note info
**使用方法**
import module f

個人利用のためのインターネット速度テストツールの紹介

皆さん、こんにちは！今日は、私が個人利用のために開発したインターネット速度テストツールを紹介したいと思います。このツールは、ユーザーのインターネット接続速度を簡単にテストできるように設計されています。また、リンクを皆さんと共有します。以下に、コードとその動作について詳しく説明します。

[SpeedTest] (https://speedtest.tehito.com)


### コードの説明

“`speedtest.js“`

“`
// speedtest.js

var worker = new Worker(‘speedtest_worker.js’);
worker.onmessage = function (event) {
if (event.data.type === ‘result’) {

`Set` と `string[]` の違いについて

## はじめに
JavaScriptやTypeScriptでデータを管理する際に、`Set` と `string[]` という二つの選択肢があります。それぞれの違いと使用方法について詳しく解説します。

## `Set`

### 特徴

– **重複を許さない**: `Set`は重複する値を持つことができません。同じ値が追加されると、元の値がそのまま保持され、新しい値は追加されません。
– **順序が保証されない**: `Set`は要素の挿入順序を保証しません。
– **メソッド**: `Set`は`add`, `delete`, `has`, `clear`などのメソッドを持ちます。

### 使用例

重複する可能性があるデータを一意に保ちたい場合に便利です。

“`typescript
const userUids = new Set();

// 値を追加
userUids.add(‘uid1’);
userUids.add(‘uid2’);
userUids.add(‘uid1’); // 重複は無視される

// 値の存在

javascript new Date(‘2000-05-25’)は日本時間の朝9時

# 1. はじめに
知っておかないと怖いなぁと思ったことを記事にしました。

# 2. Javascript の new Date()
テーブルやローカルストレージに日付のデータを格納するとき、文字列で`2000/05/25`や`2000-05-25`で格納したりするときがありますよね。

このデータをDate型で扱いたいとき
“`
dateString = db.getDate();
date = new Date(dataString);
“`
ってしてませんか？コレ実は怖いんです。

# 3. 実行結果
まずは`2000/05/25`を確認しましょう。
“`
date = new Date(`2000/05/25`);
console.log(‘date=’ + date.toLocalString());
“`
きっと
“`
date=2000/5/25 0:00:00
“`
と出力されるでしょう。想定どおりですよね？

次に、`2000-05-25`を確認しましょう。
“`
date = new Date(`2000-05-25`);
c

1 << 31と2 ** 31は同じ値ですか?いいえ違います。JavaScriptではね

# TL;DR;
JavaScriptにおいて乗算のかわりにbit shiftをつかってもは同じにならないことがある
これはJavaScriptの数値が64bit doubleであることに起因している
計算するときにbit shiftのことを理解していないのであれば、これを使用してはいけない

# bit shiftとか計算とかのおさらい
計算機では内部的には電気信号を操作して、数値や計算を実装しています
回路の話とかCPUだとかの話とかはおいておいて内部的に2進数で処理しています
これを操作するためにbit shiftという演算があります
“`
0b00000001 << 1 2 (0b00000010) 0b00000001 << 2 4 (0b00000100) ``` となります # bit shiftではどこまで保証されているのか、答は31bit bit shiftはだいたい2の指数計算と一緒です ただしそれは桁が保証されている範囲となります 計算の結果は以下のとおりとなります ``` 2 ** 0 -> 1
2 ** 1 -> 2
2 ** 2 -> 4
2 ** 3

JavaScriptの便利な記法や関数の紹介およびそれらの注意点について

# はじめに

JavaScript初学者を抜けたあたりの方にむけて、便利な記法や関数、その注意点について紹介します。
初歩的な文法やデータ型などの知識は前提として解説を省きます。
JavaScriptの巨大なテーマとしては非同期処理などもあるのですが、巨大すぎるために本稿では割愛させていただきます。

## let/constの使い分けについて

変数は不変な`const`および可変な`let`を利用することができます。原則的には`const`を使い、再代入が必要な個所のみ`let`を使うのが標準的です。
`let`を利用している時点で **「処理のどこかで再代入される」** と処理内容の推論を働かせてコードを読む人が多いと思います。このようなコードの読み方をするという前提を踏まえてコードの可読性を高めるうえでも、再代入されるかされないかを意識して`const`/`let`を使い分けることが重要です。

“`js
const name = “John Doe”;
const age = 25;
“`

“`js
let name = “Jane Doe”;
let ag

【JavaScriptメイン】ラジオボタンを使用したクイズ【ランダム表示】

１つ前の記事でクイズを作成したことを書いたのですが
ありがたいことにコメントでいただき、学習してみました。

## コード紹介

データをJS側に持たせ、配列を駆使して問題や選択肢をランダムに表示できるようになっている。

“`html