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

jsの主要ライブラリ7選を徹底解説

# jsの主要ライブラリ7選を徹底解説

ソフトウェア開発において、Angular、Vue、Nuxt、React、Next.js、Node、Socket.ioは異なるツールやフレームワークです。それぞれがウェブ開発やアプリケーションの構築に役立ちます。

## Angular

**Angular**は、Googleによって開発されたJavaScriptフレームワークです。Angularはウェブアプリケーションの構築に使用されます。Angularを使うと、ウェブアプリケーションを構築するために必要な多くのツールや機能が提供されます。Angularは、大規模なアプリケーションの開発に適しており、コンポーネントベースのアーキテクチャを採用しています。

## Vue

**Vue**は、ウェブ開発に使用できるJavaScriptフレームワークです。Vueは、シンプルで使いやすい構文を提供し、小規模なプロジェクトから大規模なアプリケーションまで幅広く利用できます。Vueはコンポーネントベースのアーキテクチャを採用し、UIを構築するために使用されます。

## Nuxt

**Nuxt**は、

CheerpJ 3.0rc1を発表：テストと改善にご協力ください！

本日、最初のCheerpJ 3.0リリース候補、バージョン3.0rc1のリリースを発表できることを嬉しく思います。

過去何年もの間、私たちのチームは、Javaアプリケーション、アプレット、ライブラリをモダンブラウザ上で実行するためのソリューションであるCheerpJのために、全く新しいアーキテクチャの開発に精力的に取り組んできました。

# 主なハイライト
世界中の何百もの組織による長年のCheerpJ 2.xの実世界での利用を活用し、我々のブラウザベースのx86仮想マシンであるCheerpXの開発から学んだ多くの教訓を活用して、我々はCheerpJの全面的な書き直しを行いました。

* さようならAOT、こんにちはJITコンパイル： Che

ソートアルゴリズムを可視化してみよう（５）

# JavaScript によるソートアルゴリズムの可視化

こちらのつづきです。
これで最終回です。

https://qiita.com/w0rc/items/bb0271d6ad1afd77e133

## プログラムの解説 – ソートアルゴリズム（２／２）

`algorithms.js` で、クイックソートとマージソートの実装です。
これらは平均計算量が $O(n\ log\ n)$ のシリーズです。
このへんは処理の様子がちょっと分かりづらいので、
`main.js` 側から呼び出すときにデータを多めに渡すことで
俯瞰できるようにしてあります。

### QuickSort クラス

クイックソートを実装します。
データから適当な値を取り出して（※）、
それより小さいもの／大きいものに選り分ける、を繰り返して
ソートを完了させていきます。
※この値の取り方は計算量に関わる重要ポイントですが、
　今回は、渡された区間の真ん中を取るだけにしています。

![QuickSort.png](https://qiita-image-store.s3.ap-northeast-1.am

GoogleMapsAPIを使用した開発1（地図の表示）

# 1.はじめに
投稿された情報（緯度経度）からGooleMapsAPIを使用して地図を表示、地点間のルート検索機能、周辺情報の取得を実装したので知識の定着、復習のために記事を書きます。
一度に書くと長くなるので、4回にわけて投稿していきます。
今回はその１回目でMAP表示まで実装します。

# 2.環境
Ruby (2.6.4)
Rails (6.1.7)
Maps JavaScript API

# 3.前提条件
APIキー取得済み
投稿機能を実装している

# 4.実装
### 使用gem
“`ruby:Gemfile
gem ‘geocoder’
gem ‘gon’
“`

### テーブル構造
“`ruby:schema.rb
create_table “posts”, force: :cascade do |t|
t.string “address”
t.float “latitude”
t.float “longitude”
end
“`

## 1.投稿された住所、地名から緯度経度を保存できるようにする
### 1.gem`ge

【JavaScript・学習ログ4】DOM操作について

　教材:侍テラコヤ『JavaScriptの基礎を学ぼう』https://terakoya.sejuku.net/programs/60/chapters

## DOMの基本

HTMLドキュメントをオブジェクトのように扱える仕組みのこと。
JavaScriptからHTMLを操作できる。
“`javascript
// Documentオブジェクトを使用し、HTMLにアクセスする。
console.log(document.head); //headを呼び出し
console.log(document.body); //bodyを呼び出し
“`
documentの１つ上の階層はwindowオブジェクトで、さまざまなオブジェクトやメソッドがこれに含まれる。

## 要素の取得
### (1) getElementById()
HTML要素をIDで取得する。
同じidの複数設定はできない。
![スクリーンショット 2023-10-25 210453.png](https://qiita-image-store.s3.ap-northea

JavaScript入門 その1：演算子、変数

JavaScript入門の書籍を読んで書いてあったこと＋自分で調べたことのメモ書きその1。演算子、変数編。

# 算術演算子

| 演算子 | 説明 |
|:-:|:-:|
| + | 加算 |
| – | 減算 |
| * | 乗算 |
| / | 除算 |
| % | 剰余 |
| ** | べき乗 |

# 演算子の優先順位

| 優先順位 | 演算子の種類 | 結合性 | 演算子 |
|:-:|:-:|:-:|:-:|
| 19 | グループ化 | なし | `(…)` |
| 18 | メンバーへのアクセス | 左から右 | `….…` |
| – | new（引数リスト付き） | なし | `new …(…)` |
| – | 関数呼び出し | 左から右 | `…(…)` |
| 17 | new（引数リストなし） | 右から左 | `new …` |
| 16 | 後置インクリメント
後置デクリメント | なし | `…++` `…–` |
| 15 | 論理NOT | 右から左 | `!…` |
| – | 単項+、単項-
（正負の符号） |

Expressでnode_modulesのbootstrapをクライアント側から静的ファイルとして読み込む

# 方法
アプリ起動の起点となるjsファイル（多くの人は`app.js`が該当するかと）に以下のような1行を加える。
“`javascript:JavaScript
app.use(‘/bootstrap’, express.static(path.join(__dirname, ‘node_modules/bootstrap/dist’)));
“`
こうすることで`node_modules/bootstrap/dist`下のファイルに対して`/bootstrap`から始まるパスを指定すればアクセスすることができるようになる。
“`html:HTML


“`
# 何をしているのか（解説）
Expressの`app.use()

Electronでアプリ作成3　ElectronでSqlite3を操作

　Node.js環境でブラウザベースのアプリが作成できるElectronですが、結構メジャーなアプリがElectronベースで作られているようでね。そんなElectornで取り扱いが簡単なデータベースのSqlite3が操作できたら、いろいろ便利だろうと思い、サンプルとなるアプリを作成しましのたで、投稿します。自分の知識不足で、結構ハマってしまった個所もありましが、とりあえずはデータの挿入、抽出は確認できています。

# 動作確認環境
Windows11
node.js v18.18.1
electron v27.0.0
sqlite3 3.43.0

# 参考になる記事、サイト等
Electronアプリの作成については過去の記事で触れてもらっています。

https://qiita.com/watmot/items/e79a3f3f8fe27fa54a33

https://qiita.com/watmot/items/5241c97350f3431bd09c

WindowsにSQLite3をインストールしています。こちらのサイト参考にさせてもらいました。大変丁寧で

Bootstrap-v.5.3でjQueryを扱っていなかった話

先日Bootstrapを用いて簡単な製作物を作ろうとごにゃごにゃプログラミングを組んでいたのですが、なぜかjQueryの動きが聞いていない印象、、、。そこからトラブルシュートを様々試みましたが、結局うまくいかず、、。

その日は気分でv5.3を使用していたので、もしかしてと思い、検索したところ、v5以降はJavascriptのライブラリと対応していないということがわかりました:disappointed_relieved:

果たしてあの苦戦していた2時間は何だったのだろうか、、、、。

cssファイルとjsファイルを書き換えれば済むからこの後の修正はそこまで大変ではなさそう、、、。

やっぱりBootstrapはv4.5に尽きるなあと再認識しました！！

スプレッドシートから、サイト上にポップアップを出すシンプルなサービスを、やべー勢いですげー作り上げた

# サイト上にポップアップを出すシンプルなサービスを作った
先日、ノーコードでサイト上にポップアップで動画を出せるシンプルなサービスをリリースしました。
サイト上に指定のタグを1行埋め込むだけで、TikTokやYoutubeの動画がポップアップするというもので、

・Googleのスプレッドシートを使って管理できる

というのが特徴で、新しいことを覚える必要がなくて担当者の負担が減るかもです。
非エンジニアでも楽勝だとおもいます。

https://engine.diiig.net/?cv=qi

HTMLのコーディングなどなく、YoutubeやTikTokの埋め込み動画をモーダル的に表示してくれます。
また、実装もバニラなJavascriptなのでJqueryのバージョンでぶつかることも無いかなと。

## なんでつくった？
### 大掛かりな製品が多く、難解で維持費・導入・運用コストがバチクソに高い
この手の製品は、解析ツールや他の膨大な機能も込みで

– 初期費用が数十万〜
– 月額数十万〜

みたいなのが多く、導入・学習・運用コストがバカ高く、小規模な組織や案件には不向きです

フロント技術者はコンポーネント管理をしっかりしよう [Storybook]

## Storybookとは？

Storybookはフロントエンド開発者のためのオープンソースツールであり、UIコンポーネントを独立して開発し、テストすることができます。

React、Vue、Angularなど、主要なフレームワークとの互換性があります。

Storybookを使用することで、デザイナーや他のステークホルダーと協力しやすくなり、`フロントエンドの開発プロセスがスムーズ`になります。

? ポイント: StorybookはUIコンポーネントの独立した開発とテストを可能にするツールです。

## Storybookのインストール

Storybookを使用するには、まずプロジェクトにインストールする必要があります。

これはnpmやyarnを使用して簡単に行えます。例えば、ReactプロジェクトにStorybookをインストールするには、以下のコマンドを実行します。

“`
npx sb init
“`

このコマンドは必要な依存関係をインストールし、Storybookの設定ファイルをプロジェクトに追加します。

? ポイント: Storybookを使用する前

[Vue.js] v-bindでクラス付けかえの基本

### クラスの付けかえ

v-bind:属性名（例：v-bind:src）などでVueのdataやcomputedと紐づけることができる。

以下は、isOpenの値がTrueの場合、open_class_nameが付与され、そうでなければ何も付与されない。
“`app.vue

“`

デフォルトのclassがある場合は別にした方が個人的には見やすい。

“`demo.vue

同じ構造を省略する例

## はじめに
json構造で、同じ箇所を共通化する方法で迷ったので記載しておく。

## 同じ構造を省略する例
非同期を扱う場合でkintoneを例にとると、
あるアプリデータを追加する場合と修正する場合、id違いである。
record箇所は追加と修正で、共通のデータを再利用するようにしましょう。
・追加の場合
“`javascript
const body = {
“app”: kintone.app.getId(),
“record”: {
“文字列1行”: {
“value”: “テスト”
},
“文字列複数行”: {
“value”: “テスト\nテスト2”
},
“数値”: {
“value”: “20”
},
“日時”: {
“value”: “2014-02-16T08:57:00Z”
},
“チェックボックス”: {
“value”: [“sample1”, “sample2”]
},
“ユーザー選択”: {

画像をあるアクションでアップロードする

## 内容
javascript、今回はkintoneを使用し、画像をあるサーバからアップする方法を記載する。
以下のパターンを検証する。
1.外部urlより取得
2.kintone内の画像より取得

## 外部urlより取得
### 主な関数、API
・あるURLから画像を取得したい場合fetchを使用する。

https://www.yoheim.net/blog.php?q=20180901

・kintoneでファイルをアップロードする。
https://sample.cybozu.com/k/v1/file.json

https://cybozu.dev/ja/kintone/docs/rest-api/files/upload-file/

kintoneでは以下のようになる。
プロセスのアクションボタンを押下したときに発動させる例。
“`javascript
kintone.events.on(‘app.record.detail.process.proceed’, async function(event) {
if (event.action.value

YouTubeでスペースキーが動かない時のユーザースクリプト対処

## はじめに

YouTubeでスペースキーによる動画の一時停止/再開ができなくなりました。症状としては、ウィンドウを切り替えたときにスペースキーが効かなくなるようです。

一時しのぎですが、Tampermonkeyのユーザースクリプトを作って、スペースキーが押されたらビデオをクリックするようにしました。

## 本記事の対象者

YouTubeでスペースキーが効かなくなった方。

どうしてもスペースキーで動画の一時停止/再開をしたい方。

## ユーザースクリプト

ブラウザの拡張機能Tampermonkeyにユーザースクリプトを追加してください。

“`javascript
// ==UserScript==
// @name Youtube Fix Space Key
// @namespace http://tampermonkey.net/
// @version 1.0
// @description YouTubeでスペースキーが効かないのでスペースキーが押されたら動画をクリックする。
// @author Query K

【JavaScript】1つ1つの関数に役割を持たせる関数型プログラミング

# 初めに

最近の学習はfreeCodeCampで基礎を見直しています。そこで普段何気なく使用している関数（function, アロー関数）について1つの関数に複数の役割を持たせていることに気付いたので、関数の役割を1つの定めるようにしました。

今回のプログラムを説明すると、

「昨日お酒を何杯呑みましたか？」の質問に対して入力したお酒の杯数分「?」が描画されるプログラムです。

# ソースコード

### 修正前

“`javascript

// ビールの個数を受け取って、ビールの配列を返す
function getBeers(numOfCups) {
const beers = [];

for (let cups = 1; cups <= numOfCups; cups +=1) { beers.push(prepareBeer()); } //HTMLに描画 beers.map((beer) => {
let div = document.createElement(‘div’);

完全なるiPadでゲーム作成　#1

　今日からipadでマルチプレイゲームを作ろうと思う。何をするかは少し伏せておきたい。あと自分のための備忘録であるため、柔らかく、参考程度に見てほしい。あと、ほぼ完全なる初心者でもある。だから、初心者向けである。ちなみに、これは作ってる最中にやっているため実際に使えているかわわからない。後から訂正するつもりである。
# PlayCanvas
ipadでゲームを作ろうと思った矢先、iOSにゲームエンジンがないことに気づき、よく調べると[playcanvas](https://playcanvas.com/)というウェブで使える、ゲームエンジン、3dモデルエディタのようなものを発見した。これを使って作ろうと思う。

無料版では
* 1GB
* パブリックプロジェクト(公開)数無制限**(PlayCanvas上で無料ホスティングされる)**
* REST APIへのアクセス
* セルフホスティングのためのエクスポート
等ができる。

***プライベートプロジェクト***と***チーム管理***(共同作業は可能と思われる)ができない。

尚、Playcanvasの使い方は長くなるので(私もわか

Pleasanter Tips: メール送信をする機能を作ってみた

# コトの発端（情報漏洩の発覚）
（中身は無いので暇なら読んでください。）
とある日、Pleasanterに登録しているユーザーに情報に送りたいと思い掲示板作成しました。そのあと登録した情報をメールで送ろう！と思い付き、通知で送れば良いよね・・・登録完了。。。
仕事でメールを確認したら通知で送ったメールが届いておりフト見ると・・・
あれ？TOに全メールが入っている～～～～ま・ず・い
ここから謝罪メールの作成などなど対応に追われ、ショックで落ち込んでいました。
そもそも通知の仕様を調べて見ると、「複数の固定アドレスを指定した場合には、全ての固定アドレスをTOとして送信します」と。そうだったのか。
PleasanterでDMで使用できる方法が無いかと調べましたが見つからず。
私の希望する機能が無いので作る事にしました。

# 機能
0. 掲示板を登録するとユーザーにメールを送る。
0. ユーザーはPleasanterのユーザーとする。
0. 送信先は指定した組織に所属するユーザーとする。
0. 各メールの送り先はTOに設定し、1送り先1メールとする。

※ユーザーは

JavascriptのIntersectionObserverについて

### はじめに
この投稿は解説などではなく、忘れないためのメモ的な感覚で投稿いたします。
見て頂く方々に関しましては、私の解釈が間違っていたりベストな情報ではない可能性が高いので、そのつもりで閲覧していただければと思います。
加えて、そのようなことがあればコメントしていただけると大変助かります。

# IntersectionObserverとは
HTMLの要素とウィンドウの交差を監視している。
使い方は、newで作成したIntersectionObserverのインスタンスにコールバック関数を渡してておく。それの.observeメソッドの引数に監視対象を入れることで、交差したときにコールバック関数が発火する。
後々のためにインスタンスはconstで定義する。

“`js
//監視したいDOMを定義
const dom = docment.querySelector(‘監視したいDOM’);

//newでインスタンスを作ってio(変数名は何でもいいが略語のioにしておく)として定義する
const io = new IntersectionObserver(cb);

//コール

[Vue.js] 迷いやすいv-modelの修飾子を3行で。

## v-model.lazy
inputイベントではなくchangeイベントに反応する。
例えばinput type=“text”では、文字が入力し終わってから変化する。

## v-model.number
入力された値がNumber型になる。
inputは入力された値は常に文字列型になるため、数値型にしたい場合。
（ちなみにhtmlでinput type=“number”としてもデータ型としては文字列だから注意）

## v-model.trim
ユーザーから入力された値の両端の空白を削除する。
JSの.trim()と同じ。