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

export {};でファイルをモジュールとして扱わせる

## 先に結論
TypeScript では`export`か`import`が使用されている場合にモジュールとなり、そうでない場合にはスクリプトとして扱われます。

スクリプトではトップレベルで宣言された変数や型のスコープがグローバルなものとなるため、別のスクリプトファイルであっても同名の変数や型を宣言できません。

モジュールではスコープがファイル内に閉じるため、別のファイルであれば同名の変数や型を宣言可能です。

## スクリプトとモジュール
TypeScript（JavaScript）のファイルはスクリプトとモジュールに分類され、スコープや記法がそれぞれ少し異なります。

別のファイルでそれぞれ同名の変数や型を宣言すると、モジュールではエラーとならないが、スクリプトではエラーとなってしまう、といったことも起こります。

### スコープの違い
モジュールの場合には、変数のスコープはそのファイルの中に閉じており、外部ファイルから使用できるようにするには`import`・`export`文が必要になります。
モジュールのファイルであれば、それぞれのファイルで同じ名前の変数や型を定義し

JS 時間のフォーマットを整形する

JS のフォーマットを整形する

現在の時刻を取得する
“`js
// 時間のObject
var date = new Date();
// 年を取得する
var year = date.getFullYear();
// 月を取得する（JavaScriptの世界に月は0から換算されるので　＋1が必要）
var month = date.getMonth() + 1;
// 日を取得する
var day = date.getDate();

// 時を取得する
var hour = date.getHours();
// 分を取得する
var minute = date.getMinutes();
// 秒を取得する
var second = date.getSeconds();
// ミリ秒を取得する
var millisecond = date.getMilliseconds();

“`

ここまで、時間を取得するコードをまとめました。
これだけで、フォーマットを整形するができないので、メソッドを用意してもよいでしょう

“`js
function formatDate(

jsにおけるオブジェクトの受け取り方

jsではオブジェクトを受け取って、受け取ったオブジェクトのキーでアクセスできます。
なので下記のように、複数のプロパティを持ったオブジェクトを渡せます。
“`js
const hoge = (obj) => {
console.log(obj.a) // 1
console.log(obj.b) // 2
}

hoge({a:1,b:2})
“`

jsではキーワード引数の概念はないですが、上記のようにすることで、キーワード付きで渡すかのごとく、引数を設定できます。

Options Objectパターンというデザインパターンなんですね
https://typescriptbook.jp/reference/functions/keyword-arguments-and-options-object-pattern

“`js
// オブジェクトひとつだけを引数に持つ関数
function func(options) {
console.log(options.x, options.y, options.z);
}
 
func({ x: 1, y: 2, z: 3

【React 19】useOptimistic で楽観的に値を更新

# はじめに
この記事では、React 19 で新たに追加された `useOptimistic` という hook による楽観的更新処理について、`useOptimistic` を利用するケース、利用しないケースを比較することで、理解を深めていきます。

https://react.dev/reference/react/useOptimistic

# 開発環境
開発環境は以下の通りです。

– Windows11
– VSCode
– JavaScript
– React 19.0.0-rc-df5f2736-20240712
– Vite 5.2.0
– Node.js 20.14.0
– npm 10.8.1

# サンプルアプリの概要

– 動作
– Like ボタンをクリックしたらカウントアップする


– 内部処理

Dropbox APIを使ってファイル共有

Dropbox APIを使って、Dropboxにファイルをアップロードし、他の人とファイルを共有します。Dropboxを一時的な格納庫として利用します。
Dropbox APIで以下のことを実現します。

* ファイルをアップロードして、自身の複数の端末から共有できます。
* アップロードしたファイルを共有して、複数の人がダウンロードできます。
* 他の人からファイルのアップロードを受領します。

もろもろのソースコードはGithubに上げてあります。

https://github.com/poruruba/ClippingService

構成要素
* プライベートサーバ ： ブラウザで動作するクライアントとDropboxを仲介するためのサーバです。クライアント向けのWebページの提供とWebAPIの処理を担っています。また、DropboxからのWebhook呼び出しも受け取ります。
* Dropboxサーバ ： 共有するファイルを管理してもらうサーバです。
* 管理クライアント（ブラウザ）： 共有するファイルを管理するためのクライアントです。PWAです。
* 一般クライアント（ブ

Arrow function っていつ使う？

## 結論

メソッド内でコールバック関数を書くときは、Arrow function を使うと便利です。

## 理由

Arrow function の `this` は、暗黙的な引数として `this` を受け取らず、関数が定義されたスコープの `this` を参照します。
この特性により、Arrow function を使うと単純に `this` を使うことができます。

例えば、次のコードを見てください：

“`javascript
class Timer {
constructor() {
this.seconds = 0;
}

start() {
setInterval(function () {
this.seconds++;
console.log(this.seconds);
}, 1000);
}
}

const timer = new Timer();
timer.start(); // ここでの this は Timer インスタンスを指していないため、エラーになります。
“`

上記の例で

CodepenでJavaScriptプログラミング：環境構築不要でライフゲームを作る

## はじめに

JavaScriptでプログラミングを始めようと思ったとき、環境構築の壁に直面することがあります。
しかし、**Codepen**を使えば、そんな悩みとはおさらばです！
今回は、Codepenの魅力と、その活用例としてライフゲームの実装を紹介します。

## Codepenとは？

[Codepen](https://codepen.io/)は、ウェブ開発者のための強力なオンラインツールです。HTML、CSS、JavaScriptのコードをブラウザ上で書いて、即座に結果を確認できます。

### Codepenの主な特徴

1. **環境構築不要**: ブラウザさえあれば、すぐにコーディングを始められます。
2. **リアルタイムプレビュー**: コードを書きながら、即座に結果を確認できます。
3. **簡単な共有**: URLを共有するだけで、他の人とコードを共有できます。
4. **豊富なライブラリ**: 多数のJavaScriptライブラリやCSSフレームワークが利用可能です。

## ライフゲームとは？

ライフゲームは、1970年にジョン・ホートン・コンウェ

カメラの映像をCanvas要素に描画する

# はじめに

フィルターをかけたり、画像処理を加えたりするために

webcamの映像をCanvas要素に描画する方法をまとめておきます。

# プロジェクトの作成

getUserMediaでvideoの権限を要求する。

videoのstreamをvideo.srcObjectに設定。

loadeddataのEventでCanvas要素に描画する。

“`Javascript:index.js

// 権限を要求
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(stream => {
const video = document.getElementById(‘myVideo’);
const canvas = document.getElementById(‘myCanvas’);
const ctx = canvas.getContext(‘2d’);
video.srcObject = stream;
// 描画を開始

JavaScript: 圧縮とかPPM star(2)

[前回](https://qiita.com/mashuel/items/ecb38f065a5be90efc12)に引き続き`PPM star`の記事となります。前回は最短の決定性文脈(SDC)を選択して符号化を開始していました。しかしこの方法は巨大連長や巨大反復の処理に莫大な時間を要するという問題があります。
そこでLocal Order Estimation(LOE)も導入します。何じゃそら? 大雑把に言うと、幾つかの値を評価して、低次数を目指すかどうか決めます。

## 実装編
文脈情報に記号頻度合計値`sum`を追加。連結listの先頭は常に最高頻度の記号を配置。これはほぼ原作に近い変更。そして幾つかproperty改名。
“`js
function Suffix(){this.root=this.point={size:0,sum:0,cs:-1}}

// 木更新
function update(sa,s){
var e,f=sa.fit,p=sa.max,q=sa.med,l=sa.min,m,n,r,t,u,
c={size:p.size+1, sum:0,

varって存在価値あるの？

## 事の発端
ある日私はJavaScriptの歴史について少し学びました。
その中で、ES6(ECMAScript2015)でletとconstが追加され、varが非推奨になったことを知りました。
また、ある時には友人からvarは使うんじゃないと言われました。
そこで私は思いました。
**「なんでvarなんて存在するの！？varっていらない子じゃない！？」** と。

しかし、存在するからには何か理由があるのだろうと私はvarについて少し調べてみることにしました。

## JavaScriptにおけるvar
varはletやconstのようなJavaScriptには変数を宣言するためのキーワードです。
このvar, let, constのは以下の表に示すような違いがあります。
| | var | let | const |
| ——– | —— | ——– | ——– |
| **再代入** | 可能 | 可能 | 不可能 |
| **再宣言** | 可能 | 不可

情報系大学生がサークルのホームページ作成してみた～github pagesで無料公開まで

# きっかけ

私は、情報系の3年生で、pythonを中心にプログラムは勉強してきましたが、webサイトなどは作ったことがなく、勉強も込めてwebサイト作ってみたいと思ったのきっかけです。どうせ勉強して何か作るなら、意味のあるものをつくってみたいと思ったので、自分が2年生の頃からの代表としていたサークル（ボランティア団体）のホームページ作ってみたいなと思い作成することにしました。

## ホームページ作成ツールは使わなかった理由

webサイトがHTMLという言語で書かれていることは、知っていましたがホームページ作成などしたことがなかったため、まずどのようにしたら作れるのか調べることから始めました。どうやら、ホームページ作成ツール(WordPressなど）というものを使うと簡単にコード書かずに作れるとわかりましたが、自分は勉強のために、自分でコーディングして作ってみようと思いました。

## はじめにしたこと

プログラミングはしたことがありましたが、HTMLとCSSとJavaScriptの知識は全くなかったので、とりあえず色んな記事をみたり,YouTubeなどの解説をみて、どの

JavaScriptでランダムな値を扱う

## はじめに
時々使うかもしれないランダムな値の扱い方。
検索でも様々なものが出てきますが、自分なりに勉強したことをまとめます。

## 使用するプロパティ・メソッド
**`Math.random()` 静的メソッド**
今回のメイン。0以上1未満の乱数を返します。

**`Math.floor(num)` 静的メソッド**
num以下で最大の整数を返します。

**`length` プロパティ**
配列の要素の数を返します。

**`flat(depth)` メソッド**
配列を引数depthの深さだけフラット化したものを返します。
depthを省略した場合は1とみなします。

**`sort(fn)` メソッド**
ソート順を定義する関数fnに従って元の配列をソートし、その結果を返します。
fnの戻り値が正か負かによって、並びが変わります。

## ランダムな整数を取得する
:::note warn
以下の変数min, maxには整数が代入されることを想定しています。
:::
### 0以上max以下のランダムな整数を取得する
“`js
const max = 100;
con

TypeScript化したReactアプリを、Next.jsへ移行してみた！

# はじめに
こんにちは！WEBエンジニア転職を目指しているK.Yです！
今回は、ReactアプリをNext.jsへ移行してみました！

JavascriptとReactで簡易的なブログ作った記事もありますので、そちらもよかったらご覧ください！

https://qiita.com/ken887265/items/a6dfc1f62ee185b986b2

https://qiita.com/ken887265/items/8d6255a5aba95897ca67

https://qiita.com/ken887265/items/f8850ec0fd5757c2bd39

https://qiita.com/ken887265/items/6104486dd665a462ea1c

## 前提
ルーターは、App Router
CSSは、tailwindCSS

バージョン
react: 18.3.1,
react-dom: 18.3.1,
react-router-dom: 6.23.1

JavaScript　ES6以降

## Next.js
Next.jsとは、Rea

ブラウザのストリーム API をマスターする


## 1. ストリームの基本理解

小川は絶え間なく流れ続け、コンピュータサイエンスにおける連続的なデータ伝送に似ています。

なぜストリーミングがコンピュータサイエンスで重要なのでしょうか？主に2つの理由があります：

– メモリの過負荷を防ぐため
– 迅速な応答を可能にするため


上の画像は[2016 – ウェブストリームの年](https://jakearchibald.com/2016/streams-ftw/)からのものです。

身近な例を考えてみましょう：GPTのストリーミング出力です。LLMの出力には時間がかかり、LLMがストリーミング方式で出力するため、生成されると同時にデータを送信し、結果をより早く見ることができます。

フロントエンド開発者にとって、ストリームAPIがブラウザで利用可能になる前は、Ajaxリクエストをストリーミング方式で処理すること

【2024年最新版】0からReactを勉強するならこのロードマップに従え！


# はじめに

こんにちは@Sicut_study (Watanabe Jin)です。
去年の10月頃にReactのロードマップを投稿しておかげさまで**1000いいね**もすぐそこになりました

https://qiita.com/Sicut_study/items/78910cd8d103b8d45a73

そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。

https://projisou.jp

エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。

👇メンバーの記事はこちらにあります

https://qiita.com/organi

React Testing LibraryでUnable to find an element with the text: XXXXのエラー

# 問題

React Testing Libraryを使用してテストを実装している中で、“`screen.getByText(‘XXXX’);“`を使用すると以下のエラーが発生する。

“`javascript
Unable to find an element with the text: XXX
“`

# やったこと

まずは該当のコードをwaitFor関数で囲みます。

こうすることで非同期操作が完了するまで、テキストを取ってくるのを待ってくれるようになります。

以下が修正コードです。

“`javascript
await waitFor(() => {
const contentElement = screen.getByText(‘XXXX’);
const timeElement = screen.getByText(’10’);

expect(contentElement).toBeInTheDocument();
expect(timeElement).toBeInTheDocument();
});
“`

まだ同じエラーが出ましたが補

React Testing Libraryで非同期処理のエラーが出た時の解消方法

# 問題
React Testing Libraryを使用してテストを実装している中で、waitFor関数内で原因不明のエラーが出ていたのですが、コンソールログを入れるとうまくいったので、理由を調べてみました。

# 事象：
該当のコードがこちら。

“`jsx
afterEach(cleanup);

test(“削除ボタンを押すと学習記録が削除される”, async () => {
render();

// 削除ボタンが表示されるまで待機
await waitFor(() => {
const deleteButtons = screen.getAllByTestId(“delete”);
expect(deleteButtons.length).toBeGreaterThan(0);
// console.log(“Initial delete buttons count:”, deleteButtons.length);
});

// 初期の学習記録の数を取得
const initialRecords = sc

URLを入力してからページがレンダリングされるまでのプロセス（2）

> [URLを入力してからページがレンダリングされるまでのプロセス（1）](https://qiita.com/Jiang_Yuehu/items/08116f3311f1cd7baca7)

## 4、TCP接続

IPアドレスを取得した後、HTTPリクエストを開始することができます。HTTPリクエストは、実際にはTCP/IPプロトコルに基づくリクエストです。データ伝送の信頼性を保証するために、接続の確立には3回のハンドシェイクが必要であり、接続の切断には4回のハンドシェイクが必要です。

### 3回のハンドシェイクのプロセス：
– 第一回目のハンドシェイク：クライアントがサーバーに SYN（同期）フラグが設定されたデータパケットを送信します。
– 第二回目のハンドシェイク：サーバーが受信を確認し、SYN/ACK フラグが設定されたデータパケットを返信します。
– 第三回目のハンドシェイク：クライアントが ACK フラグが設定されたデータパケットを送信し、ハンドシェイクが完了したことを確認します。

### 4回のハンドシェイクのプロセス：
– 第一回目のハンドシェイク：クライ

JavaScript: 圧縮とかPPM star

今回の圧縮法解説もどきは、PPM starを紹介します(以後PPM\*と表記)。基本的なPPMは探す記号列の長さ(文脈の次数)の最大値を設定して処理しますが、PPM\*ではほぼ無制限です。
つまりその時点で存在する最長の文脈から探索処理を開始するのです。そのため、より高い精度で記号の予測が行えると考えられます。
しかし次数がどこまでも伸びる分、空間消費量が激しくなりそうな、**ヤバげな気配を感じます**。速度的にも不安にならざるを得ません。

## 実装編
そんなPPM\*をどのように実装するかと言うと、context trieや接尾辞木のようものを使います。
文脈の次数はShortest Deterministic Context(SDC)により選択します。
通常は、最長一致文脈から符号化を行いますが、最長一致文脈が決定性文脈(予測される記号が1種類だけ)であり、かつ低次の文脈においても決定性文脈が存在する場合、これらの文脈における最小次数の文脈から符号化を開始するという作戦です。
それでは素人でも分かりずらくJavaScriptに翻訳していきます。

### 構造体的な奴
“`j

配列とオブジェクトの分割代入

## 分割代入とは
JavaScript では分割代入と呼ばれる変数への代入方法があります。
配列やオブジェクトなどに含まれる複数の要素を別々の変数へ分割して代入することができます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

## オブジェクトの分割代入
オブジェクトの分割代入構文を用いると、オブジェクトの値を取り出す処理を簡潔に書けます。
“`ts
const obj = {
foo: 271,
bar: “str”,
“1234”: 314,
}
const { foo, bar } = obj
console.log(foo) //271
console.log(bar) //str
“`

変数名と同じプロパティキーに対応する値が変数に代入されます。
ただし型注釈をつけることはできず、変数の型は型推論によって決定されます。

### 識別子でないプロパティ名
プロパティ名が識別子ではない場合（数字で始まって