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

~JavaScript~残り何日？をやりたくて

#はじめに
Todoリストを作成中に“残り何日？“という期限をつけたくてそれの表示のために
“new Date()“を使って、今日の日付から残り何日かを表示させたかった。

#コード
“`javascript
getLimit(limit) {// 2020/10/05
const d = new Date()
const nowDate = new Date(d.getFullYear(), d.getMonth(), d.getDate())//今の日付
const year = Number(limit.slice(0, 4))
const month = Number(limit.slice(5, 7)) – 1
const date = Number(limit.slice(8, 10))
const limitDate = new Date(year, month, date)//期限日
const day = 1000 * 60 * 60 * 24//一日のミリ秒の値

querySelector()使用時の注意点（name属性を指定する時のひと工夫など）

# この記事を書いた背景
JavaScriptの『querySelector()メソッド』を使って、任意のHTMLを取得する処理を記述していたのですが、最初、うまく取得することができませんでした。
うまく取得できなかった理由は、取得するHTMLを指定する際に記述したname属性の指定コードがうまく書けていなかったためです。
今回はname属性を指定するひと工夫も含め、querySelector()使用時の注意点を書いていきたいと思います。

# そもそもquerySelector()メソッドとは
JavaScriptのメソッドで、任意のHTMLを取得するメソッドです。
指定したセレクタに一致する最初のHTML要素(Element)を取得するメソッドです。
『document.querySelector( CSSセレクタ )』のように使います。
実際の使い方は下記の例をご覧ください。

# 自分がどのようにつまづいたか
オリジナルアプリを作成中、ラジオボタンの実装を行ってましたが、
選択したボタンの値を取得する処理がうまく機能しない場合がありました。

下記の例で見ていきたいと思います。

Three.jsを記述するための準備

**今回、投稿するに当たりまして、参考にさせて頂いた記事になります。**

https://ics.media/entry/14771/
https://qiita.com/watabo_shi/items/bf9bcd4569b6d480c608

**ありがとうございました！！**

**以下、Three.jsを記述するための準備になります。**

**1.Three.js公式ページよりThree.js-masterのダウンロードを行います。**
*公式ページ左側、メニューcode/downloadより取得が可能です。*
https://threejs.org/

**2.ファイルの移動**

ダウンロードしたファイルの中から
three.js-master/build/three.jsファイルをapp/javascriptへコピーします。
この際に、app/javascript/index.jsを作成し、

また

“`javascript:app/javascript/packs/application.js
reqire(“../index

複数のObservableをまとめてSubscribeする方法

以下のように、`zip`を利用すると複数のObservableを同時に一つの配列としてsubscribeすることができます。

“`typescript
zip(of(1), of(2), of(3)).subscribe((arr: [1,2,3]) => {
console.log(arr)
})
// => [1,2,3]
“`

【実務未経験】初学者が0から学ぶTypeScript③

参考：[TypeScriptの型入門](https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a “Qiita”),　[TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/)
前回：[【実務未経験】初学者が0から学ぶTypeScript②](https://qiita.com/Kashiwaya123/items/1bde024a2f10c6e51ef4)
※もし私の記事に誤りがありましたら、ご教示いただけますと幸いです。

##配列型
配列が持つデータに型を付けられる。

`const 定数名: 配列の型名[]`

“`ts
const a: number[] = [1,2,3,4];
const b: boolean[];

a.push(5);
b = [true, false, true];

a.push(“maguro”);
//aの配列には数値しか入らないので型エラー
“`

##関数型
関数の引数や返り値に型を付けられる。

`const

Next.jsでURLパラメータを取得する

## getServerSidePropsを使う

http://localhost:3000/hoge?slug=tokyo
このslug部分を取得したい。

“`javascript
export async function getStaticProps({query}) {
console.log(query.slug)
return {}
}
// undefined

export async function getServerSideProps({query}) {
console.log(query.slug)
return {}
}
// tokyo
“`

詳細はこちらに

https://nextjs.org/docs/basic-features/data-fetching

ドットインストールのJavascriptの第1章： はじめてのJavaScript

[ドットインストール：はじめてのJavaScript](https://dotinstall.com/lessons/basic_javascript_v4)

# 02 ひな形となるファイルを作ろう

– コード
[コード](https://github.com/fukadashigeru/dotinstall_javascript/pull/1/commits/2a19a7ed76db72d22d9a93ba5546d98b3960e9a4)

– 成果物

| |
|:–|

# 03 クリックイベントを設定しよう

– コード
[コード](https://github.com/fukadashigeru/dotinstall_javascript/pull/1/commits/5c238dde8f4cedff4cbeffb019725798fd09d5

LINEBotを使って海外現地金額から日本円を返してみた

# 目的
仕事で海外とやりとりすることが多くなってきました。
海外に行ったときに現地通貨が日本円ではいくらなのかをすぐに調べることができるツールがあれば便利だと思って今回、自分で作ってみました。

# 実現方法
### 入力
入力についてはLINEを使用しました。

### 使用したAPI
Foreign exchange rates API
https://exchangeratesapi.io/

### ロジック
LINEに入力する文字の形式は固定にしました。
　入力として受け付ける文字
　　（国名）:（現地金額）は日本でいくら？
　例
　　中国:1000は日本でいくら？

LINEで入力した内容をもとにAPIを利用して日本円に換算しています。
１．LINEで入力した国名をもとに通貨名を取得します。
　　連想配列でkey:国名、value:通貨名として紐づけを持たせています。
２．１．で取得した通貨名からレートを求め、日本円を取得します。
　　今回使用したAPIについては1ユーロあたりのレートが返却される仕様となっていました。
　　そのため、まず、入力した現地金額を何ユーロか求め

k-means法とそれに関連したモデルのJavaScriptによる実装

# はじめに

「[色々な機械学習処理をブラウザ上で試せるサイトを作った](https://qiita.com/nominomino/items/669c19ecf2256b3ecae5)」中で実装したモデルの解説の一回目です。

k-means法に関連した以下のモデルの実装について解説します。

– k-means
– k-means++
– k-medois
– Neural Gas

デモは[こちら](https://ai-on-browser.github.io/)から。（TaskをClusteringにして、ModelのK-MeansまたはNeural Gasを選択）
実際のコードは[kmeans.js](https://github.com/ai-on-browser/ai-on-browser.github.io/blob/master/model/kmeans.js)、Neural Gasは[neural_gas.js](https://github.com/ai-on-browser/ai-on-browser.github.io/blob/master/model/

JavaScript ミリ秒を秒、分、時間、日にちに変換する方法

まず、定数nowにDate()オブジェクトをインスタンス化（初期化）したものを代入。
now.getTimeメソッドで求められるのは、１９７０年1月１日０時０分から現在までの時間をミリ秒（1/1000秒）で表した数字。

“`
const now=new Date();
const time=now.getTime();
“`

まずは、秒を求める。

“`
const sec = Math.floor(time/1000)%60;
“`

もし、now.getTime()で得られた数値が1655555555000(ミリ秒）だとしたら、
定数time/1000で秒数になる。
60（1分＝60秒）で割った余りがまだ１分に満たない秒数つまり、秒となる。

次に、分を求める。

“`
const min=Math.floor(time/1000/60)%60;
“`
Math.floor(分数)を60分（1時間)で割った余り。つまり、まだ1時間に満たない分数。

次に、時間を求める。

“`
const hours=Math.floor(time/1000/60/60)%2

【JavaScript】分からない部分まとめてみたら最強だった件

どうも、三町哲平です。

Ruby on RailsでWebアプリを開発中なのですが、どんなプログラミング言語やフレームワークを使っていてもJavaScriptが絡んできます。

正直な話、HTMLやCSSは分からない部分はその都度調べていけば、よっぽど手の込んだアプリケーションではない限りは素人でもそれなりのクオリティに仕上げれるという感覚があるのですが、JavaScriptが予想以上の難敵なんですよね。

しかも調べていくうちにどうも、フロントエンドだけではなくバックエンドでも使えるらしいじゃないですか…てことは、JavaScriptが最強なのでは…!?という疑問から色々とJavaScriptに調べてみましたので、少しばかりお付き合い下さい…。

では、どうぞ！

## JavaScript

> 一番身近なのは、W

Reactの関数コンポーネントでMapbox GL JSを表示するデモ

## はじめに
Vueが好きです（告白）
でもReactの方が流行ってるらしいのでキャッチアップしておかなきゃならんという事でcreate-react-appしてみました
とりあえずMapbox GL JSを表示したかったのですが、関数コンポーネントでちゃんと動く例がネット探してもなかったので備忘録兼ねて記事化しておきます

## 関数コンポーネント？
今まで使ってこなかったのであんまりよくわかってないですがクラスより関数の方が良いらしいです（関数型がトレンドという事でしょう）
ネット上で見つかるReact+Mapbox GL JSの例はほとんどクラスコンポーネントだったので、じゃあよりよいという関数コンポーネントでやってみようとしましたが、hooksがどうとか謎用語連発でちょっと困りました

Build a React MapboxGL Component with Hooks

参考サイト（でもこれをコピペしても動きません）

## コード

“`typescript:App.tsx

import React, { CSSPr

『りあクト！Firebaseで始めるサーバーレスReact開発』を読んで、為になったことまとめ 1-1基本環境を作る

# はじめに
[りあクト！Firebaseで始めるサーバーレスReact開発](https://booth.pm/ja/items/1572683)を読んで、個人的に為になったTIPSを学習記録としてまとめます。

# Typescriptの設定でコンパイル高速化
Typescriptの設定ファイルtsconfig.jsonにincrementalを有効にするオプションを記述すると再コンパイルの時間を短縮することができ、ホットリロードにかかる時間も短くなる

“`json:tsconfig.json
{
“compilerOptions”: {
“target”: “es5”,
“lib”: [
“dom”,
“dom.iterable”,
“esnext”
],
“allowJs”: true,
“skipLibCheck”: true,
“esModuleInterop”: true,
“allowSyntheticDefaultImports”: true,
“strict”

【Vue.js】Vue.jsで、forEachを使う時の注意点

Vue.jsで使うthis.dataと、forEach文を活用するときは、注意が必要という記事になります。

#そもそもforEach文とは

“`javascript:

// 配列を繰り返す
offices.forEach(function(office){
console.log(office)
})

// 繰り返す配列を、thisで取得する
offices.forEach(function(office){
console.log(this)
}, offices)
“`

第一引数にはコールバック関数を、第二引数には繰り返す配列を定義することで、thisとして取得できる。

##結論：forEachのthisと、Vue.jsのthisは別物

forEach文内でのthisは、繰り返す配列のことを指してしまうので、直接格納することができない

“`javascript:

// エラーになる
offices.forEach(function(office){
this.array.push(office)
})
“`

#配列の要素を、this.dat

【IE限定】COMからJavaScriptを呼び出す

[前記事](https://qiita.com/sh0x01/items/b5a2bc7da61e743a25c0)の続きです
COM<-->JavaScript のやりとりができれば、いろいろなことができそうです。

# 前提
[【IE限定】JavaScriptからCOMを呼び出す](https://qiita.com/sh0x01/items/b5a2bc7da61e743a25c0)の続きです。

この記事は、上の記事を読んでいることを前提に書いています。
上の記事を読んでいない人は、この記事を読む前に、上の記事をお読みください。
（でないと、この記事で書いていることがサッパリわからないかもしれません。。）

# 実装
## COM側の実装
### IDLファイルを記述

IDLファイルには、以下を追加します。

* JavaScript関数を設定するプロパティ
* JavaScript関数を呼び出すメソッド

“`c++:IDLファイル
// ATLProject1.idl : ATLProject1 の IDL ソース
//

// このファイルは、タイプ ライブラリ ([

【javascript】ハンバーガーメニュー作成（メニュー外のクリック動作）

# 目標
Xボタンだけでなく、右側の表示領域をクリックしても、
ハンバーガーメニューが閉じるようにします。

# 開発環境
ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

# 前提
[【Javascript】ハンバーガーメニュー作成（左、上、右から表示）](https://qiita.com/japwork/items/9c48544498186844fa1b)
今回は上記記事の補足になります。

# 実際のコード

“`erb:html

Promiseを理解する(非同期処理, コールバックも)

# 非同期処理とは
**ある処理が実行されてから終わるまで待たずに、次に控えている別の処理を行うこと。**
そうすることで、時間のかかる処理を並行で処理し、その処理の完了を待たずに次の処理ができる。

*JavaScriptはシングルスレッドなため、通常では並列で複数の処理ができない。そのため効率的に処理できるように考えられた仕組み。*

# コールバック関数とは
別の関数(高階関数)に渡すための関数。

“`javascript
// 例: setTimeout(callback, ms)
setTimeout(function() {
console.log(5);
}, 1000);

setTimeout(() => { // アロー関数ver.
console.log(5);
}, 1000);
“`
“`javascript:NG
// 1秒毎に数値を表示してカウントダウンしたいが、このコードでは1秒後にすべて実行される
setTimeout(() => console.log(5), 1000);
setTimeout(() => console.log(

【jQuery】【ancestry】を使用した、多階層ツリーメニューの実装

経緯
–
現在絶賛作成中のポートフォリオで、フリマアプリのラクマのような多階層ツリーメニューを実装したいと思い作成。振り返ってみればさほど難しくはなかったけれども、色々躓いたので記載しておこうと思います。

環境
–
ruby 2.6.5
Rails 6.0.3.2
haml使用

完成図
–
親のカテゴリー（第１階層）をクリックすると、子のカテゴリー（第2階層）のサブメニューが現れるという仕組み。

手順
–
1、ancestryの導入
2、HTMLで多階層の形を実装
3、jQuery（JavaScript）で、第１階層のカテゴリーをクリックすると、第2階層のサブメニューが表示されるイベントを記載する

※CSSは今回は記載しません、ごめんなさい

ancestryの導入
–
余談ですが、ancestryを導入しなくても、HTMLに記載すれば多階層ツリーメニューの実装自体は出来ます。只、第2階層のサブメニューのカテゴリをクリックして、その

【初心者向け】郵便番号で住所検索をする外部APIを叩く

#はじめに

実務でいつ使用してもいいように、ローカル環境で外部提供のAPIを叩く練習をしていきます。
あと、長いこと使用していないAjaxの復習もかねて。

今回は会員登録時に住所入力をサポートする、最近のデファクトスタンダードな仕様を目指してフォームの作成をしていきます。

#使用API
郵便番号検索API
http://zipcloud.ibsnet.co.jp/doc/api

※画面下部にAPI利用規約がありますので、使用する場合は一読するようにお願いします。

〜以下引用（2020年10月11日）〜
郵便番号検索APIは、日本郵便が公開している郵便番号データを検索する機能をRESTで提供しています。
現在使用しているデータは、「2020年9月30日更新分の全国一括データ（加工済バージョン）」です。

#環境+使用ライブラリなど
macOS Catalina 10.15.7
MAMP(Apache + MySQL)
PHP 7.3.11
jQuery(Ajax通信に使う)
Bootstrap(別に必要ではない)

#今回のゴールとする仕様

– 半角数字で7ケタの郵便番号を入

ESLint 7.11.0

前 [v7.10.0](https://qiita.com/mysticatea/items/099c7559e6c9e5e6769a) | 次 (2020-10-24 JST)

ESLint v7.11.0 has been released:https://t.co/znenTYhIQT

— ESLint (@geteslint) October 9, 2020

ESLint `7.11.0` がリリ