f@ctor

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

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

#Scratch 3.0 のキー入力イベントをブラウザのコンソール（開発者ツール）の JavaScript からランダムに繰り返し発生させてみる

今回の内容は、以下のツイートの動画に出てくるような仕組みなどを実現できるものです。

ブラウザの操作をページ外部から自動で行う仕組みは「[Microsoftさんの Playwright](https://github.com/microsoft/playwright)」や「[Googleさんの Puppeteer](https://github.com/puppeteer/puppeteer)」などがあります。
今回は、そういったものを使うまでもない簡単なキー入力の処理を、ページ外のプログラムから実行するという方向の話です。

## 仕組みの概要
今回の仕組みは、開発者ツールのコンソールから JavaScript のプログラムを実行する構成です。冒頭の動画は、Chrome の開発者ツールのコンソールを開き、そこにこの後に掲載している JavaScript のプログラムを貼り付けて実行しています。

## 実行するプログラム
### Scratch
冒頭の動画上でも出ていますが、

元記事を表示

Javascript_クラスを作る

# はじめに
Javascriptでクラスの作り方を学んだのでメモ。
継承の考え方がしっくりこなかったので殴り書き
## 内容
“`javascript:Messageクラスを作る
class Message {
//↓コンストラクタに情報を設定する。
constructor(title, text) {
this.title = title;
this.text = text;
}
//↓メソッドでアクションを設定する
success() {
console.log(“正常に投稿されました。”);
}

info() {
this.success();
console.log(`タイトルは${this.title}です。`);
console.log(`内容は「${this.text}」です。`);
}
}

const testmessage = new Message(“test”, “配信テスト。本文はここに表示され

元記事を表示

?お前らのゴールデンウィークはゴールドじゃない?

**ゴールデンウィークがゴールドじゃない**のでちゃんとゴールデンウィークにする話です。

ということで、今年もGWアドベントカレンダーが立ち上がっていましたね。[何の役にも立たないプロトタイプ](https://gw-advent.9wick.com/calendars/2022/122)のアドベントカレンダーの参加記事です。

## 黄金週間

着手前にゴールデンウィークのゴールデンって僕らの思ってるゴールドなんだよね？と疑問に思いました。

疑心暗鬼。

[ウィキペディア](https://ja.wikipedia.org/wiki/%E3%82%B4%E3%83%BC%E3%83%AB%E3%83%87%E3%83%B3%E3%82%A6%E3%82%A3%E3%83%BC%E3%82%AF)によると

> ゴールデンウィークまたはゴールデンウイーク（和製英語: Golden Week, GW）とは、日本において毎年4月末から5月初めにかけて休日が続く期間のこと。春の大型連休（おおがたれんきゅう）、黄金週間（おうごんしゅうかん）[1]ともいう。

らしいです。ちゃんとゴールデ

元記事を表示

JavaScriptでのAsynchronous（非同期）勉強ノート

# 初めに
今回は非同期通信について自分なりにまとめてみました。
前提としてほかのアジェンダも触れていますが、主な参考資料はこちらです。
[イベントループとは一体何ですか？ | Philip Roberts | JSConf EU](https://www.youtube.com/watch?v=8aGhZQkoFbQ)

# Asynchronous VS. Synchronous
Asynchronous（非同期）：同調しない。
　→ 自分と他人のやることに分けて、同時進行する。
Synchronous（同期）：同調する。
　→ みんな同調して前の人の仕事が終わるまで待ち続ける。

# Node.js VS. Browser runtime
Node.jsもブラウザもJavaScriptのruntime、Node.jsはChromeのV8エンジンを基にして作られたruntimeです。

Node.jsが提供するインタフェース（file system、fs）を通して、JavaScriptを使ってファイルの読み込みができるようになったり、いろんなモジュール(os, http, setT

元記事を表示

music-metadata-browserがブラウザで動かなかったのが解決した

javascriptで音楽ファイルのメタデータを読み込める`music-metadata-browser`というnpmパッケージがあります。これは`music-metadata`のブラウザ版らしいです。

https://www.npmjs.com/package/music-metadata-browser

これをviteでバンドルしたWebアプリケーションで使おうとしたのですが、そのままだとブラウザで実行したときにいろいろエラーが出ました。そして今日、ついにエラーなく動作したので対応したことを書きたいと思います。

# 解決

3つのパッケージを追加しました。

“`diff_json:package.json
{
“dependencies”: {
“music-metadata-browser”: “^2.5.6”,
+ “buffer”: “^6.0.3”,
+ “events”: “^3.3.0”,
+ “process”: “^0.11.10”,
}
}
“`

`music-metadata-browser`パッケージより先に次のコード

元記事を表示

生JavaScriptのみでなんちゃってスライドショーを作ってみた

GWも変わらず勉強続けるのみ。
最近は暖かいのか寒いのかよくわからない季節ですね。

今回は[Swiper](“https://swiperjs.com/”)や[Keen-Slider](“https://keen-slider.io/”)などプラグインを使わず気合いでVanillaJsでスライドショーを作るという試みをしました。

### なぜプラグインを使わないのか
最初はプラグインを使って質の良いスライドショーにするつもりだったんです。私は[Keen-Slider](“https://keen-slider.io/”)を使おうとnpmインストールを使ってどうたらこうたらしようとしました。
でも実際にインストールしてみるとオプションがたくさんあって何が何だか分からなくなり、「これもう自力で作った方が早いんじゃね？」と思ったのがきっかけです。もっとjsでのモジュールとかの扱い方に慣れてからにしようかなという次第。

### こうなったら自力で…
早速本題に入ります。まずHTMLで要素を並べる。
同時にスライド用のボタンも実装します。画像の領域にボタンを入れたいので同じ箱に入れました。

元記事を表示

Bootstrapとは？

# bootstrapについて学んだこと
## bootstrapとは
HTML／CSS／JavaScriptから
構成される最も有名なWEBフレームワーク
###### フレームワークとは
概念的な意味で、何かの枠組みのこと。雛形等
可視化できるもので表現すると
履歴書に引いてある罫線、項目。
雛形を導入することで工数が減る手伝いをしてくれる。

## Bootatrap　メリット
##### コーディング量を減らせる
HTMLファイルととCSSファイル２つに記述しなければならない場合もBootstrapで予め用意されたクラスというものを、HTMLファイルに書くだけで簡単に作成することができます。

##### レスポンシブ対応のデザインを簡単に作れる
レスポンシブ対応とは、PCやスマートフォン、タブレットなど様々なデバイスに適したWebページを制作することを言います。

## Bootstrap デメリット

##### 画一的なデザインになりがち
近年Bootstrapを使用している人は多数いますので、自分なりにカスタマイズしないと、有益なものになりにくくなります。カスタマイ

元記事を表示

Javascript_括弧の使い方メモ

# はじめに
Javascriptで配列やオブジェクトを作る際に`[]`や`{}`を用いるがどれがどれなのかわからなくなりそうなのでメモ

## 内容
“`javascript:配列は[]を使う
const animals = [“dog”,”cat”,”rabit”];
“`

“`javascript:オブジェクトは{}を使う
const animals = {name:”dog”,age:12};
“`

“`javascript:console.logの出力時にも{}をつかう
console.log(`${animals.name}はかわいい`);
“`

自然にかけるように書いて覚える

元記事を表示

Notion APIを試す＆エラー対応した件

# はじめに
notion apiを使って、お問い合わせデータベースを作成してみよう！とした時に発生したエラーについて述べます。

Token発行やDatabaseIDの取得は、以下の記事が参考になります。
[Qiita](https://qiita.com/tomoya_sakusaku/items/5a7f59ddfebe25e1ca8b)

# 環境
TypeScript
firebase functions

# コード

“`
import axios ,{AxiosRequestConfig} from “axios”

const yourDatabaseID = ‘あなたのデータベースID
const yourToken = ‘あなたのトークン

const options:AxiosRequestConfig = {
method: “post”,
url:’https://api.notion.com/v1/pages’,
headers: {
Accept: ‘application/json’,

元記事を表示

【javascript,jquery】の配列追加！jsはpushじゃないとダメ！

# コード
“`javascript

//varを使用すると再宣言、初期化によるバグを起こしやすくなるため、今は非推奨だから使わないほうが良い
let items = [];
const results = [
{‘name’ : ‘田中’, ‘japanese’ : 83, ‘math’ : 57, ‘science’ : 43, ‘social’ : 72, ‘english’ : 78},
{‘name’ : ‘渡部’, ‘japanese’ : 62, ‘math’ : 88, ‘science’ : 70, ‘social’ : 66, ‘english’ : 38},
{‘name’ : ‘品川’, ‘japanese’ : 23, ‘math’ : 33, ‘science’ : 53, ‘social’ : 17, ‘english’ : 07},
{‘name’ : ‘滝谷’, ‘japanese’ : 93, ‘math’ : 89, ‘science’ : 79, ‘social’ : 96, ‘english’

元記事を表示

JavaScriptでUUIDを生成する方法(ライブラリなし)

### JavascriptでランダムなIDを生成する方法
JavaScriptでUUIDをライブラリなしで作成する関数を下記に記載。

“`hoge.js
const uuid = () =>
([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(
c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
).toString(16)
);
“`

結果
“` result.js
console.log(uuid())

// 396246c5-d076-4b39-a6d5-4dbc74996bdf
“`

[参照](https://tapajyoti-bose.medium.com/7-more-killer-one-liners-in-javascript-1cd180d82695)

元記事を表示

【javascript,jquery】の配列操作 each文も！

# コード
“`javascript

//varを使用すると再宣言、初期化によるバグを起こしやすくなるため、今は非推奨だから使わないほうが良い

let results = [
{‘name’ : ‘田中’, ‘japanese’ : 83, ‘math’ : 57, ‘science’ : 43, ‘social’ : 72, ‘english’ : 78},
{‘name’ : ‘渡部’, ‘japanese’ : 62, ‘math’ : 88, ‘science’ : 70, ‘social’ : 66, ‘english’ : 38},
{‘name’ : ‘品川’, ‘japanese’ : 23, ‘math’ : 33, ‘science’ : 53, ‘social’ : 17, ‘english’ : 07},
{‘name’ : ‘滝谷’, ‘japanese’ : 93, ‘math’ : 89, ‘science’ : 79, ‘social’ : 96, ‘english’ : 91},
{‘nam

元記事を表示

Progate:js　学習日記　3day　メモ

**関数定義**：const 定数名 = function(){

処理

};　→定数に関数を代入！

**関数の呼び出し**：定数名();

const greet = function() {
　　console.log(“こんにちは！”);
　　console.log(“関数を学習していきましょう！”);
};

// 関数を呼び出し
greet();

アロー：矢印のことだから「=>」

**アロー関数**：function()の部分を () = > にできる！

const 定数名 = () => {

処理

};　

**引数を受け取る関数の定義**：

consot 定数名 = (引数名) => {

　　処理

};

**引数を受け取る関数の呼び出し**：定数名(値);で値が引数に代入される！

↓

const greet = (name) => {
　　console.log(“こんにちは、” + name + “さん”);

};

greet(“ひつじ仙人”);

**複数の引数を受け取る関数**：

const 定数名 = (第1引数 , 第2引数 ,

元記事を表示

JavaScript得意になるための道〜変数編〜

Udemyでやった内容を自分の理解に落とし込みます。ざっくり以下内容。

– **var, const, let**
– **falsyとtruthy**
– **AND条件とOR条件**
– **参照**

（Udemyの動画は[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)です、おすすめです)

# var, const, let
– **var**
◯再宣言、◯再代入
– **const**
×再宣言、×再代入
– **let**
×再宣言、◯再代入

`var`はなんでも有りなので非推奨。
変数は基本`const`で宣言して、値を書き換える必要がある(for文使ったループとか)場合は`let`で宣言するイメージです。

# falsyとtruthy

比較する際は`==`もしくは`===`を使うのですが、違いは**厳密に**比較するかしないかです。
（`==`が抽象的に、`===`が厳格に比較)
厳密に比較するかしないかでtrue,falseの結果が変わってくる

元記事を表示

Javascript_関数を作る

# はじめに
このページは初学者のメモ書きです。
## 参考
Progate JavascriptⅢ
### 内容
“`javascript:関数を作る時の書き方①
const 定数名 = function(引数){
関数の中身を書く;
}
“`
“`javascript:関数を作る時の書き方②
const 定数名 = (引数) =>{
関数の中身を書く;
}
“`
“`javascript:関数で処理した値を返す
const 定数名 = () =>{
return 値;
}
“`
“`javascript:戻り値をつかう例
const half = (number) => {
return number / 2;
};

const result = half(130);

console.log(`130の半分は${result}です`);
“`
`half`関数に入れた数字の半分を出力した。

引数は複数設定することもできる
“`javascript:引数複数
const half = (number1,number2) => {
retur

元記事を表示

Symbol × SSS Extension で作る dApps 入門

# はじめに

GWいかがお過ごしでしょうか？[速習symbol](https://github.com/xembook/quick_learning_symbol)は読みましたか？

もう読み終わって暇？仕方ないね、GW後半戦のコンテンツの供給だ！！！

どうも、いなたつです。SSS Extension作ってる人です。Symbol Draw作ってる人です。

どうやら巷にHTML / JavaScriptだけでdAppsが作れるブロックチェーンがあるらしいですよ、Symbolって言うんですけど

はい、ってことで今回はSymbolブロックチェーンでdAppsを作ってSSS Extensionに接続しようってことでやっていきます。

本記事では簡単なウォレットを作っていきます。とはいっても ~~手抜き~~シンプルな見た目なのでかっこいいオリジナルウォレットを作ってくれたらなぁって思っています。

ウォレットとして最低限の機能しかないのでいろんなトランザクションを使えてかっちょいいブラウザウォレットを誰か作ってください(他力本願寺)

## 本記事の目標

– Symbol ブロックチェ

元記事を表示

今週の学び　第4回

# 今週の学び

JavaScriptなど

– for文
– for文の中にfor文を入れると、中のfor文の処理が終わってから外のfor文が動作する
– for文の中には処理なら基本的に何でも入る
– switch文
– switch文はあまり使わないのでfor文で書いた方が良い
– アルゴリズム
– 処理を書く順番はとても重要
– else if
– 処理に分岐がある時とても便利
– Array オブジェクトの sort メソッド
– Array オブジェクトの sort メソッドを使うと、配列の要素を文字列の並び順または指定した並び順で並び替える
– スコープ
– 定数や変数の使用できる範囲のこと
– JavaScriptのクラス
– 「設計図」のことをJavaScriptでは「クラス」と呼ぶ
– filterメソッド
– 記述した条件に合う要素のみを取り出して新しい配列を作成するメソッド
– var、let、const
– constだけは再代入をしようとするとエラーになる
var、let

元記事を表示

Lodashのおともにオススメなeslint-config-lodashの紹介

現代のJavaScriptにおいて、[Lodash](https://lodash.com/)が必要な場面はそう多くありません。

https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore

https://qiita.com/mizchi/items/af17f45d5653b76f6751

それでもLodashを使いたいのであれば、[eslint-config-lodash](https://www.npmjs.com/package/eslint-config-lodash)を導入してみてはいかがでしょうか。

## コンセプト

– [eslint-plugin-lodash](https://www.npmjs.com/package/eslint-plugin-lodash)の推奨設定がベースになっている
– LodashよりもネイティブAPIの使用を優先

これらのコンセプトにもとづいた設定になっているため、Lodashの使用箇所を最小限に留めつつ、使う場合はベストプラクティスが適用されます。

#

元記事を表示

40代おっさんJavaScriptのlet,const,varを学ぶ

## 本記事ついて

本記事は プログラミング初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

## let,const,varとは

変数を行うキーワード

let
・ES6から使用できるようになった

const
・ES6から使用できるようになった

var
・ES6以前に使用していた、今では非推奨

|タイプ|再宣言|再代入|スコープ|初期化|
|—–|——|——|——|——|
|let|×|〇|ブロック|×|
|const|×|×|ブロック|×|
|var|〇|〇|関数|undefined|

再宣言とは
一度宣言した変数をもう一度宣言が可能かどうか

再代入とは
一度宣言した値を変更可能かどうか

初期化とは
ホイスティング(Hoisting)のこと
コンテキスト内で宣言した変数や関数の定義をコード実行前にメモリに配置することです。 ホイスティングのことを「宣言の巻き上げ」といったりもします

＊varを使用すると再宣言

元記事を表示

最近来ることがある「ココログのアドレスが入っている迷惑メール」を調べてみた

# 初めに

本記事は技術的な調査を行った結果を記載しています。
ココログ自体に脆弱性があるのではなく、ココログの機能を悪用しているものと認識しています。
なお、被害防止のため、一部URLには加工を入れています[^1]。

[^1]: `example.com`は、RFC2606で定められている例示用ドメインの1つです。

# 今回の調査対象メール

> From: vmhf7ip
> 件名: ★message★補佐担当様⇒VIPゲスト様へ新しいメッセージが届きました。
>
> 新着メールが届いております♪
> https://hogepiyo.cocolog-nifty.com/blog/?8u2qd9kit3go6l7za0ey+7uj5wgq+example+Xy%2Fhogehoge%2Fnp
>
>
> 配信停止ご希望はこちら
> https://hogepiyo.cocolog-nifty.com/blog/?hevc7r8ftnsa56b0klu+a0o5xof+example+dFI8iZMDZe%2Fjv4
>

元記事を表示

OTHERカテゴリの最新記事