f@ctor

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

JavaScript関連のことを調べてみた2021年11月10日
目次

JavaScriptのバイナリー文字列について

JavaScriptで atob と btoa を使用する際に扱う「バイナリー文字列」、Base64との関係も含めてしっかり理解できていなかったため覚え書き。

# バイナリー文字列(Binary strings)とは？
1. 要するにcharCodeAtで0-255の範囲の値を返す文字コードだけを含む文字列(string)の事
1. 制御コード等も含むため文字としてはまともに表示できない
1. ECMAScriptの言語仕様に特にそういう概念は無い(atob, btoaはブラウザAPI)
1. TypedArray以前にバイナリを扱うために利用されていた

(ref.) [バイナリー文字列 – Web API | MDN] (https://developer.mozilla.org/ja/docs/Web/API/DOMString/Binary)

# atob と btoa のする事
* btoaはバイナリー文字列(0-255)をBase64文字列へ変換する
* atobはBase64文字列をバイナリー文字列(0-255)へ変換する
* btoa に0-255範囲外の文字を入

元記事を表示

yahoo!広告排除Bookmarklet [個人的メモ]

“`javascript
javascript:((list=[],f=s=>document.querySelectorAll(s).forEach(e=>e.remove()))=>list.forEach(f))([“[class*=yads]”,”iframe:not([class*=comment])”,”[data-rma-viewable]”,”[class^=’yjad’]”,”[class^=’yad’]”,”[class^=’yjdad’]”])
“`

元記事を表示

警告付き飲酒量＆お会計記録Webアプリ！ #Bootstrap #codepen #javascript #html

#もっと酒の種類増やせ。自分じゃ制御できないから警告して
はい。そうです。これは前回作成したWebアプリを使ってみた友人の感想（笑）
酒におぼれた彼女の姿を想像してやってください。

https://qiita.com/chihirokubota/items/a3ad831f59d1467ad1ac

#警告を追加＆デザインをポップに
今回はそんな酒飲み友人の声を受けて以下の改良を行いました。

https://amazing-banach-c7d875.netlify.app

①酒の種類を増やした。

②10杯以上は警告メッセージを入力する度に表示。

③デザインを黄色ベースのポップな感じにしてみた。

#酒の危険さは一律ではない
こだわりポイントとしては、***危険なお酒を赤いボタンで設置***したこと。
押すときにヤバい！となることを狙っている。

そして警告メッセージは何度も表示されることで、鬱陶しい感じ＆各々の「痛い目」を想像させる狙いだ。

元記事を表示

【JavaScript】反復処理③　for…ofと反復可能性

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/b28d5f9e58a3b065dad3

#目的

* 反復処理についての理解を深める

#本題
###1.for…ofと反復可能性

**for…of**とはイテレーターを持つオブジェクトの反復操作を行う

**イテレーター**とは反復操作を行うときに使うオブジェクトのこと
→反復可能オブジェクト

“`ex.
String,Array,Map,Set,arguments etc….
““`

####例1

基本的な使い方

““js
// 配列を定義
const array = [‘a’, ‘b’, ‘c’];
// for…ofを定義
// vの値に配列で格納されている値が渡ってくる
for(let v of array){
// a b cと出力

元記事を表示

身の回りの振動デバイスを一括制御して””シナスタジア””を得る

# なにをやったの

身の回りの振動デバイス (ゲームのコントローラーなど) を PC から一括制御して、手軽に””シナスタジア””を得られないか試してみました。

おまけで映画などのコンテンツに振動を連動させる実験もしてみました。

手持ちの Joy-Con などで手軽に試せるので、よかったら遊んでみてください。

実装的には、ブラウザから周辺機器に直接コマンドを送る WebUSB, WebHID などの実験的な技術を使ってみたので、そのあたりの話もします。

# シナスタジア？？

「シナスタジア」は「共感覚」という意味の英単語ですが、ここでは「スペースチャンネル５」などでお馴染みのゲームプロデューサー (アーティスト？) [水口氏](https://ja.wikipedia.org/wiki/%E6%B0%B4%E5%8F%A3%E5%93%B2%E4%B9%9F) の提唱する「シナスタジア」を指します。

氏はプレーヤーの操作、光の演出、音楽、振動などが絶妙にシンクロすることで得られる独特のキモチ良さ、トリップ感 (意訳) をコンセプトにしたゲームを多く作っていて、この体験を「

元記事を表示

Reactで無限スクロールを実装する

Intersection ObserverAPIを使用して、無限スクロールを実装します。
取得するAPIはTMDBというものを使用します。

### Intersection ObserverAPIとは
簡単に言うと、ユーザーが画面上をスクロールなどした時、特定の要素が、ブラウザ上の表示されている領域に対してどの位置にあるかを監視して教えてくれる機能を持っている交差監視APIです。

下記が詳しいです
https://ics.media/entry/190902/

### API取得のロジック
“`
import { useEffect, useState } from ‘react’
import axios from ‘axios’

export default function SearchMovies(query: any, pageNumber: any) {
const [loading, setLoading] = useState(true) // ローディングの判定
const [error, setError] = useState

元記事を表示

React&Electronでホットリロードができるソフト開発の環境構築をする

# はじめに
Reactを用いてElectron開発をしようとして記事を漁ったがうまく動かない参考記事もあったのでここに自分のメモも兼ねて記事を書こうと思う。

Reactの構築はめんどくさそうだったので(そもそもreact初心者)[create-react-app](https://www.netlify.com/with/react/?utm_source=google&utm_medium=paid_search&utm_campaign=12755510808&adgroup=118788141977&utm_term=create%20react%20app&utm_content=kwd-316081035100&creative=514583566059&device=c&matchtype=e&location=1009415&gclid=CjwKCAiA1aiMBhAUEiwACw25MSbOPOeH89lKV8QDG0sFH1S3DvNhleyHvMpJ8DB4iOOOjHNMsksVkhoCBfwQAvD_BwE)を使用して構築することにする。主に次のことを備えた

元記事を表示

【Vue.js】キー修飾子

#はじめに
こんにちは！
今回は【Vue.js】キー修飾子についてアウトプットしていきます！

#キー修飾子とは
キーイベントをフックに、特定のキーボードのキーを指定することができそれが押された時のみ、記述したイベントハンドラを呼び起こすことができる。

#書き方・解説
今回は`escキー`が押されたらテキスト内の文字が空になるプログラムを記述していきます。

“`HTML:HTML

　　　　　　　　　　　 　　
“`
“`Vue.js
data: {
message: ”
},
methods: {
clear: function() {
this.message = ”
}
}
“`
dataに空のmessageを用意し、clearメソッドでmessageの中身を空に

元記事を表示

JavaScript DOM操作⑥ 「ノードの追加」

#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/cae92b97899b1e9a7996#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2.ノードとは？](https://qiita.com/Stack_up_Rising/items/cae92b97899b1e9a7996#2-%E3%83%8E%E3%83%BC%E3%83%89%E3%81%A8%E3%81%AF
)
[3.ノードの追加](https://qiita.com/Stack_up_Rising/items/cae92b97899b1e9a7996#3-%E3%83%8E%E3%83%BC%E3%83%89%E3%81%AE%E8%BF%BD%E5%8A%A0
)
[4.例題](https://qiita.com/Stack_up_Rising/items/cae92b97899b1e9a7996#4-%E4%BE%8B%E9%A1%8C
)
[5.おわりに](https://qiita.com/Stack_up_Risin

元記事を表示

お菓子辞典（改）～お菓子様降臨しました～ #HTML #WebSpeechAPI

#お菓子様を降臨させたい
LINE Botから続くお菓子プロジェクトの第三弾として、ついにお菓子様を画面上に呼びたいと思います:lollipop::angel_tone1:
ただ単純にお菓子をピックアップするだけでなく、ピックアップしたお菓子を読み上げられたら、文字が読めない小さい子供も楽しめるはず！
また、前回より機能をWebアプリに変更しているため、PCもスマホも楽しめる仕様にしました。

＜前回記事＞

https://qiita.com/ikumi623/items/be75e4e7ae24f24c7835

#お菓子辞典（改）のご紹介

https://lucid-pike-7bf1cd.netlify.app/

#作り方
##環境
・CodePen
・Netlify
・[背景](https://tipsy.github.io/bubbly-bg/)
　 [→使い方](https://www.webcreatorbox.com/tech/javascript

元記事を表示

ReactでHello worldを表示してみる

①コマンドプロンプトでcreate-react-app helloworld を実行し、プロジェクトを作成する。
→プロジェクト名は全て小文字でないとエラーが出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2266054/9b9fc3ee-2cb2-bbea-93b5-5b31aeec79de.png)

②先ほど作成したhelloworldというプロジェクトに移動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2266054/2f57467f-a049-1d71-d9de-b26e60645f1e.png)

③src配下のApp.jsを以下のように書き換え保存する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2266054/38f93835-fdcd-7b80-e6f

元記事を表示

JavaScript DOM操作⑤ 「class属性をキーに要素を取得」

#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/d3844a46b78fe821db0d#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2.getElementsByClassName](https://qiita.com/Stack_up_Rising/items/d3844a46b78fe821db0d#2-getelementsbyclassname
)
[3.どうやって書くの？](https://qiita.com/Stack_up_Rising/items/d3844a46b78fe821db0d#3-%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%A6%E6%9B%B8%E3%81%8F%E3%81%AE
)
[4.例題](https://qiita.com/Stack_up_Rising/items/d3844a46b78fe821db0d#4-%E4%BE%8B%E9%A1%8C)
[5.おわりに](https://qiita.com/S

元記事を表示

jQueryを使わずにBootstrapのモーダルを動的に表示させる

### 結論
こんな感じで書いてください。

“`HTML:index.html

“`

### おまけ
Bootstrapの動的な操作を書いている記事がjQueryを使っているものばかりだったので記事を書きました。
最近BootstrapはjQueryへの依存がなくなり、ネイティブのJavaScriptでほとんどの動作ができるようになったみたいですね。

### 参考
https://getbootstrap.jp/docs/5.0/components/modal/#via-javascript

元記事を表示

【ポエム】Android6.0のタブレットでSlackが見たい

この記事は、誰にも役にたたない内容なのでポエムです。

## ０．初めに

私は、以下の理由で未だにAndroid6.0の8インチタブレットを使ってます。

* そもそも貧乏
* 最近、8インチの良いAndroidタブレットが発売されない
* 電車の中でSlackの特定チャンネルの投稿が見たいし、投稿もしたい

SlackはAndroidアプリもあるので、それで見ていたのですが、先月(2021年10月）からアプリが利用できなくなりました。

どうも、Slackのサポート期間を過ぎたため、みたいでした。

[オペレーティングシステム、アプリのバージョン、ブラウザに対する Slack のサポートライフサイクル | Slack](https://slack.com/intl/ja-jp/help/articles/1500001836081-%E3%82%AA%E3%83%9A%E3%83%AC%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%80%81%E3%82%A2%

元記事を表示

plunkerでieee754 その2

#概要

plunkerでieee754やってみた。
dataview使って、浮動小数点と整数を変換してみた。

#サンプルコード

“`
var src = document.getElementById(“src”);
var out = document.getElementById(“out”);

function h2b(str) {
var buffer = new ArrayBuffer(4);
var bytes = new Uint8Array(buffer);
var v = new DataView(buffer);
bytes[0] = parseInt(str[0] + str[1], 16);
bytes[1] = parseInt(str[2] + str[3], 16);
bytes[2] = parseInt(str[4] + str[5], 16);
bytes[3] = parseInt(str[6] + str[7], 16);
return v.getFloat32(0);
}
function h2

元記事を表示

気象庁の天気予報JSONデータをGoogle Apps Scriptで使うためのライブラリーを作ったよ

気象庁が提供する天気予報データ（JSON形式）を、Google Apps Scriptで利用できるようにしました。

地域を指定すれば、直近3日間と、1週間の天気予報をそれぞれ取得できます。地域の指定には、文末に掲載したエリアコードを使います。

元のデータ構造がかなりクセが強いので、利用しやすいように変換しているのが特長です。

出典元が気象庁ホームページであることを示せば、商用利用もできるそうです。

> ご利用上の注意事項（出典：気象庁ホームページ）
> https://www.data.jma.go.jp/developer/ryuui.pdf

# 事前準備

Google Apps Scriptのライブラリーとして公開しました。
Script ID “`1AbYCEz2JpHu58yKf15_wcSXEC55xrHO9-XyYuovxRM3IVRCsx44k1bo5“` です。スクリプトエディターの左ペイン Library の +（プラス）を押して Script IDを入力し、“`WeatherForecast“` として追加してください。

![image.png

元記事を表示

plunkerでieee754

#概要

plunkerでieee754やってみた。
dataview使わないで、浮動小数点(binary32)に変換、その逆も。

#使用したライブラリー

https://github.com/jarvma18/js-ieee754

#サンプルコード

“`
var out = document.getElementById(“out”);
var src = document.getElementById(“src”);
var out2 = document.getElementById(“out2”);
function run0() {
var val = src.value;
out.value = getPrecision(val);
}
function run1() {
var val = out.value;
out2.value = getDecimal(val);
}

“`

#成果物

https://embed.plnkr.co/plunk/FH9Kkw5q4wZUEN6J

以上。

元記事を表示

【JavaScript】反復処理②　for…inと列挙可能性

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/bd3ef31e425b2f91db26

#目的

* 反復処理についての理解を深める

#本題
###1.for…inと列挙可能性

**列挙可能性(enumerable)とは**ディスクリプターの一種

https://qiita.com/nao0725/items/3b12a8c1822159363191

***for…inとは***

* 列挙可能プロパティに対して、順不同で反復処理を行う
* プロトタイプチェーン内も列挙対象となる
* 自分自身に設定されているプロパティのみを列挙したい場合はhasOwnPropertyメソッドを使う
* Symbolは列挙の対象にはならない

####例1

基本的なfor…inの書き方

““js
// オブジェクトを定義
co

元記事を表示

コーディング、どうする？

##「ありがとう」「すみません」の無限ループ列車とコーディング

数ヶ月前、IT系の企業に社会復帰し、早３ヶ月。PMまわりの仕事に関わらせていただいている。学ぶことが多すぎて、毎日、チーンと意気消沈で終わることが多い。救いは、出会いと学びがあること。

人との関わりが多い仕事のため、「thanks」「sorry」 「ありがとうございます」「すみませんでした」、の４フレーズはひっきりなしに使う。その中で、「sorry」と「すみません」については、超アジャイルの高速化が止まらない（悲）。ちまたではAgile is Deadアジャイルは死んだらしいということで、仕事がシンプルに「ありがとう」を中心に回せるようにLean化したいところである。

さて、自分の連日の意気消沈の理由は多々あるのだが、技術知識アップのために、今更ながらコーディングの101（基礎）から、学ぼうかとと少し考え初めている。

Linuxコマンドをかろうじて知っていたことが、まさかここで役立つなんて、、、という小さいガッツポーズの出来事があった。ちなみに大きな声では言えないが、かろうじて知っていたコマンドは`cd`, `ls

元記事を表示

モダンJavaScript基本構文をまとめ（後半）

# モダンJavaScript基本構文をまとめ（後半）

（前半はこちら）=>｛https://qiita.com/dende-h/items/a63ffeca056aabd7aa58｝

まとめたのは配列とオブジェクトの定義や操作に関わるもの。

使いこなすとcodeが読みやすくなるが、**知らないと読めない**。

うまい使いどころに早く慣れたい。

## 分割代入-配列-

### const [ [変数名], [変数名],[変数名] ] = オブジェクト名

イメージとしては配列中身に対して、それぞれに先に変数を充てる感じ。･･･（1）

書き方も簡単。数の多い配列だと、後半の**スプレッド構文**と一緒に使うことが多いかも。

“`jsx
//分割代入

//配列を用意した場合
const animeList = [
“氷菓”,
“新世界より”,
“シンフォギア”,
“PSYCHO-PASS”,
“Charlotte”
];

//従来
const animeA = animeList[0];
const animeB = animeList[1];
c

元記事を表示

OTHERカテゴリの最新記事