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

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](https://qiit

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

API設計スキルを次のレベルに引き上げるベストプラクティス22選

本記事は、Mohammad Faisal氏による「[22 Best Practices to Take Your API Design Skills to the Next Level](https://betterprogramming.pub/22-best-practices-to-take-your-api-design-skills-to-the-next-level-65569b200b9)」（2021年4月15日公開）の和訳を、著者の許可を得て掲載しているものです。

#API設計スキルを次のレベルに引き上げるベストプラクティス22選
>REST API設計のための実践的アドバイス

Photo by [Andrea Piacquadio](https://www.pexels.com/@olly?utm_content=attributionCopyText&utm_medium

javascript演習　〜１8日目/３０日

覚えたこと

nodeListをarrayに変換する

1)
スプレッドオペレーター
[…nodeList]

2)
Array.from(nodeList)

“`javascript

const items = document.querySelectorAll(‘.item’);

const arr = […items];

const arr2 = Array.from(items);

“`

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

#目次
[1.はじめに](https://qiita.com/Stack_up_Rising/items/d4c9fabefbde2471bd02#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
)
[2.getElementsByName](https://qiita.com/Stack_up_Rising/items/d4c9fabefbde2471bd02#2-getelementsbyname
)
[3.どうやって書くの？](https://qiita.com/Stack_up_Rising/items/d4c9fabefbde2471bd02#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/d4c9fabefbde2471bd02#4-%E4%BE%8B%E9%A1%8C
)
[5.おわりに](https://qiita.com/Stack_up_R

InDesign JavaScript XML 要素の内容を置換

要素の内容を置換するスクリプトは、これで良いのかな・・・？

~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。

更新 2021/11/08
*/

// アプリ指定
#target “indesign”;

// スクリプト名
var scriptName = “要素の内容を置換”;

//スクリプトの動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名）
app.doScript(function(){

// ダイアログ
var dialogueFlg = confirm(“選択された要素の（子供の要素を含む）内容を「検索と置換」メニューの『正規表現』の入力で置換します。” + “\r\r”
+ “正規表現の例” + “\r”
+ “ストーリーの先頭にある数字と英語の大文字と「-」の文字　(?-m)^[\\d\\u-]+”
, “”, scriptName);

// Ｎｏの場合
if (dialogueFlg == false) {

// スクリ

Jupyter Notebookにセクション実行機能を追加してみた

## はじめに
この記事は、東京大学eeicの実験「大規模ソフトウェアを手探る」のレポート用に実験内容をまとめたものになります。この実験の趣旨としては、全容を把握できないほどのファイル数/行数のコードからなるOSSを少しずつ紐ほどき、欲しい機能を追加してみよう、というものです。この記事は自分含むチームメンバー3人で共同で執筆しました。そのため表記揺れや文調の変化が多々あるかもしれませんが、ご了承ください。OSS開発をしてみたいと思っている方、Jupyter Notebookをいじってみたい方の参考になれば幸いです。

#### Jupyter Notebookとは？
自分のチームでは、改造対象のソフトウェアとしてJupyter Notebookを扱いました。Jupyter Notebookとは、pythonをWebブラウザ上で実行できるIDE(統合開発環境)です。プログラミング初心者が最初の一歩として触ることが多いのではないでしょうか。

#### セルをまとまりとして実行できるようにしたい！
Notebookは「セル」という単位でコードを実行でき、出力が簡単に確認できます。そのため、

LINEBot×obnizで、「赤鼻のトナカイ」「Joy to the world」が流れる仕組みを作ってみた！

###「素振りを頑張った君へ」最高のプレゼント！！
素振りの練習を頑張ったあなたへ最高のサプライズプレゼントを用意しました。
LINEから、「素振りの練習終わったよ！」と伝えると返信がきて、サプライズの音楽が流れるシステムを制作しました。

##開発環境
・[LINEBot公式アカウント解説](https://zenn.dev/protoout/articles/16-line-bot-setup)
・[Visual Studio Code基本操作](https://zenn.dev/protoout/articles/19-vscode-handson)
・[LINEBot参考ページ](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)
・[obniz公式ドキュメント（起動とWi-Fi設定）](https://obniz.com/ja/doc/reference/board-1y/quick-start/)
・[obniz公式ドキュメント（Speaker）](https://obniz.io/ja/sdk/parts/Spea

【Vue.js】イベント修飾子 v-once

#はじめに
こんにちは！
今回は【Vue.js】イベント修飾子 v-onceについてアウトプットしていきます！

#イベント修飾子とは
v-onのために、イベント修飾子を提供している。クリックなどのDOMイベントの振る舞いを変更する修飾子。

v-onceはイベントハンドラを１回だけ実行することができる。

#書き方・解説
現在の時刻を表示するプログラムを例題としていきます。
v-onceを使い、2度目以降はボタンを押してもイベントハンドラが実行されないように書きます。

“`HTML:HTML

Now

{{ message }}

“`
“`Vue.js
var app = new Vue({
el: “#app”,
data: {
message: ”
},
metho

【JavaScript】正規表現を用いるときのブラウザによるバリデーションを非表示にしたい

#はじめに
こんにちは。
こちらの記事では、ブラウザのフォームのバリデーションを非表示にする方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

##問題・原因・対処法

###起きていること
正規表現でフォームのバリデーションを行う際、エラーメッセージが重複してしまう。

###なぜこの問題が発生したのか
ブラウザに、元々バリデーションの機能が設定されているため。

###解決方法
formタグに`novalidate=`を追記することで、ブラウザのバリデーション機能を無効にできます。

“`html:vue.js

“`
Node Scheduleで定期処理を行う

プロジェクトでnode-scheduleライブラリを使って定期処理を行いました。
この記事は自分用メモです。

# Node Scheduleの概要
Node Scheduleはインターバルベースではなく(interval-base),タイムベース(time-base)で定期処理を行います。

例えば、2021年11月８日にあるプロセス（メソッド）を実行したい場合、適切なパッケージだと思います。

Node Scheduleはcron-style schedulingです。

“`
* * * * * *
┬ ┬ ┬ ┬ ┬ ┬
│ │ │ │ │ │
│ │ │ │ │ └ day of week (0 – 7) (0 or 7 is Sun)
│ │ │ │ └───── month (1 – 12)
│ │ │ └────────── day of month (1 – 31)
│ │ └─────────

InDesign JavaScript ライブキャプションの作成

ライブキャプションの作成をするスクリプトは、これで良いのかな・・・？

~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。

更新 2021/11/08
*/

// アプリ指定
#target “indesign”;

// スクリプト名
var scriptName = “ライブキャプションの作成”;

//スクリプトの動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名）
app.doScript(function(){

// 検索の初期化
app.findTextPreferences = NothingEnum.NOTHING;

// ダイアログ
var dialogueFlg = confirm(“全ての画像に「オブジェクト」メニューの「キャプション」の「ライブキャプションの作成」を行います。” + “\r”
+ “ライブキャプションの作成が行えない画像には作成は行われません。” + “\r\r”
+ “処理で画像（Rectangle）を選択

【JavaScript】反復処理①　ループ文

#はじめに

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

前回の記事

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

#目的

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

#本題
###1.ループ文

####for文

““基本構文.
for (初期化式; 条件式; 変化式){
実行する文1;
実行する文2;
…
}
““`

Javaと一緒？？

参照

https://www.javadrive.jp/javascript/for/index2.html

““js
// ①初期値を設定
// ②条件式　→　どうなったらループ抜ける？
// ③変化式 →　1ループごとにどうやって値が変化するか
for(let i = 0; i < 10; i = i + 1){ // 0から9まで出力される console.log(i); } `

【もう、なくそう。】誹謗中傷を「なくす」アプリの開発

# はじめに
**技術的な内容のみをご覧になりたい方は[こちら](#技術的なポイント)からどうぞ**

[](https://tokiwaproject.page.link/mute)

**誹謗中傷をネット上から「なくす」アプリ**を開発しました。簡単にいうと、Web上の特定の単語、過激な表現や人を傷つけるような言葉を非表示にするものです。

アプリ開発の動機など、いわゆる「ポエム」よりの内容は[note](https://note.com/izumo092/n/ne17f44c9fda4)に掲載しているので、Qiitaでは機能や技術面に絞ってお話ししたいと思います。

**[ダウンロードはこちらから](https://tokiwaproject.page.link/mute)**

https://apps.apple.com

気象庁公式の天気予報の情報を Node.js で取得し中身を検索する（ライブラリに Got を用いる）

以下のシリーズの続きのようなものになります。

●気象庁公式の天気予報の情報（JSON）を curl・Node.js で取得し Node.js での処理を試す – Qiita
　https://qiita.com/youtoy/items/932bc48b03ced5a45c71

●curl で取得した気象庁公式の天気予報の情報（JSON）を jqコマンドで処理する – Qiita
　https://qiita.com/youtoy/items/db5b515d400d2aa96420

上記の 1つ目の記事で Node.js　による処理を行っていたものの、上記の 2つ目の記事に含まれるような中身の検索は行っていませんでした。
そこで、Node.js で取得した情報の中身を検索してみよう、というのがこの記事の内容です。

## 気象庁公式の天気予報の情報を Node.js で取得
冒頭の 1つ目の記事の中では、Node.js による情報取得に axios を使っていました。

“`javascript
const axios = require(“axios”);

const u

【JavaScript】メールアドレスとパスワードでよくある正規表現を理解する

#はじめに
こんにちは。
こちらの記事では、メールアドレスとパスワードでよくある正規表現を理解する方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

##正規表現とは
正規表現について簡単に説明すると、特殊文字の組み合わせにより、使用したい文字を指定することができます。よく使われる場面は、郵便番号で数字とハイフン`-`を指定したり、今回のようにメールアドレスとパスワードのときに用いられます。

>参考記事：https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

##前提
こちらの[前回の記事](https://qiita.com/YuStarrr/items/989deeb6e117278f6352)で正規表現を用いたのですが、理解を深められるよう、下記のメールアドレスとパスワードに関して解説していきます。

“`javascript:
//メールアドレスの正規表現
/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z