JavaScript関連のことを調べてみた2022年06月02日

[JavaScript]日本語IME入力中か判定する方法

# 概要
JavaScriptでキーボード押下時などに日本語IME入力中かを判定する方法のまとめです。
日本語入力周りのイベントは、2022年現在主だったブラウザでも挙動に差異があり面倒です。

[IME（全角）入力におけるjsイベント現状調査](https://qiita.com/darai0512/items/fac4f166c23bf2075deb)
こちらの方の記事とだいぶ内容が被っていますが、私の調査結果と微妙に異なるところもあり、改めて自分なりにまとめています。

# 調査対象ブラウザ

– Chrome 99 (Mac)
– Firefox 98 (Mac)
– Safari 15 (Mac)
– Chrome 99 (Windows)
– Firefox 98(Windows)
– Edge 99(Windows)

※ Edgeはバージョン79からChromiumエンジンに変わっており、それ以前は挙動が全く異なると思われるので注意

# 日本語入力時に発生するイベントの流れ

まず、日本語入力時に発生するイベントとその発生順序を確認しました。
OSによる差はなかったの

初心者用：まずはどの言語を選べばいいの？

# どの言語を選べばいいの？

実際に僕の周りでこの質問を投げかけられることが多々あります　　
よく回答で見るのが
>やりたいことによる　　

って言われますよね　　
確かにそうなのですが今回は
**特にまだやりたいことがわからない人向け**　　
に書いていきたいと思います　　

## 筆者おすすめはJavaScript
まずはこれです
Web開発には欠かせない言語です
開発環境の用意が非常に単純
テキストエディタとブラウザがあればできます
テキストエディタとはプログラムを書くノートみたいなものです
実はWindowsに入っている「メモ帳」でもできます
筆者のおすすめのエディタは「VScode」か「Atom」ですね

### JavaScriptで何ができるの？？
ざっくりといえばWeb開発です
ホームページを作ったりできます
フロントエンジニア、サーバーエンジニアという言葉がありまして
・前者は人の目に見える部分
・後者は裏方の仕事
といった認識でいいでしょう
JavaScriptは基本的にフロントエンジニアの仕事になります
ブラウザアプリケーションの見た目を作っているという感じで

[PHP入門]　テキストデータへの、送信、書き込み、読み込み　

# 初めに
PHPの学習を始め、よく使うけど、始めのうちは忘れて何度も見直すだろう。
という点を、メモ代わりにまとめていきます。

## 基本的な書き方
**[開始タグ]** “`“

**[HTMLへ表示]** “echo“ 　　
“`
echo “Hello”; //文字列
echo $hensu; //変数
“`
※jsのconsole.logのように()は不要だが、“ ; “を忘れるとエラーが出るので注意。

**変数定義**　
“`
$num = 1; //数列
$name = “hoge”;　　　 //文字列
“`
## HTMLフォームのデータをPHPファイルへ送信
PHPを使う事で、HTMLとCSSだけでは見た目だけだったお問い合わせフォームを実際に活用できるようになります。

“`

お名前:

MAI

超軽量な手動data masking用のjavascriptライブラリ

`manual-data-masking`は超軽量な手動data masking用のjavascriptライブラリです。


# Repository link
https://github.com/HC200ok/manual-data-masking

# 手動data maskingとは？
手動data maskingはテキストデータ内に存在する個人情報や悪い言葉などの機密情報とセンシティブな情報を

JSの特殊な記述方法　書き殴り

## if文

“`javascript
let number = 10
let result = “”;

if(number < 10) result = "10未満"; else if (number < 100) result = "100未満"; //一般的な記述 if(number < 10){ result = "10未満" }else if (number < 100){ result = "100未満" } ``` ## 分割代入 ```js const user = { id:1, name:"dossy" } let {id,name} = user console.log(id) //=>1

“`
## 参考

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

AFrameで2D・3Dの画像とビデオを表示する

私たちのARアプリケーションの1つでは、[AFrame](https://aframe.io/)にARマーカー付きの3Dモデルに加えて、さまざまな2Dおよび3Dアセットを表示して、アプリケーションの機能を拡張したいと考えていました。 最初は、作業に時間がかかるように見えましたが…

どうなったでしょう？

[AFrame](https://aframe.io/)で下記の5つのアセットの種類が表示できるようになりました：

– 3Dのモデル
– 3Dで2Dの画像（静止画のみ）
– 3Dで2Dの動画
– 2Dの画像（静止画とアニメーション画像）
– 2Dの動画

## 適切なファイル形式
以下は、ブラウザのサポートに応じて、各アセットタイプに使用できるファイル形式の非網羅的なリストです：
– 3Dのモデル：GLB、GLTF、OBJ、COLLADA (DAE)、PLY、JSON、FBX、three.js等
– 3Dで2Dの画像：AVIF 、GIF、JPG、PNG、SVG、WebP等
– 3Dで2Dの動画：_3GP_、_MOV_、MP4、MPEG、MPG、_OGG_、_OG

やっぱりサーバー側でもWeb標準APIを使いたい

– JavaScriptランタイムはこれからもたくさん出てくる
– Node.js, Deno, cloudflare workers, Google Apps Script, …
– それぞれ別々のAPIを設計していたらキリがない
– 独自のAPIを設計してテストして仕様を維持していくのは大変
– Web標準APIを使えば解決

## JavaScriptランタイムとWeb標準API

前提として、JavaScriptにはどのランタイムでも使える関数（**標準ビルトインオブジェクト**）と特定のランタイムでしか使えない関数（**ランタイムAPI**）がある。

前者は例えば`eval`や`Array`などで、後者は`console`や`setTimeout`などだ。

||標準ビルトインオブジェクト|ランタイムAPI|
|—|—|—|
|特徴|すべてのランタイムで使える|ランタイムごとに違う|
|例|`Array`, `eval`など|`console`, `setTimeout`|
|実装者|JSエンジン（V8など）|JSランタイム（Node.jsなど）|
|仕

【JavaScript】newの使い方 ※jsにはクラスは存在せず

# 入力
“`
5
“`

“`JavaScript
function Dialog(){
this.double = function(num){
console.log(num * 2);
};
}

const dialog = new Dialog();
dialog.double(5);
“`
# 結果
“`
10
“`

Denoで静的ファイルサーバーを3行で書く

Denoを使うと、静的ファイルサーバーをなんと3行で書くことができます。

“`ts:serve.ts
import { serve } from “https://deno.land/std@0.141.0/http/mod.ts”;
import { serveDir } from “https://deno.land/std@0.141.0/http/file_server.ts”;
serve((request) => serveDir(request));
“`

ファイルに書き込む内容は以上です。
（tsconfigやpackage.jsonやeslintrcやprettierrcは**不要**です。）

サーバーの起動は以下のコマンドで行います。

“`shell
deno run –allow-net=0.0.0.0:8000 –allow-read=. ./serve.ts
“`

ブラウザから http://localhost:8000/serve.ts にアクセスすると、serve.tsのファイルが見えているはずです。

以上、Denoで静的ファイルサ

Monaco Editorで、埋め込みエディタのコード変更イベントをリッスンする方法

VS codeのソースをもとにウェブブラウザー上で動くよう作成されたMonaco Editor。自身のウェブサイトにエディタを埋め込むことで、エンジニア向けサービス等はぐっとUI/UXが改善されます。

今回は、Monaco Editorで埋め込まれたエディタに対して、ユーザーがコードを書き込む等の変更を行ったイベントをリッスンする方法についてまとめます。Monaco Editorに関する基本的な使い方が分かっている前提で説明を進めるので、場合によっては[Monaco Editorの基本的な使い方](https://qiita.com/kyok01_japan/items/41c7ab287b2233bd4313)を事前に読んでいただくとよいかと思います。

https://qiita.com/kyok01_japan/items/41c7ab287b2233bd4313

## 前提
chrome（バージョン: 101.0.4951.67）
Monaco Editor version 0.33.0.

## 説明のために使用するサンプルコード

以下のようなサンプルコードのサイトを使

JavaScriptで雑にasync/awaitを使いたい

# 背景

こんにちは、最近Babylon.jsにハマっている[イワケン](https://twitter.com/iwaken71)です。
Babylon.jsはブラウザ上の3DCG表現を実装するためのJavaScriptのフレームワークなのですが、3Dモデルの読み込みなど非同期処理をしたいときがあります。

そんなときに、ベタに

“`js
var scene = await createScene();
“`

などと書くと「asyncで囲え！Top Levelに書くな！」的なことで怒られます (確か)

その時の対処法をメモしておきます。

# 解決策

“`js
(async ()=>{

//書きたいこと書く
var scene = await createScene();
//書きたいこと書く

})()
“`

なるほど、こうやってasyncで囲うことができるらしいです。

実際に使ったコードはこちら

https://github.com/iwaken71/babylonjs_webpack_template/blob/master/src/index.js

Monaco Editorの基本的な使い方

自身が作成したウェブサイト上に、ユーザーが自由に入力してコードの挙動を確かめることができるエディターを設置したい場合があるかと思います。その場合、最も基本的な方法はcontenteditable属性を用いることかと思いますが、この方法で実装するのはめちゃくちゃ骨が折れます。。。

ウェブサイトに埋め込めるエディターであるAceエディターやMonaco Editorを用いると、かなり楽です。

今回はVS codeのソースをもとにウェブブラウザー上で動くよう作成されたMonaco Editorの基本的な使い方を説明します。

画像は[マイクロソフトの公式のMonaco Editorページ](https://microsoft.github.io/monaco-editor/playground.html)より

## 前提
chrome（バージョン

フロントでのリロード対策どうしようか

### はじめに
フロント側のみでリロード対策をしなければならないときがありました

できればユーザーにリロードをさせないようにしたいのですが、完全にリロードを禁止するというのは無理そうかつ、こういったユーザーの行動を制限するのもあまりよくないみたい

とりあえず今回は、

– 幸い保持しておきたいデータが漏れても大丈夫なレベル
– データ量も少ない

という理由からlocalStorageで情報を保持することで対策しようと思いました。

### localStorageでリロード対策
全体の流れとしては、

– ページ読み込み時にリロードしたのかの判定
– リロード判定が必要な処理内でリロードの場合とそうでない場合で処理わける
– リロードじゃない場合：ローカルストレージにデータ保存
– リロードの場合ローカルストレージからデータ取得

まずはリロードの判定について、

“`javascript
let isReload = false

window.addEventListener(‘load’, () => {
const perfEntries = pe

RedGradient – Css Gradient Editor Release

RedGradient – Css Gradient Editor Release
https://red-gradient.com/

Bootstrap5でJavaScriptからモーダルを閉じる方法

### Vue.jsでモーダルを開いたままメソッドを発火させると、モーダルが閉じない事象が発生。

[Javascript から Bootstrap Modal を操作する](https://qiita.com/magic_xyz/items/01f38814ea8b0907ba49)
を参考に修正するが、Bootstrap5からJqueryが入っていないために純粋なJavascriptでコーディングすることとする。

“`
document.body.classList.remove(‘modal-open’)
const elements = document.getElementsByClassName(‘modal-backdrop’)
Array.prototype.forEach.call(elements, function (element) {
element.classList.remove(‘modal-backdrop’);
})
“`
これで問題なく動作するようになりました。

Rails × chart.js でサウナ活動(投稿)データに連動するラベル付きの円グラフを作ってみた。

# 0. はじめに

こんにちは、[まつけん](https://twitter.com/matsuken_web314)です。
[サウナ記録を管理するアプリ](https://totonoi.org/)(転職活動用のポートフォリオ)に組み込んだ
**投稿に連動する円グラフ**をどうやって実装したのかを解説する記事です。(下の画像参照)


↓ポートフォリオの解説記事です↓

https://qiita.com/matsuken314/items/2ae660c7635cca726283

## この記事のゴール（とりあえず）

– [chart.js](https://www.chartjs.org/docs/latest/)の円グラフがどういう風にWebアプリに組み込まれるのか分かる
– gemの

JavaScript クエリパラメータをエスケープ処理

## はじめに

クエリパラメータに、扱えないマルチバイト文字などが含まれる可能性がある場合は、
表記可能な文字列に変換するエスケープ処理が必要です。このような変換処理を「URIエンコード」と言います
方法は主に三つ。

# [encodeURI()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)
URIの予約文字以外の記号をエンコードするグローバル関数
decodeURI()で元の文字列に戻せます。

>エスケープされないもの:
>
> A-Z a-z 0-9 ; , / ? : @ & = + $ – _ . ! ~ * ‘ ( ) #

“`JavaScript
var set1 = “;,/?:@&=+$#”; // 予約文字
var set2 = “-_.!~*'()”; // 予約されていない記号
var set3 = “ABC abc 123”; // 英数字 + 空白

console.log(encodeURI(set1))

【JavaScript】【HTML】console.logの出力結果をブラウザ(Webページ)上に表示する方法

　スタックオーバーフローで「[console.logの出力結果をブラウザ上で表示したい](https://ja.stackoverflow.com/questions/88784/console-log%e3%81%ae%e5%87%ba%e5%8a%9b%e7%b5%90%e6%9e%9c%e3%82%92%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e4%b8%8a%e3%81%a7%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%9f%e3%81%84/88805#88805)」という質問に対して回答した内容をまとめたものです。
　console.logに対して、DOM操作でHTML上の要素を操作す関数式を代入することによって実現しました。サンプルコードは以下のものです。以下のコードはブラウザ上に1～100の数値を改行して出力します。
“`html