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

railsとvue.jsを使用してchatアプリを作ってみた

#### 環境
– ruby 3.1.4
– rails 7.0.8.1
– vue 3.4.21

#### 事前準備

workspaceという作業環境を構築
バックエンドとフロントエンドで作業環境を分けた。

– 使用したライブラリ
rails
“rack-cors(クロスドメイン対策)“
“ActionCable（標準用意されている。サーバ側からクライアントに直接情報）“
vue.js
“axios(HTTPリクエストで使用)“
“vue-router（ルーティング処理）“
“actioncable“

#### バックエンド側

– データベースモデル
“`ruby:schema.rb
ActiveRecord::Schema[7.0].define(version: 2024_04_17_075212) do
create_table “messages”, force: :cascade do |t|
t.text “content”
t.string “sender_name”
t.integer “r

create-react-appで作成したファイルをGitHub Pagesにdeployする方法

こんにちは！

先日やっとの思いで、create-react-appで作成した簡単なアプリケーションをGitHubPagesにデプロイすることができたので、ここにメモとして残しておきます。

今回のトラブルシュートに関しては二つのサイトを参考にさせていただきました。大変助かりました！ありがとうございました。

https://qiita.com/tat_mae084/items/745761eee6cd1d42949d

https://zenn.dev/acha_n/articles/deploy-react-app-with-github-actions

前提として各種バージョンをここにまとめておきます。

| | Version |
|—-|—-|
| Ubuntu | 20.04 |
| node | 20.12.2 |

上記のバージョンで本記事の内容に関しては操作していますので、この記事を見て対応される方はこの設定にしてから行っていただくスムーズに進むかと思います。

まず、私の場合では、Ubuntuを用いてGithub操作をしているため、下準備しておかないと

JavaScript の Promise、Async、Await についてのご説明

## 初め
Web開発では、非同期処理が一般的なプログラミング パラダイムになっています。 ネットワークリクエストの処理、ファイルの読み取りと書き込み、または遅延操作のいずれの場合でも、非同期処理はよりスムーズなユーザー エクスペリエンスを提供できます。 シングルスレッド言語である JavaScript の非同期処理の実装は特に重要です。 この記事では、JavaScript で非同期プログラミングを処理するための 3 つのコア技術、Promise、async、awaitを紹介します。 これらがどのように機能するか、使用する方法、そして実際のプロジェクトで効果的に適用する方法について詳しく説明します。

### 非同期処理とシングルスレッド
#### 非同期とは
“`javascript
console.log(100)
setTimeout(function() {
console.log(200)
}, 1000)
console.log(300)
“`

“`javascript
console.log(100)
alert(200)
console.log(300)
“

フロントエンドデータ可視化：AIはまだ直接的な出力が難しい

AIが急速に発展している時代に、データアナリストの仕事は挑戦に直面しています。AIは効率的にコードを出力することができます。ビジネスニーズを深く理解し、「ビジネス向け開発者」になるだけでなく、データアナリストは可視化の方向にも、美的感覚を高める努力をすることができます。AIはまだ複雑で美しい可視化画像を出力する能力はありません。

以下の図は、1901年から2023年までのノーベル賞の100年間の受賞状況を可視化したものです。主に、受賞者の当時の国籍、専門分野、受賞者の年齢の可視化です。選択した可視化図形はアスタープロットです。また、画像の背景と専門分野の色は、日本の伝統色を採用しています。例えば、ENJI 燕脂、SEIHEKI青碧など。

この1枚の図から、各国の受賞数の比較、学科の傾向、40-80歳の間の受賞者数が最も多いなどの情報が簡単に見えます。これは、フロントエンドのデータ可視化がPOWERBIの可視化に比べて優れている点であり、より高度な創造性を持ち、AIに取って代わることは難しいです。

![截屏2024-04-21 22.08.36.png](https://qiita

忘備録：モダールウィンドウ作成

## 久しぶりのJavaScript、モーダルウィンドウ作成をしました。
2年以上放置しておりました。
現実はコーディングではなくデザイン業務ばっかりになってしまったので、また1からJavaScriptを学習することにしました。（ありがとう、ドットインストールさん・・・）

勉強しなおしたことで、以前よりも理解が深まった感じがあるので、
メジャーなものから作成して体に覚えさせていこうと思います〜。
とりあえず今回はモーダルウィンドウから始めていきますよ〜！

## モーダルウィンドウ作成
実際に制作を行う前に、どのように条件を設定して発火させるかメモを取りました。
①：openはクラス名「modal-open」のボタンをクリックして、htmlに「active」クラスをつける
②：closeはクラス名「modal-close」のボタンだけでなく、モーダル背景の「modal-overlay」をクリックしても閉じるようにする

### HTMLの記述
以下、HTMLの記述になります。
わかりやすいようにザッと組んでます。
“`HTML

consoleからfetchを叩くとcorsエラーになる

# はじめに

cors 難い。今回は 通常のアプリケーション上の挙動では問題なかったが、dev tools 上で fetch を叩いた時、限定で cors エラーが発生したのでその解決方法を記載します。

# 要約

network タグから fetch をコピーすると `cache-control: no-cache` と `pragma: no-cache` header がつきます。これらの header がついた上で [preflight](https://developer.mozilla.org/ja/docs/Glossary/Preflight_request) リクエストが飛ぶような状況では ブラウザが自動で [‘Access-Control-Request-Headers’](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Request-Headers) に　 cache-control と pragma を追加します。backend の cors 許可ではこれらの h

promiseとthenの使い方

# はじめに
非同期通信でよく使うpromise、thenについて解説する。

# 説明
下記が参考コードになります。

“`JavaScript
function processWait() {
let promise = new Promise(function(resolve) {
setTimeout(function() {
resolve();
}, 1000);
});
return promise;
}

let promise = sleep();

promise
.then(function() {
console.log(‘朝だよ、起きて(1回目)’);
let promise = processWait();
return promise;
})
.then(function() {
console.log(‘朝だよ、起きて(2回目)’);
let promise = processWait();
return promise;
}

Reactでフォームを作るために、Formikをイチから理解する

## はじめに
4月から新しい現場で働くようになり、いままで触っていなかったいろんな技術に触れる機会が増えました。

今回はその中のひとつであるFormikというライブラリについて、学習のために自分で調べてわかったことを記事にしました。
簡単なフォームでのFormikの使い方について3つのステップに分けてイチから理解できるようにまとめています。

なお、はじめは環境構築からになるので、単純に使い方を知りたい方は「Formikとは」からご覧ください。

## 環境構築
### Reactアプリの生成
まずはReactの環境を作ります。
“`bash
npx create-react-app practice-formik-front
“`
`practice-formik-front`の部分は各自作成したいフォルダ名に置き換えてください。

※`create-react-app`は公式サイトから記載が消えており、非推奨となっているようです。
React単体で使うのではなく、Next.js等のフレームワークと組み合わせて使うことが推奨されています。
今回はサクッと試すだけなのでこちらで

Javascriptで最頻値を求めようとした備忘録

※筆者はJavascript初学者

最頻値、厳密には「文字列が複数入った配列から、最も出現回数の多い文字列を返す」関数を作りたかった。
色々やり方はあると思うが、ちょっと躓いたところもあったのでメモしておく。

サンプルとした配列は下記。
“`javascript:main.js
let arr = [“melon”,”apple”,”apple”,”pine”,”apple”,”melon”,”orange”]
“`
“apple”が3回、”melon”が2回、”orange”と”pine”が1回ずつ出現する。

# 参考
– [JavaScriptの配列の最頻値を求めるコピペ](https://qiita.com/yas-nyan/items/8afaf7a1fc5b2306354b)
– [javascript 配列の最頻値を求める](https://mebee.info/2022/05/29/post-66763/)
– (↑の解説記事) [JavaScript 自由研究 – 最頻値を求めるコード – カメリアの記事](https://camellia.hatenablo

第14回 JavaScript アニメーションによる拡大・縮小（CSS版）

# はじめに
今回は、アニメーションによる要素の拡大・縮小を試したいと思います。
ウェブサイトの広告でよくみかける、広告表示時やクローズ時にアニメーションで拡大・縮小する動作です。
第13回は、`animate`を使用して拡大・縮小を実施しましたが、今回はCSSの`animation-name`で実施したいと思います。
今回はJavaScriptは使用しません。

# 今回実施する内容
CSSの`animation-name`を使用して、要素にマウスカーサーを載せた時に拡大・縮小を実施します。
本当はクリックで実行しようと思いましたが、少し課題があり、それを解決しようとすると今回のテーマから少し外れた内容も記載しなければならないため、`hover`で行うことにしました。課題解決は別記事で記載しようと思います。

以下の４つのパターンを実施します。
– 拡大
– 縮小（縮小後、マウスカーサーを置きなおすと再度元の戻って縮小）
– 水平方向に拡大（拡大後、すぐに初期のサイズに戻る）
– 垂直方向に縮小
![Scale_CSS.gif](https://qiita-image-store.s

メソッドチェーン

メソッドチェーンを使用すれば、変数を取らなくて良なり、簡潔にコードを書くことができる。
メソッドチェーンとはメソッドを呼び出した返り値に対して、さらにメソッド呼び出しを行うこと。チェーンを長くしす
ぎると読みにくくなるので改行するなどして工夫する。

“`javascript
const array = [1, 10, 3, 7, 6, 9, 5, 8, 2, 4]

// 変数を取った場合
const result = array.filter(value => value <= 5) result.forEach((result) => console.log(result))
// 1 3 5 2 4

// メソッドチェーンを使用した場合
array.filter(value => value <= 5).forEach((numbers) => console.log(numbers))
// 1 3 5 2 4
“`
#### 参考
https://qiita.com/andota05/items/2a0461dc1d6f4e31781f

【TypeScript】RDBを手軽にいい感じに扱う @databases

`@databases` はTypeScriptのRDBクライアントライブラリ。ORMではなく、SQLを直接書く又はクエリビルダーを使う系のライブラリ。Postgres、MySQL、SQLiteなどで使える。

これは私が他のRDBクライアントライブラリに対して「なんでこうしないんだよ」と思っていた設計が全部盛り込まれていて、とても使い心地が良い。

https://www.atdatabases.org/

# 使い方概要
このライブラリにはSQLを直接書く方法とクエリビルダーを使う方法の2種類の使い方がある。2つの長所と短所は以下。

– SQL直書き
– ✅どんなクエリでもかけるのでRDBの機能をフルに活用できる
– ❌TypeScriptの型がつかない
– クエリビルダー
– ✅TypeScriptの型がつく
– ❌扱えるクエリは限られる

## SQL直書き

以下がコード例。

“`typescript
import createConnectionPool, { sql } from ‘@databases/mysql’;

const

JS components

Curious which components explicitly require our JavaScript and Popper? If you’re at all unsure about the general page structure, keep reading for an example page template.

Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper)
Modals for displaying, positioning, and scroll behavior
Navbar for extending

Next.jsでフォントを設定する

## 初めに
Next.jsの最新バージョンでのフォントの設定についてです。説明しているサイトが少なかったので忘備録として残します。

## 注意事項
プログラミング初心者の記事になります。明らかな誤りがある際にはコメントいただけると幸いです。

## 結論
まずは簡単に設定手順を記します。

1. font.tsを作成する
1. `next/font/google`から使用するファントの種類をインポート
1. 任意のファイルで呼び出す

以下詳しい設定方法です。

### font.tsの作成

まずは好きな場所にfont.tsを作成してください。
今回はappディレクトリ配下にそのまま設置しましたが、uiファイルを作成してもいいかもです。


### `next/font/google`から使

JavaScript　基本の学び　記録

JavaScriptの基本を学んだので記録用
Progate2周目での情報整理です

## 【while】　繰り返し処理
条件式がtrueの間、{ }を繰り返す

例　numberを1〜100まで表示するwhile文
“`js
//numberの中身は1を定義①
let number = 1;

while(number <= 100){ //numberの数値を比較しtrueかを判別② console.log(number); //出力 number += 1; //numberに1を足す③ } ``` ```:結果 1 2 3 ： ： 98 99 100 ``` ## 【for】繰り返し処理 while文をシンプルにした文 上記のwhile文①〜③を1行で指示できる ```:例 for(①; ②; ③){ console.log(number); } ``` 数値をいれると ```js for(let number = 1; number <= 100; number++){ console.log(number); } ``` これで上記と同じ出

javascriptの非同期開発

### 非同期処理とシングルスレッド
#### 非同期とは
“`javascript
console.log(100)
setTimeout(function() {
console.log(200)
}, 1000)
console.log(300)
“`

“`javascript
console.log(100)
alert(200)
console.log(300)
“`
#### 非同期処理が必要になるのはどのような場合ですか?
1. 待機が発生する場合
2. 待機中はalertのようにプログラムをブロックすることを避けたい時
なので、「待機の場合」に非同期処理が必要

#### フロントエンドで非同期開発を使用するシナリオ
1. スケジューリングタスク： `setTimeout`, `setInverval`
2. Networkリクエスト: ajaxリクエスト、動的にのload
“`javascript
console.log(‘start’)
$.get(‘./products’,function(data) {
console.log(dat

PMTiles 消費における MapLibre GL JS v4 の破壊的変更への対応

## はじめに

今更ですが、MapLibre GL JS の v4.0.0 が2月にリリースされました。[変更点](https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#400)の中には、タイルをロードする際に実行する処理を追加することができる `addProtocol` の破壊的変更が含まれています。

> Changes `addProtocol` to be promise-based without the usage of callbacks and cancelable

MapLibre GL JS において、`addProtocol` は [PMTiles](https://github.com/protomaps/PMTiles) の消費などにおいて、他のウェブ地図ライブラリには代替できない機能となっていると認識しています。

そのため、今回の破壊的変更が、これまでのコードにおいてどのように影響を及ぼすのか、簡単に確認していきます。

### 参考：過去の関連記事
* addProtoco

JavaScript: 接尾辞配列(Suffix Array)編

## 概要
これは文字列の接尾辞(開始位置が異なり終端位置が元の文字列と同じ部分文字列)の文字列中の開始位置を要素とする配列を、接尾辞に関して辞書順に並べ替えて得られる単純な配列です。まさに接尾辞木の配列版と言っても過言でしかありませんね。文字列検索等において猛威を振るう事が可能です。
例えばthatの接尾辞はthat, hat, at, tの4個で、これらを辞書順に並べた配列が接尾辞配列となるのです。

始点	接尾辞
0	that
1	hat
2	at
3	t

整列

始点	接尾辞
2	at
1	hat
3	t
0	that

厳密に言うと始点こそが接尾辞配列の正体です。上記の例で言えば[0,1,2,3]から並べ替えられた[2,1,3,0]です。
昇順に並んでいるので文字列の検索は二分探索を使ってウミウシ

【熱望】javascript の for 文で var i を宣言するのはやめて下さい

皆さんは javascript の for 文で
以下の書き方をしたことがありますか？

“`js
for(var i = 0; i < array.length; i++) { } ``` この書き方でも for 文は正常に動作します。 しかしながらこの書き方は 以下の書き間違いが生じることがあります。 ```js for(var i = 0; i < array1.length; i++) { //長い処理 for(var i = 0; i < array2.length; i++) { } } ``` 長い処理の中で i を宣言したことを忘れて 再び i を宣言してしまうことで 外側の for 文のカウントにバグが発生し 期待した動作にならない例になります。 私も他の人が作成した web アプリで このバグを見かけたことがあります。 for の変数を宣言する場合 必ず let で宣言して下さい。 var でなければ正常に動作しないのは 構造的欠陥のハズです。 ```js let array1 = [1, 2, 3]; let array2 =

querySelectorAllで取得した要素に対してmapとかを使う

## はじめに
`querySelectorAll`で取得した要素に対して、Array関数を利用したいとします。

“`html.example.html

sample1

target!

sample3

sample4