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

変数定義した配列を呼び出す時、存在しないインデックス番号だとどうなるか?

_コード_

“`
var coffee=[“moca”,”santos”];
console.log(coffee[1]);
console.log(coffee[7]);
“`

_出力_
santos
undefined

配列やオブジェクトも一緒で、存在しない要素を取得しようとすると
値が定義されていない（存在しない）という意味の「undefined」と出力されます
例えばif文で

_コード_

“`
if(coffee===undefined){
console.log(“品種は未設定です”);
}else{
console.log(coffee);
}
“`

_意味_
変数coffeeがundefinedの場合
「品種は未設定です」と出力
変数coffeeがundefinedではなかった場合
変数coffeeが出力される

このような記述をした際、このif文の条件式で使われている「undefined」は文字列ではないため、「”」で囲わなくてもよくなります。

ブラウザでディープコピーができるようになった

Chrome98 で `structuredClone`が来ました。
すでに Firefox では導入済みで、Safari もプレビュー版で導入されているので、近い将来にメジャーブラウザでディープコピーが簡単にできるようになりそうです。
[structuredClone API | Can I use… Support tables for HTML5, CSS3, etc](https://caniuse.com/mdn-api_structuredclone)

“`js
const original = {
x: 0,
arr: [1, 2],
}

// 共有渡し
const sharing = original
//「浅い」コピー
const shallowCopy = {…original}
// ディープコピー
const deepCopy = structuredClone(original)

original.x = “x”
original.arr[0] = “x”

console.log(original)
// {x:”x”, arr:[“x”

ChromeDevToolsでスクリプトを終了させる隠しコマンド

## はじめに

Chrome DevToolsのブレークポイントで一時停止したとき、再開ボタンしかないと思っていませんでした？


スクリプト実行を一時停止や再開ではなく終了させる方法を紹介します。

## 終了させる方法

結論から言えば、再開ボタンを長押ししてください。スクリプト実行を一時停止すると再開ボタンが現れますが、この再開ボタンを**長押し**すると下側に終了ボタンが現れます。

**終了ボタン**を選べばスクリプト実行が終了します[^1]。


終了ボタンはChrome 67（2018-05-2

js-cookieのパッケージをバージョンアップ(v3)したらgetJSON()が使えなくなっていた

v3から削除された見たいです。

https://github.com/js-cookie/js-cookie/releases/tag/v3.0.0

> Removed built-in JSON support, i.e. getJSON() and automatic stringifying in set(): use Cookies.set(‘foo’, JSON.stringify({ … })) and JSON.parse(Cookies.get(‘foo’)) instead.

組み込みオブジェクトメソッドを使いましょうとのことです。

“`before.ts
import { set, getJSON } from “js-cookie”;

// save json to cookie
const data = { /* なにかオブジェクトを */ };
set(JSON.stringify(‘some-key’, data));

// load json to cookie
const dataFromCookie = getJSON(key);
`

【備忘録】document.querySelector()をconsole.logしたときオブジェクトで見たかった

【備忘録】document.querySelector()をconsole.logしたときオブジェクトで見たかった

—

どうやら`console.dir()`でいいみたい
console君しっかり便利

—

“`html
…

…
“`

たとえばこんな要素を取得したいとき

“`javascript
const inputElement = document.querySelector(‘.target’);
“`

と書いてうんぬんかんぬんすると思うのですが
こいつを`console.log(inputElement)`すると

“`javascript

“`

こう返ってくるわけですね
まぁそれはいいんですがたまにざっとこの要素が持つ情報を見たいときWindowオブジェクトのように

“`javascript
Window {window: Window, self: Window, docum

(備忘録)Javascriptでのonclickの発火タイミング

Javascriptを書いていて、あれっ？ と思ったことがあったのでメモ。

“`html

展開する

“`

`

`タグがクリックされると`click`イベントを`onclick`で拾って、`parentNode`である`

`タグが`open`であるかを調べ、そうであるなら`

`の中身を「折りたたむ」に、そうでなければ「展開する」にするコードだが、実際にやってみると…

なんと、想定していたのと真逆

leafletを使って待ち合わせ場所を指定する

## はじめに

Leafletとは、Web地図サービスが使えるJavaScriptライブラリです。
利用できる地図は、GoogleマップやYahoo地図といった有名どころだけではなく、国土地理院といった学術的にしか利用されなさそうなお堅い地図まで幅広く利用できます。人に待ち合わせ場所知らせる場合、色々な方法で伝えることができます。自分がよく使う方法は次のやり方です。
①Googleマップで特定の位置を示したキャプチャを取りビットマップに張り付ける
②目的の場所をペンなどで印をつける
③PDFに変換する
このやり方でも悪くはないでしょう。しかし、JavaScriptでLeafletを使えば、もっと手軽に特定の場所を示すことができるようになります。しかも、緯度・経度を変更するだけで、使いまわしができるようになるといったメリットもあります。

## サンプルソースの解説

サンプルコードでは、JR米原駅を指定しています。

・divで地図の表示するエリアを作ります。styleをposition:absoluteにすると、ブラウザの画面全体に地図を表示することができます。
・Lealetを使

JavaScriptでLabelの値を取得する方法（初心者のつまずき）TextBoxの値が消える謎

##TextBoxをLabelに変えたところ、JavaScriptで値が取得できなくなった
getElementById(“txtDispYM”).valueという記述のままでは、
値が取得できずundifinedとなってしまった。
（TextBoxでは問題なかった）

##解決策
JavaScriptでの取得をInnerTextにした。
InnnerHTMLでもうまくいった。

やはり.Value .Textだと取得できませんでした。

“`javascript
//以下の記述でidがtestのlabelの値を取得できた。
if (!confirm(document.getElementById(“test”).innerText + ” の処理を実行します。よろしいですか？”))
“`

調べると、ClientIDMode=”Static”を指定するというのもありましたが、
私の場合は無しで大丈夫でした。
asp.netのバージョンによるのでしょうか、

##結論と参考サイト
getElementById(“test”).innerText にすればよいだけ。

https

YellowfinのNLQ(自然言語クエリ)をHTMLに埋め込む


#Yellowfinのバージョン9.7からNLQの機能を埋め込むことが可能に
Yellowfin9.7から自然言語クエリを使用してグラフを作成できるようになりました。

この機能自体も新しいのですが、これをそのままHTMLやその他のコンテンツにJavascriptを

Railsで画像を選択するとidが送られるフォームを作りたい(ラジオボタンを画像で選択させる)

# 概要
こんな感じのItemモデルへの投稿フォームの作りました。
画像を押すと選択され、もう一度押すと選択が解除されます。

投稿すると送られるパラメーター

“`
Parameters: {“item”=>{“title”=>”青い玉”, “ball_id”=>”2”}, “commit”=>”投稿”}
“`

# 各モデルの構成

#### Itemモデル
タイトルとball_idを登録するテーブルです。

`belongs_to :ball`

#### Bollモデル
３種類のボールが画像と共に既にデータベースに登録済みとします。

`has_many :items`

| ID | NAME | IMAGE |
|:———–|—–

【Harmoware-VIS】随時更新データを再生する方法（v1.8～サポート）

#Harmoware-VIS とは

https://qiita.com/ucl_Harmoware_VIS/items/e861e0f651ffde647b6a

#随時更新データを再生する方法
Harmoware-VIS を使用して移動体のリアルタイムの位置情報などを可視化する方法を解説します。
この機能は Harmoware-VIS のバージョン1.8.x以降でサポートします。
##処理イメージ

##各インターフェース

###setLocationData
Harmoware-VISの関数です。随時更新データを登録＆更新します。
Harmoware-VIS内でidを識別して、新規idは「追加」し、既存idは「更新」します。

“`json-doc
{ // 随時更新データのフォーマット例
id: ‘xxxx

ReactでQRコードを表示したいというお話

#はじめに

なんか最近ハードウェアとソフトウェア両方ともやってて雑食となりつつある今日この頃。
AWS資格、せめてCRFくらいは取りたいなぁと思いつつ最近はReactで色々やっております。

さて、今回はReact内でQRコードを表示しようとした際にちょっとした事があったので、折角なので新しい物を導入した雑感を記録していこうかと思います。

#開発環境
– AWS EC2 t2.microインスタンス
– Amazon Linux 2 ＋ Cloud9
– Node.js 16.11.1
– React 17.0.2

#事の発端
Webアプリケーションを作っていると、どうしても必要な物というのは色々出てくる。
その中で、2段階認証(俗に言うTOTP)が必要な段階になった。
あまり予算を使いたくない都合上SMSを使った認証は却下して、QRコードとAuthenticatorを利用した仕組みを導入しようとしました。
で、さー`qrcode.react`も導入したし、いざQRコードを表示！ってなった時にこんなエラーが出た訳です。

“`
Warning: componentWillRec

Flask-Bootstrap でDataTables使おうとしてハマったのでメモ

# 環境
Python 3.8.10
Flask
Flask-boostrap

# 問題
Flask-boostrapに入っているboostrap4を用いて、DataTablesを使ってテーブルデータを表示させようとしたらなぜか反映できず

https://datatables.net/

# 原因
javascript読み込みのコードを bodyタグの内に書いていたこと
例： {% block content %}や{% block scripts %} 内に書くとエラーが出る

# 解決
*javascript読み込みコードをheadタグ内に入れたら解決*

## 考察
おそらくFlask-boostrapは一般的なhtmlファイルとロードの順序とは異なる仕様であるためかと思われる

## 参考
https://qiita.com/shinataka/items/73f150846e5dc7894dd5

Nuxt と TypeScript で Google Maps を表示する (Maps JavaScript API, Places API)

# はじめに

Nuxt.jsでライブラリ(vue2-google-mapsなど)は使わずにGoogle Mapsを表示してみます
作りたい地図はこんな感じで、マーカーをつけてみます
地図からはわからないですが、地図とマーカーにそれぞれマウスクリックイベントもつけてみます

## ここに書いてあること

* Nuxt/VueでGoogle Mapsを表示する方法
* Maps JavaScript APIとPlaces APIの使い方
* 地図とマーカーのクリックイベント登録方法
* マーカーにカスタムIDをつける方法

## 環境

* macOS Monterey
* VS Code Version: 1.63.2

“`zsh
$ npm -v
6.14.15

$ node -v
v14.15.4
“`

“`json:packa

anyenv/envs/nodenv/node.jsの環境構築

## 事前知識
| 単語 | 意味 |
|:———–|:————|
| node.js　|V8 JavaScriptエンジン上に構築されたJavaScript実行環境の1つ|
| nodenv|プロジェクト(ディレクトリ)ごとに、Node.jsのバージョンを管理することができるバージョン管理ツール|
| anyenv|**env系ツールのバージョンを管理することができるバージョン管理ツール|

とまあ、node.jsのハージョンを管理するためにnodenvを使って、そのnodenvのバージョンを管理するのにanyenvを使うという感じです。。

## 環境
macOS Montery バージョン 12.1 (2022年2月2日現在)

## コマンド表
### anyenv
| コマンド | 内容 |
|:———–|:————|
| anyenv envs　| インストールされている**env一覧|
| anyenv version|**envごとのシェルにおける実行環境|
| anyenv version|**envごとのイ

HTML+JavaScript で Unicode 文字表

Unicode の何処にどんな文字が入っているのか確認するための HTML+JavaScript です。

静的な HTML ファイルを作ると、サイズが巨大になってしまうため、JavaScript で動的にテーブルを生成します。

以下、スクリーンショットです。


—

:::note info
「更新」をクリック後にブラウザが暫く応答しないことがあります。
:::

動作確認は

　　Google Chrome
　　バージョン: 97.0.4692.99（Official Build） （x86_64）

で行っています。

“`html:viewer.html



「JavaScript＝非同期言語」は間違い？

##１．基本は同期処理

「javascriptは非同期言語だ」「時間のかかる処理は後回しになる」と書かれた記事をいくつか目にしたことが有る。
自分も以前はそんな感じの認識を持っていた。

しかし、非同期言語かどうかはともかく、「時間のかかる処理は後回しになる」は明確に間違いだ。
基本的には時間のかかる処理であっても同期処理（上から順に処理）される。
例として以下のコードを見て欲しい。

“`javascript
console.log(“while前”)
start = Date.now()
while(true){
if( Date.now() – start > 3000){
console.log(“3秒経過”);
break;
}
}
console.log(“while後”)

//”while前”
//”3秒経過”
//”while後”
“`
上記コードを実際に実行するとコンソールには以下の順で表示される。

・while前
・3秒経過
・while後

3秒もかかるwhileの処理を待ってから、`console.log(“while終了後”)

ウェブサイト作成用備忘録・２２号：ローディングアニメーションの疑問点について

今回も他のwebサイトのソースコードを読み取っている時に感じた疑問点について備忘録として記録しておこうと思います。

webページを開いた時、画像や動画を読み込んでからwebページの表示を行う為に、ローディングアニメーションを実装しているサイトが多いのですが、自分が見つけたソースコードはこのような内容でした。

“`html

“`

当時の自分はローディングアニメーションの事を

**ページ内のコンテンツが全て読み込まれた状態でないと閲覧者にサイト内のコンテンツをしっかりアピールできない大掛かりなサイトに実装するもの**

だと思っていました。

なので、

【progate】javaScriptレッスンの備忘録

## 初めに
progateのjavaScriptレッスンをやりました。メモとしてやった内容をまとめておきます。

## 内容
### コンソール
console.log()のかっこの中身をコンソールに出力する。

“`javascript
//Hello Worldを出力
console.log(“Hello World”);
console.log(‘Hello World’);

//3と出力
console.log(3);

//1と出力
console.log(3-2);

//35と出力
console.log(“3″+”5”);
“`

### 変数
変数宣言し、変数は再代入できる。

“`javascript
let name = “sato”;
“`

### 定数
定数宣言すると、再代入が不可能になる。

“`javascript
const name = “sato”;
“`

### テンプレートリテラル
連結は「＋」を用いる以外の方法もある。

“`javascript
const name = “sato”;

//こんにちは、satoさんと出

Webの勉強はじめてみた その27〜モジュールごとの実装とデータベース〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第3章20節〜26節です。
承認されたユーザーだけが使える匿名掲示板の作成。
気をつけたい箇所や気付いた点だけをまとめました。

設計の進め方

1. システム要件の定義
2. UIの設計: ページに何をどう配置するか
3. URIの設計: パスの作り方(RESTful)
4. モジュールの設計

URIとモジュール

:::note
リクエストを具体的な処理に振り分けることをルーティング、
リクエストに対し具体的な処理をする関数を リクエストハンドラという
:::

サーバーを起動するもの
リクエストを処理するもの
ルーティングを行うもの

など、それぞれ役割を決めて実装する。
メインとなる機能から実装していくのが良い。
処理を実装する前にそれぞれの機能などをコメントする。

覚えておきたいこと

:::note
テンプレートエンジンなどを使う場合、のちにhtmlになるものはviewsディレクトリに格納する。
:::

以下はPOSTされた時の処理

“`java