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

リファクタ目的のVue + Storybook で Injectが便利

前回 Vue + Storybook + reg-suit で　VisualRegressionTestのフレームワークを構築しました。
https://qiita.com/kozayupapa/items/0099cea005b3ce0b6274

そのstoryを拡充していきたいと思います。

## 何がしたい？
前提としては、今回StorybookのStoryを追加したいのは、　リファクタリングが必要なくらいvueのcomponent,ページが巨大になってしまっているケースです。すべての変数がpage のdataとして定義されているような例です。

prop になっていれば、storyからのテストデータ設定も楽なのですが、
dataのなかみをtest story側から好きな値に書き換える方法がないかを検討していました。

## Vue Provide/Injectとは？
地道にvueのドキュメントを読み進んでいたら、良さそうなものがありました。
離れた階層からでも提供でき、　どこから挿入されたかは指揮せずに Inject されたあとのコードを受け側に追加すれば良い。ほしかったのは

Rails6でJavaScriptの動的読み込み

## 実現したいこと
JavaScript内からDB内のデータを動的に読み込みたい✅

## 開発環境
Rails６系
Ruby３系

アプリ：[Muscle Beat](https://www.muscle-beat.com)（スマホ専用筋トレ系音ゲー）
[GitHub](https://github.com/jibiking/muscle_beat)
テーブル（例）↓
[](https://gyazo.com/a0eef96b76e54d3df43a1c5255f5566e)

## 結論
view内の“`scriptタグ“`に“`erbタグ“`を用いて動的に読み込ませたいJSを記載します！

たしかにRails６系のJavaScriptの記述は“`app/javascript/packs“`以下にするのが通常です。
しかし上記pack

Railsでphina.jsの動的読み込み

## 実現したいこと
バックエンド（Rails)から保存したDB内のデータを呼び出して、動的にフロント（phina.js）に入れて、ゲームをプレイできるようにする✅

[phina.jsとは](https://phinajs.com/)：ゲームを簡単に作ることのできるJavaScriptのライブラリ

## 開発環境
Rails６系
Ruby３系
phina.js 0.2.3（CDN）
アプリ：[Muscle Beat](https://www.muscle-beat.com)（スマホ専用筋トレ系音ゲー）
[GitHub](https://github.com/jibiking/muscle_beat)
テーブル（例）↓
[](https://gyazo.com/a0eef96b76e54d3df43a1c5255f5566e)

## 1. viewでphina.jsの環境構築
ゲームプレイ画面を作成するvi

Node.js のフレームワークの Fastify と WebSocket を利用可能にする fastify-websocket を軽く触ってみる

以下の記事を書いた時などに見かけた「[Fastify](https://github.com/fastify/fastify)」が気になって、情報を少し見てみたり、試してみたというものです。
Fastify だけでなく、関連して出てきた fastify-websocket も気になったので、合わせて見てみました。

●Socket.IO の最新版 4.x の情報を見てみる（2022年3月） – Qiita
　https://qiita.com/youtoy/items/c57158f4a08e478dff57

公式の GitHubリポジトリは、以下になるようです。

– [fastify/fastify: Fast and low overhead web framework, for Node.js](https://github.com/fastify/fastify)
– [fastify/fastify-websocket: basic websocket support for fastify](https://github.com/fastify/fastify-webs

HTMLのファイルに関するAPIの最新の事情

# はじめに

　いくつかのウェブアプリを現在制作中である。いずれもファイルを扱うものなので、ファイルに関するAPIが必須である。
　自分のこれまでの知識としては、HTML5と言われてた頃のFile APIやA要素による擬似的な保存テクニックくらいしか知らなかった。
　ふとGoogle のブログを眺めていたら、**FileSystemAccess API** なる、気になるAPIがすでに実装されているとのことで調べてみた。本記事はその忘備録としてまとめたものである。

## 参考

[The File System Access API: simplifying access to local files](https://web.dev/file-system-access/)
[MDN – File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)
[MDN – window.showOpenFilePicker](https://developer

Socket.IO の最新版 4.x の情報を見てみる（2022年3月）

2013年か2014年くらいに初めてさわった気がする「[Socket.IO](https://socket.io/)」。
最近は、リアルタイム通信系は WebSocket を直接扱ったり、MQTT を使ったりという感じで、Socket.IO を使わなくなっていました。

そして、いつのまにかメジャーバージョンアップが複数回行われて、現在は 4.x になっている状況。

●Socket.IO
　https://socket.io/

それで、久しぶりに最新版の Socket.IO を軽く使ってみようと思って、この記事の内容をやってみました。

## 公式の最新情報を見てみる
Socket.IO は、リアルタイム通信をするための仕組みを提供しており、サーバ側とクライアント側のそれぞれの仕組みを提供しています。

### 対応言語（サーバ側とクライアント側）
[Socket.IO公式の「Introduction」のページ（v4 のもの）](https://socket.io/docs/v4/)で、サーバ・クライアント用として提供されている仕組みの最新の状況を確認してみます。
![サーバ・ク

Google Formsの回答をFetch APIでPOSTする

Google Formsを自作のデザインで使うときのTIPSです。

ネットで見かけるのはformタグに送信先、inputタグにnameを指定する以下のような方法。

“`html

“`

ページが遷移してしまうのが少しイマイチなので、Fetch APIで送信する方法を考えました。
[このサイト](https://mattgreer.dev/blog/using-google-drive-for-form-submissions/)にもっと詳しく説明している方がいたので、合わせてご参考になさってください。

—

Google Formsの作成方法を一通り知っている前提で話しています。

[TypeScript]インデックスシグネチャで感覚的には理解できなかったことまとめ

## 概要
TypeScriptについて学んでいて、インデックスシグネチャに関して感覚的には挙動が理解できなかったので、調べたことを備忘として記録しておくもの。
コード例は基本的にTypeScript Handbookから引用し、一部は自分で書いています。

## 参考資料
[Udemy-Understanding TypeScript 日本語版](https://www.udemy.com/course/understanding-typescript-jp/)
[TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/2/objects.html#index-signatures)

## インデックスシグネチャとは
TSで、プロパティの具体名は指定せず、型だけを指定して定義を行う記法。
stringかnumber型のみ指定できる。以下はnumberの例
“`typescript
interface StringArray {
[index: number]: string;
}
// ↑数値の明示

JavaScript JSON.stringify() JSON.parse()


# JavaScript オブジェクトをJSON形式に変換する方法

“`javascript:index.js

// まずローカルストレージをクリアにする
localStorage.clear();

// オブジェクトを生成
const object = {
name: “mario”,
age: 12,
}

// コンソールに表示
console.log(object)

// JavaScriptオブジェクトをそのままローカルストレージに保存
localStorage.setItem(“example1”, object)

// JavaScriptオブジェクトをJSON形式にして保存
localStorage.setItem(“example2”, JSON.str

VSCodeで使える便利ショートカット

# VSCode　便利コマンド　
※Macのみです

##### すべてのファイルから文字列を検索
“`[Ctrl] + [Shift] + [F]“`

##### ファイル検索
“`[Command] + [P]“`

忘れないようにしていきたい所存です。

【Rails 6】片方の選択によってもう片方のオプションの値が変化する動的なセレクトボックスを作る

## 概要

タイトル通りのものを作ります。文字だけだとわかりにくかったら、次の完成イメージを見てください。

## 完成イメージ


## 仕様

– Ruby 3
– Rails 6
– MySQL 5.7
– Bootstrap 5
– Docker

※ Bootstrap はバージョン5から JQuery が不要になり導入方法が少し変わったのでご注意ください。

## 下準備

まず最初に下準備から始めていきます。

### 各種ディレクトリ & ファイルを作成

“`
$ mkdir rails-dynamic-selectbox && cd rails-dynamic-selectbox
$ touch Dockerfile docker-compose.yml entrypoint.sh Gemfile Gemfile.loc

Node.jsとは【個人的なお勉強アウトプット】

# Node.jsとは
javascriptの実行環境。
javascriptは元々実行環境がブラウザ（クライアント）だった。
パソコン（OS等の中枢）にはアクセスできない。
なぜなら、ユーザーがブラウザからパソコンにアクセスできると、良くないことが多いから。
(GoogleのWeb会議ツールmeet等、ブラウザからカメラやマイクを使う時はダイアログを表示してOSへのアクセスをユーザーに選択させているから安心。)
そんなブラウザ上でしか動かなかったjavascriptをパソコン上で動かせるようにしてくれるのがNode.js。

# なぜみんなNode.jsをつかっているのか
## Babelを動かす実行環境として
javascriptは人口も多く若い層も多く進化がめざましい。
ES2015やTypeScriptなど新しい書き方もでてきてる。
ただ、javascriptの進化にブラウザがついていけず、ブラウザでは動かないことがある。
そのためBabelというコンパイルツールをつかってES2015やTypeScriptを旧法にコンパイルしてブラウザで動くようにしてくれる。
Babelの実行

居場所をみんなに知らせる。（失敗編）

:::note warn
本記事は最終的に思い通りに動作しませんでしたという失敗編です。
他の人が同じミスをしないように公開しております。
:::

# 前書き
1月末にRSコンポーネンツを見ていたら、Raspberry pi4b メモリ8Gが納品(2/2)になっていたのですぐに注文したのですが、2回の納期変更があり、現在は3/28到着予定になっています。jetson miniも定価で売っていないし、残念です。
無事に到着したら、色々やってみたいと思います。

前回の記事[LINE BOT経由でRaspberry Piに接続したUSBカメラの画像を取得してみる](https://www.diagrams.net/”https://www.diagrams.net/”)に引き続き、何か家族の役に立つことを考えて、家族に私がどこにいるのか知らせる機能を実装することにしました。

ご指摘・ご質問あれば、コメントいただければと思います。

# 結論（失敗した理由）
これは、フロントエンド開発している人だと常識なんでしょうけども、Webブラウザで画面が表示されている時しかJavaScriptっ

環境変数をファイルで扱う env-cmd をローカルインストールで利用してみる（-f オプションでの利用）

環境変数を扱うようなパッケージで、[dotenv](https://www.npmjs.com/package/dotenv) などがありますが、自分は使ったことのない「env-cmd」というのを見かけて、それを試してみました。

●env-cmd – npm
　https://www.npmjs.com/package/env-cmd

●toddbluhm/env-cmd: Setting environment variables from a file
　https://github.com/toddbluhm/env-cmd

## サクッと試す
まずは、 `$ npm i env-cmd` というコマンドで env-cmd をローカルインストールします。

そして、ここで Node.js で環境変数を出力する以下のプログラムを動かしてみて、env-cmd を使わなかった場合にデフォルトで読み込める環境変数を確認してみます。以下を nodeコマンドで実行してみると、ご自身の環境の環境変数が出力されると思います。

“`javascript
console.log(proce

現在地の標高を取得する(JavaScript)

# ブラウザ上で現在地の標高を知りたい。

すでに標高を知ることができるアプリなどもありますが、オリジナルアプリ作成で
標高データ取得が必要なので調べました。

# GeolocationAPIで現在地の取得
GeolocationAPIはJavaScriptのAPIです。
位置情報、IPアドレス、WiFiなどの情報から現在地を取得します。

“`javascript:
function test() {
navigator.geolocation.getCurrentPosition(test2);
}
“`

getCurrentPosition()でデータの取得に成功すると引数のtest2()が実行されます。

“`javascript:
f

【Javascript】2種類の方法でAPIを叩いてみた。（async/then）

# 初めに
javascriptでAPIを叩いてみた。非同期通信が難しかったが、なんとか完全に理解したので、サンプルコードを残しておく。

非同期通信とは、通常のスクリプトでの常識である「上から順に処理を行う」を逸脱した通信のこと。考慮しないと変数にまだ何も入っていないのに、次の処理が行われてしまう可能性がある。
そこで、「awat」や「then」を用いて処理を待つ。
※非同期通信にはユーザーの待ち時間を減らすメリットがある。

## 環境
– MacOS 12.0.1
– Google Chrome 99.0
– APIはJSONで帰ってくる想定

# サンプルコード
### asyncを使用した例
“`javascript:async_api.js
//async awaitの例
const url = “アクセスしたいURL”;
async function call_api(url) {
const request = await fetch(url);
const json_data = await request.json();
//JSONを受け取っ

初めて、他人のソースをレビューして気づいたこと

三項演算子

ソースは短くなるが、すべてを三項演算子にするのはよくない

この記事を参考にレビューした

https://qiita.com/smicle/items/7d3b9881834dc0142fb7

“`javascript
if (a) {
b(0, 0);
} else {
b(1, 0);
}

const code = a ? 0 : 1;
b(code, 0);
“`

大小判定

“`javascript
if(this.zoom > 0) {
this.zoom -= 10;
}
if(this.zoom < 50) { this.zoom = 50; } ``` マイナス10ずつ引いて行って、50以下にはならないというプログラムである まずいらない分岐は消す ```javascript this.zoom -= 10; if(this.zoom < 50) { this.zoom = 50; } ``` これは関数が用意されている ```javascript this.zoo

Next.jsでNotion APIを使った

と
• の取り扱い【notion-blog-nextjs】

# やること

– `notion-blog-nextjs` を元にして
– `

` を `

` で囲み
– Notionと表記を(だいたい)同期させる
– …あっ、CSSは `tailwind` で書いていきます

# `notion-blog-nextjs`を導入する

– Githubに公開されている `samuelkraft / notion-blog-nextjs`を
– 好きなフォルダに `clone` して
– 該当ディレクトリに `cd ~` して
– `npm install` してパッケージをインストールして
– `npm run dev` で動かせます
– あとは `.env.local` にいろいろ書けば自分のNotionのデータを参照させられます。

詳しくは以下リポジトリのREADMEを参考にしてください。

[https://github.com/samuelkraft/notion-blog-nextjs](https://github.com/samuelkraft/notion-blog-nextjs)

# `notion-blog-n

WordPressプラグイン「Snow Monkey Forms」に日付選択を実装する手順

「Snow Monkey Forms」はWordPressにメールフォームを実装するプラグインです。

Snow Monkey Forms

「MW WP Form」の実質の後継プラグインで、WordPressのブロックエディタに完全対応しているため乗り換えたいところですが、機能面は簡素化されています。

https://plugins.2inc.org/mw-wp-form/

要望が多そうな「日付選択」を実装する手順をまとめておきます。npmやwebpackを使用できない（JavaScriptがほとんど書けない）人向けにも補足しておきます。

## フォームの設定


日付を選択する場合、だいたいは「第一希望」「第二希望」を入

Vue.jsでトランジションの内容を特定イベント時にのみ変更する

v-ifもしくはv-showで要素の表示切替を制御している場合、それをtransitionラッパーコンポーネントで囲みクラスを調整すると簡単にアニメーションが実装できる。

ただ、特定の操作でのみ要素をアニメーションさせたい場合、つまり、他の操作による要素の表示切替ではアニメーションさせたくない場合は少し工夫が必要になる。

“`test.js
new Vue({
el: ‘#app’,
data: {
accBtnFlg : false,
navToggle : false,
navAnime : ‘toggle-no-anime’
},…
methods: {
toFalseAccFlg : function(){
this.accBtnFlg = false;
},
toggleAcc: function(e){
this.navToggle = !this.navToggle;
this.accBtnFlg = true;