f@ctor

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

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

「それ1メソッドでできますよ」

## まえがき

皆さん`.map()`と`.reduce()`に頼り過ぎてませんか？少なくとも私は頼りまくってます。

値にそれぞれ処理をしたいなら`.map()`、全体をまとめたりしたいときは`.reduce()`を使えばおそらくすべての場合に方が付くのではないかと思いますが、往々にして冗長になりがちです。

これはそんな人に送りたい**JavaScriptのプロトタイプメソッドって結構いっぱいありますよ**というお話です。

## `.every()`

“`js
const arr = [10, 20, 30, 40, 50];

// .reduce()を使った方法
arr.reduce((pre, cur) => pre && cur > 0, true)

// .every()を使った方法
arr.every((item) => item > 0)
“`

全ての要素が条件を満たしているなら`true`、でなければ`false`を返すような関数です。`.reduce()`よりもスッキリしていていいですね！

気になったのでパフォーマンスも測ってみました。ちなみに環境

元記事を表示

HTML5での script タグの書き方

たまに script タグを書く時にこの書き方を見るけど
“`

“`

HTML5 からはこの書き方で OK
“`

“`

外部ファイルを読み込むには、src 属性をつける
“`

“`

元記事を表示

Vue Selectを導入して、いろいろカスタマイズしてみる

## はじめに
業務でVue Selectを利用する機会があったので、諸々のカスタマイズについての備忘録。
とても便利なライブラリだが、細かな情報を探すのに苦労したのでここに残しておく。

（間違いなどあれば、コメントにてご指摘いただければ幸いです。）

## Vue Selectとは
Vue.jsで利用可能なセレクトボックスコンポーネント。
[公式サイト](https://vue-select.org/) 曰く
> Everything you wish the HTML 要素にできることをすべて、軽量で拡張性の高いVueコンポーネントにまとめました。)

この記載通りで、とても手軽にセレクトボックスを実装できる。
さらに、選択肢に対する前方一致の絞り込みなどの機能も利用可能な優秀なライブラリ。

## 筆者環境
Vue.js: 2.6
Vue Select: 3.1
(Larave

元記事を表示

Firebase(v9) から取得したIDトークンをサーバサイド(Node.js)で検証する

# 概要
Express等で簡単に作ったAPIとの通信をセキュアにするため、Firebase AuthenticationのgetIdToken()メソッドを使おうと思ったら、v8でのnamespacedな書き方しか見つからなかったのv9でのmodularな記述方法を探した。

実はv8っぽい書き方が動かないというのがそもそも勘違いだったのだが、v9っぽくモジュール化されたメソッドでも同様のことができるので、雑に備忘として残しておく。

## 出来上がり
最初に結論を。
web v9っぽいidTokenの所得方法はこう
“`v9.js
import { getAuth, getIdToken } from “firebase/auth”;

const auth = getAuth()
const user = auth.currentUser
const idToken = await getIdToken(user, true)

“`
ちなみに、公式ドキュメントにはこう書いてある
v9っぽい書き方ではないが、v9を使っていてもちょっと手直しすれば普通に動く
“`

JavaScriptのreduce()を使って配列の最大・最小値を取得するって話

今回は、JavaScriptで使えるArray.reduce()を使って、配列内の値から最大値・最小値を取得するプログラムを作ってみます！
数値など単純な配列だけではなく、連想配列(オブジェクト)の配列からも求めることが出来るので超便利です?

?複数の値は取得できないの注意してください?

## 数値の配列から求める

“`
// 対象の配列
const values = [5, 3, 8, 6, 7, 2];

// 最小値を取得
const minValue = values.reduce((a, b) => {
return Math.min(a, b);
}, null);

// 出力：２
console.log(minValue);
“`

## 連想配列(オブジェクト)の配列から求める

“`
// 商品データ
const products = [
{ name: ‘ハンバーガー’, price: 300 },
{ name: ‘ラーメン’, price: 800 },
{ name: ‘うどん’, price: 220 },
{ name:

Automatorを使ってMail.appからJSON形式で情報を取り出す

(2022.7.31) 追記あり

Automatorを使って、AppleScriptでMail.appアプリから選択されている情報を取り出し、JavaScriptでJSONに変換した後に、他のスクリプト言語(ここではRuby)でファイルに書き出しています。

### ワークフローの作成

#### 全体の構成

![widow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171895/1b4f4f9f-eb04-be9c-b4ff-6b726d721c4a.png)

#### 作成方法

* Automatorを起動し、新規にワークフローを作成します。
* 一番上にアクション「AppleScriptを実行」を追加します。

以下のスクリプトを書き込みます。

“`AppleScript
on run {input, parameters}
tell application “Mail”
set theSelected to selection
set theList to {}

【React Hook Form】Controllerの中でonChangeを使うときの注意点

## 概要
以下の記事からその方法を教えてもらった。（ありがとうございます。）
ただ、一点注意点があって、解決に時間がかかったのでシェア。

https://qiita.com/tashinoso/items/ce2cb7aaffaaa56e42ff

## プロパティの順番が大事

{…field}がonChangeの後に記載されていると動かなかった。
前に記載しないとダメ。

“`javascript:
// これだと動かない。
(
{
field.onChange(e)
handleOnChange(e)
}}
{…field}
/>
)}
/>
“`

“`javascript:
// これで動く
Macでの初期設定、開発環境構築(python、node.js、docker)メモ

# Macでの初期設定、開発環境構築

大学入学時に購入して何もわからず環境構築したMacBook Pro。
何かがおかしいと気づきつつ無理矢理使ってきましたが本当に限界を感じたので一旦出荷状態まで戻して全てを最初からやり直します。
次にMacOSでゼロから環境構築する時のためのメモとして好みの設定からよく使う開発環境の構築までを書き残します。
この記事はハブのイメージでそれぞれのコンテンツは分割して記事にしていくので必要な部分だけ切り取ってご覧ください。

## 環境
MacBook Pro (13-inch, 2018)
macOS　Monterey Version 12.5
メモリ intel Core i5
zsh 5.8.1 (x86_64-apple-darwin21.0)

## 目指す状態・方針

### 初期設定
個人的に使い心地のいい設定に変更していきます。
正直ほとんど需要はないと思いますが個人的メモが一番の目的なのでこれも書きます。
おすすめの設定がある人がいたらコメントください。
とりあえず下の設定をいじります。(他にもいじったかもしれませんがぶっちゃけ覚えて

単項演算子の +, – のタイポでNaNになってしまった話

型の練習してたら、こんなタイポした。

普通しないよ、こんなタイポ…それはそう。
テンプレートリテラル使いなよ…それもそう。

“` JavaScript
const num: number = 66;
const text: string = ‘Route’;

const num: number = 66;
const text: string = ‘Route’;

console.log(num + text); // 66Route
console.log(num + +text); // NaN
“`

単項演算子の+がこんな挙動してたらしい。

### 単項演算子 + は文字列を数値型に変換する
“` JavaScript
const count: string = ‘123’;
“`

“` JavaScript
const count1: number = +count;
const count2: number = Number(count);
console.log(count1, count2); // 123 123
“`

### 単項

javascriptで let instance=await new myClass(); ってしたい

適当な非同期処理(Promise)
“`js
async function waitNsecond(n){
return new Promise(function(resolve,reject){
setTimeout(resolve,1000);
});
}
“`
type1
“`js
// set super class
var SUPER=Array;
// define async constructor
async function constructor(…args){
// console.log(this);
SUPER.call(this);
this.push(…args);
await waitNsecond(1);
}
// define async generate class
function myAsyncClass(…args){
if(new.target){
return new Promise(async function(resolve,reject){
let instance=Object.cr

Payment APIで支払い用のQRコードを発行するメモ PayPay for Developers

## はじめに

この記事は、PayPay の Payment APIを利用して、決済用のQRコードを発行するまでの手順メモです。

## ドキュメント

https://developer.paypay.ne.jp/products/docs/webpayment

## インストール

“`bash
npm i request
“`

## コード

下記のコードを`qr.js`として保存する。

“`js
var request = require(“request”);
var options = {
method: POST,
url: /v2/codes,
headers: {
‘Authorization’: ‘hmac OPA-Auth: ‘,
‘X-ASSUME-MERCHANT’: ,
‘Content-Type’: ‘application/json’,
},
body: { “amount”: 1000, “codeType”: “ORDER_QR”, “merchantPay

【JS / TS】Hooks がわからんのではない、分割代入をわかっていないだけ（配列編）

## 0.はじめに

分割代入の第2段の記事になります。

今回は、配列編の記事となります。

[オブジェクト編](https://qiita.com/daishiman/items/5acf803f252b82f970fe) の記事も見て頂けると、うれしいです。

オブジェクト編をご覧になられた方は、最後の[配列の中の一部のみ使用したいとき](https://qiita.com/daishiman/items/324dcc0eae72eb6b13cf#%E9%85%8D%E5%88%97%E3%81%AE%E4%B8%AD%E3%81%AE%E4%B8%80%E9%83%A8%E3%81%AE%E3%81%BF%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%81%84%E3%81%A8%E3%81%8D)以外は、
似たようなことを記述しているので ~~飛ばして~~ **流し読み** して頂ければです。

## 1.この記事を読んだら、できるようになること

:::note info

「分割代入まじわからん」を克服できるようになります

下記の

Amplify CLIを使って、Amplifyプロジェクトを作成する方法

はいさい！ちゅらデータぬオースティンやいびーん！

# 概要
Amplify CLIを使って、ローカルでAmplifyのプロジェクトと開発環境を設置する方法を紹介します。

## 背景
### Amplifyとは
GCPのFirebaseと似て、AWSの各機能を一つにまとめるために作られたサービスです。

### なぜCLIを使うのか
Amplifyにはコンソールがありますが、正式ドキュメントの多くは、コンソールによる操作より、CLIによる操作を元に用意されています。

なので、CLIの使い方からAmplifyに入っていった方が後々助かると、筆者は考えます！

# Amplify CLIをインストールする
まずは、CLIをインストールしておきます。

https://docs.amplify.aws/cli/start/install/

### npmでグローバル・インストールする
“`
npm install -g @aws-amplify/cli
“`

### curlでインストール
個人的にはnpmのグローバルインストールを避けたいのでこちらの方がおすすめです。
“`

着信認証ASPで2要素認証を実装する

## 『着信認証』について
『着信認証』は株式会社オスティアリーズが提供する電話番号を利用した認証サービスです。
詳しくは[こちら](https://www.youtube.com/watch?v=jooW8Dh7BS8)をご覧ください。
今回は、2021年よりサービスを開始しました、着信認証を手軽に実装出来るサービス『着信認証ASP』について紹介させて頂きます。
また、概要については「[大学生が【着信認証ASP】実装をやってみた！](https://www.youtube.com/watch?v=8bLNQ-MTfeY&t=1021s)」でも動画で紹介されておりますのでご参照ください。

## 利用開始まで
実装の前段階は下の流れになります。
・[『着信認証ASP』](https://asp.ostiaries.jp/signup)にアクセスしサインアップ
　↓
・登録したメールアドレスに送られる管理ツールにアクセス
　↓
・決済情報の登録の後、管理ツールが利用可能となる
　↓
・管理ツールにて『着信認証』を導入したいサービス情報の登録
　※この際にアクセスキーなどの情報が作成されま

【Rails】chartkickのlinechart、Y軸を反転させるオプション

# はじめに
chartkickでline_chartを実装してランキング表示をしてましたが、知らんうちにY軸反転が効かなくなってました。
自分の環境ではchart.jsの仕様変更っぽかったので、メモしておきます。

# 環境
– Rails 5.2
– Ruby 2.7.6
– chartkick (4.2.0)

# 変更点

“`
library: { scales:{ yAxes: [{ ticks: { reverse: true, } }] } }
“`

で動いていたのが、2022年7月に動かなくなってましたが、

“`
library: { scales:{ y: { reverse: true} } }
“`

で動くようになりました。

……最初からこうしておいてくれよ！ｗ

終わり

async/awaitを一言で説明する

丁寧な説明は多いが結局なんだっけ？となったので一言にしてみた。
要するにasync/awaitとは、

## asyncの中でawaitを使うと、promiseが返ってくるまで待ってくれる仕組みのこと

“`test.js
async function test(){
console.log(‘1’);
await setTimeout(() => {console.log(‘2 (非同期処理)’)}, 1000);
console.log(‘3’);
};
“`

出力結果

“`
1
2 (非同期処理) // awaitしたので非同期処理でも記述順に実行される。
3

// awaitしないと132となる。
“`

## ということは、awaitを使いたくなったら最後にpromiseを返せばOK

“`testPromise.js
function testPromise(){
return new Promise(function(resolve){
// 何らかの非同期を含む処理
//

無料で学ぶJavaScript入門【応用力が身につく！実践トレーニング：最新版】

# JavaScript【応用力が身につく！実践トレーニング～2022年最新版～】

:::note info

JavaScript/jQueryを使っていますが「コードを学習」することではなく
「 応用力 」「 創り上げる力 」 を学べるようにしてるのがポイントです。

:::

### 自己紹介
ジーズアカデミー学校長 山崎と申します。
今回は、私の授業（初級者向け）で応用力を鍛えるためのサポート動画でYoutube配信したものをまとめます。
全国のプログラミング初学者・初級者の皆さんの底上げになればと思い公開させていただきます。必ず「基礎を学んだあと」に、以下動画をやり切っていただければ理解が深まります。

### 応用実践トレーニングの内容
内容は「基礎を学んだ」レベルに合わせています。
JavaScriptの「超基礎」のところはプロゲートなどで見ていただくと良いかと思います。
**そういった教材で「自分で考えて作れるようにならなかった人」が対象です。**
「変数・分岐処理・繰り返し処理・関数・オブジェクト…」を応用できるようにするための教材として作りました。他の学

Vue 3から始める人のための学習ロードマップ

仕事で 1 年目の新人トレーナーをやることになり、 Vue 3 に挑戦することになったのでその際の学習のためのメモです。
筆者は Vue 2 + Vuetify での SPA 構築経験（趣味）があるのみで、お仕事はバックエンド側なので、もっといいアドバイスなどありましたら教えていただけると助かります！

まだ進行中なので進捗に応じて更新するかもです。 :bow:

## 対象読者

* Web アプリを構築したい
* JavaScript は触ったことある
* TypeScript はわからない
* React とか Vue.js とかのフレームワークも何もわからん
* 小規模 & 開発スピード優先で Vue 3 を選択
* 新参なので Vue 2 との違いを解説されてもわからないよ！

な人です。

## まずはそれぞれの役割を知ろう

### JavaScript

ここはまぁ大丈夫だと思います。 DOM 操作をしたりして HTML を書き換えたりできます。元々はブラウザで動くプログラミング言語として開発されましたが、今や **Node.js** などサーバー用途でも使われてい

【今更聞けない】HTML/CSS/JavaScript でWebページをつくろう

# YouTube

こちらの記事は、2022年7月29日18:00~19:30 YouTubeライブ配信の資料です。

▼ イベントページ↓↓↓

https://biosbootcamp.connpass.com/event/255131/

# Webページをつくる前に

マークダウン記法をご存知ですか？

▼マークダウン記法 サンプル集↓↓↓
https://qiita.com/tbpgr/items/989c6badefff69377da7

# Webページをつくろう!

チュールのうたを圧電スピーカーで音階設定して、動画BGMを作成した話。

こんにちは～

私には飼っている猫（こっちゃん♀）をいなばチュールのCMに出演させたい！という
夢があるのですがなかなか叶えることができず・・・
こっちゃんのために自分でＢＧＭを作り、動画までとってみよう！と
実践したことをまとめました！

**今回はYoutubeのちゅーるのうたを流すだけでは面白くないので
圧電スピーカーで音階設定して、LINEリッチメニューで使用しやすいように作成しました。**

ちなみにチュールはいなば食品グループのいなばペットフードから発売されており、
猫達が食べやすいよう水分を90%含んだペースト状のフードらしいのですが、
我が家ではほぼ猫のおやつです。
そして今年はチュール販売開始から10年という記念すべき年でもあります！

## 完成した動画

私の多少の音痴がチュールのうたにも出ているし、
obnizが映ってないから2回撮影しましたが、
こっちゃんは喜んで対応してくれました笑

## 使用したもの
* [obniz](https://

OTHERカテゴリの最新記事