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

こんな形の日記、、、知らない

Webアプリを作りたい！
——————–
せっかくなら以前作ったNASAのAPIのLINEBotでwebアプリを作りたい！
↓過去作

https://qiita.com/kminamicric/items/4cd1083b0898f7f99963

このLINEBotで得られた情報とその日の自分の記録がをまとめられるサイトを作りたい。

**（未）完成品**
———-
LINEBotの情報に加えその日の出来事を記録できるサイトを作りたかった。
しかし時間の都合上ここまでしかできなかった。

https://fabulous-douhua-583802.netlify.app/

**ソースコード**
—————-

YellowfinでHighchartsのワードクラウドを描画する

# はじめに

### 概要
BIツールであるYellowfinは、JavaScriptライブラリを利用することで標準機能以外の様々なグラフや図を表現することが可能です。
今回はHighchartsを利用し、ワードクラウドを描画してみます。

### ワードクラウドとは
各文字列に紐づけられた数値の重みに応じて文字の大小を表現した図です。
例えば、「文章を単語レベルに分解した上で出現頻度を重み付けし、出現頻度が高い単語を大きく表示する」ケース等で利用されます。

https://www.highcharts.com/demo/wordcloud

### バージョン情報
Yellowfin：9.7.0.3
Highcharts：10.2.0

# 事前準備

### 1. YellowfinのJavaScriptグラフ機能

芸術は爆発だ！私の頭もだ！やり場のない怒りを芸術の域に昇華させるアプリです。「なんで忘れるかなぁ俺の格言。それならつくる！《企画編➁》」

## 「なんで忘れるかなぁ俺の格言。それならつくる！《企画編➁》」のはずが･･･
趣味の競馬で負けた時に作った勝負事の格言、これが全く活かされていないことを解決するために格言DBを構築して、スマホやPCから登録・検索、週末に向けて格言適用レースの自動配信と機能を考えたのが《企画編①》でした。
　　　　[NOTE記事：なんで忘れるかなぁ俺の格言。それならつくる！《企画編①》](https://note.com/xedge748hagi/n/n1352db87dae7)
最近は便利な開発環境やアプリがいろいろあって、組み合わせればWEBアプリが簡単にできてしまう、なんてことは全くもってございませんでした。無料サンプルコードはいろいろありますが、ちょっと直すと動かなくなるんです。原因を調べようにもいろいろ出てきてどれが正解か判断つかないんです。イライラしながらも粘り強くソースコードと格闘しているときにそれは起こりました･･･。

## 15時34分の悲劇
もう15時過ぎてるやん、はよせなアルゼンチン共和国杯（東京芝2500m、ＧⅡ）間に合わへん。東スポを開いて馬選びに入ります。･･･（時間経

request_log_urlで、StripeのAPI呼び出しエラーの詳細をStripeダッシュボードでチェックする

Stripe APIを利用したシステムでは、Stripe APIのアップグレードだけでなく、呼び出し元のアプリの仕様変更やユーザーの意図しない操作などでAPIエラーが発生することがあります。

エラーへの対応は、SentryやRollbarを使ってリクエスト・レスポンスを調査するのが一般的ですが、実はStripeダッシュボードを利用することも可能です。

## ダッシュボードからAPIログを確認する

ダッシュボードでは、[開発者]タブの[ログ]から、API呼び出しのログが確認できます。


APIのパスや呼び出し結果（成功・失敗など）、Connectの親アカウントか子アカウントかなどでフィルタリングできます。

![スクリーンショット 2022-10-25 15.56.46.png](https

【JavaScript】「お手すきの時にご確認お願いします」ができる便利なブラウザ API

こんにちは。[ぬこすけ](https://twitter.com/nuko_suke_dev)です。

最近（2022/10/24）、 `setTimeout` について記事を書いたのですが、予想以上に多くの人に読んでいただけて嬉しい限りです。

https://qiita.com/nuko-suke/items/5b16ab9de402547c5797

`setTimeout` によって処理を遅らせることは皆さんご存知かと思います。
（上の記事に詳しい仕組みは解説しているので、ぜひ一読ください）

ただ、 `setTimeout` にも問題はあります。
それは **処理の優先度をブラウザに教えることができない** 問題です。

`setTimeout` はただ処理を後回しにしているにすぎません。
後回しにするにしても「この処理は優先度が低いので、ひまな時にやってね」みたいに詳しくブラウザに教えることができません。

この問題を解決するためにあるブラウザ API が生まれました。
今回はこのブラウザ API を紹介したいと思います！

本来は少し難しい内容ですが、**初心者の方にもわ

その状態管理はトップダウン型(Zustand的)？ボトムアップ型(Jotai的)？Reactのディレクトリ構成と共に考える short ver.

本格的に記事にするのはまだ時間がかかりそうなので、ショートバージョンでたまにはこちらに。

Jotaiを推して入るものの、ずっとディレクトリ構成に悩んで答えを出せずに居た所とある記事が目に止まりました。

その記事のおかげでどう考えるべきか踏ん切りがついたのでそれをツイートでまとめてみました。↓

これを見て自分の中の靄が晴れてきた感じ。
Jotai / Recoil は従来のReduxのようなトップダウンな状態管理ライブラリではなくボトムアップ型。
なので一元的にまとめるような構成は哲学に反してる気がする。
Single source of truth 、巨大なstoreから切り出すのを忘れよう？https://t.co/Vox3BW7rlf pic.twitter.com/qn0O8FF4Pt

&

JQueryを使ってかわいい顔文字くんを作ってみた

## はじめに
今回は趣味でJsとJQueryを使って動く顔文字くんを作ったので皆さんも暇な時に作ってみて下さい。
環境構築いらないし解説たくさん書いたので初心者の方は是非?

### 準備
・適当にディレクトリ(フォルダ)を作ります。
Macなら
“`
$ mkdir フォルダ名
“`
そしたらそのフォルダをVSCodeで開いて下さい
次に開いたディレクトリの中に下記の３つのファイルを作ります。
（ファイル名はなんでも構いません、もし違う名前にした際は、適宜置き換えて読んでいって下さい）
index(ファイル名).html
style(ファイル名).css
App(ファイル名).js

### 各ファイルの説明

“`index(ファイル名).html

Web App開発をしたいなら知っておくべき基礎知識

# はじめに
Web Appとは、ChromeやFirefoxといったWebブラウザ上で動作するアプリケーションソフトウェアです。必要に応じて、クライアントがWebサーバとやりとりをすることで「記事を投稿」「ユーザ登録」など高度な機能を実現することができます。本記事では以下のことについて勉強します。

• クライアント/サーバモデル
• HTTPメソッド
• ステータスコード
• URI
• JSON
• Cookie
• セキュリティ

# クライアント/サーバモデル
多数のクライアントに対して、少

Node.jsでYahooの校正支援APIを叩いてみる

TextLintなどを調べていて、Yahooの校正支援のAPIがあったので試してみました。

> https://developer.yahoo.co.jp/webapi/jlp/kousei/v2/kousei.html

## Node.jsからアクセスする

Pythonのサンプルをもとに書いてみました。

> https://developer.yahoo.co.jp/webapi/jlp/sample/sample11.html

今回Fetch APIを使ってPOSTしてます。

“`js
const BASE_URL = `https://jlp.yahooapis.jp/KouseiService/V2`;
const YAHOO_APPID = `YAHOOディベロッパーの管理画面で取得したAPPID`;

const yahooKosei = async () => {
const ENDPOINT = `${BASE_URL}/kousei`;

try {
const data = {
id: ‘123

JavaScript(Node) でモジュールが直接実行されているかを判別する

# 概要

Python の `if __name__ == ‘main’` と同じことを JavaScript(Node) でも行いたい。

https://note.nkmk.me/python-if-name-main/

# 結論

“`javascript
if (require.main === module) {
}
“`

# 動作確認

“`js:foo.js
function doSomething() {
console.log(‘doSomething!!’)
}

module.exports = {
doSomething
}

// foo.js が直接実行された場合だけ、すぐに doSomething を実行する
if (require.main === module) {
doSomething()
}
“`

“`js:bar.js
const { doSomething } = require(‘./foo’)
“`

“`bash
$ node foo.js
doSomething!!
$ node bar.js
$

【もりたけんじ問題集】練習問題１１～１５

# こちらを解いていきます

https://gist.github.com/kenmori/1961ce0140dc3307a0e641c8dde6701d

# 今回身についたこと

+ `sort()`メソッド
+ ジェネレータ
+ スプレッド構文
+ `splice()`メソッド

# 練習問題１１

## 問題

“`
let arry =[
{id:1,name:’morita’},
{id:2,name:’kenji’},
{id:4,name:’uro’},
{id:3,name:’ken’}
];
をid番号が若い順にソートしたオブジェクトを含む配列を出力してください
“`

## 私の解答

“`js
let arry =[
{id:1,name:’morita’},
{id:2,name:’kenji’},
{id:4,name:’uro’},
{id:3,name:’ken’}
];
let tmp;
for(let i=0;i<=arry.length-2;i++){ if(arry[i].id>arry[i

【JavaScript】isPrototypeOf

`isPrototypeOf`メソッドは、対象のオブジェクトが、他のオブジェクトのプロトタイプチェーンに含まれるかどうかを評価するプロパティです。（プロトタイプチェーンについては[こちらの記事](https://qiita.com/howdy39/items/35729490b024ca295d6c)で分かりやすく解説されています！）

対象のオブジェクトが、他のオブジェクトに継承されているかどうかを調べることができます。
~~~javascript
{対象のオブジェクト}.prototype.isPrototypeOf({このオブジェクトのプロトタイプチェーンに”対象のオブジェクト”が含まれるかどうか});
~~~

以下では、コンストラクタ関数`Mutant`のインスタンスに対し、`Human`、`Mutant`、`Alien`が生成したインスタンスのプロトタイプチェーンに含まれるかどうかを出力しています。

~~~javascript
function Human () {}

function Mutant () {}

function Alien () {}

Mutant

DenoでHonoを試す 恐竜と炎[WIP]

DenoのWebフレームワークを調べていて色々なフレームワークが出てくるのですが、Deno Deploy向けという形でベンダーロックインされそうな雰囲気があったのでDenoだけでなく他の場所でも動くようなフレームワークが無いか探してたらHonoというフレームワークがありました。

Cloudflare WorkersやBunでも動くということでちょっと触ってみました。

触ってみた感覚としては、ルーティング周りなどExpressっぽい書き味でNode.js Expressを触ったことがある人なら直感的に書けるような印象です。

全然関係ないですが、スプラトゥーンのフェスでほのおを選んだタイミングだったので謎のシンパシーを感じて勢いで触ってみています。

>

## HonoをDenoで動かす

Honoのサイトにチュー

TypeScriptでQiita記事のPV情報を取得してみるメモ

Denoでの利用で勉強中メモです。

Fetch APIを使うサンプルとして前に書いた記事をベースにTypeScript版にしてみました。

https://qiita.com/n0bisuke/items/40d0c7831d22c4f1868b

今回は`/items/:itemid`のAPIなので記事の情報取得ですね。

“`ts
const BASE_URL = `https://qiita.com/api/v2`;

const getQiita = async (url: string): Promise => {

const ITEM_ID = url.split(`/items/`)[1]; //ITEMIDを抽出
const ENDPOINT = `${BASE_URL}/items/${ITEM_ID}`;

try {
const options = {
headers:{
‘Authorization’: `Bearer <トー

モーダルウインドウの実装方法4選

## 始めに

EC やイベント用 LP で期間限定のキャンペーンなど告知したいときにアピールしやすいモーダルですが、実装には色々方法があるのでご紹介、というか自分としても整理してみたいなと思い書いてみます。
HTML・CSS・JS 初心者の方やクライアントからの要望で使わないといけなくなったけど最近使ってなくてどんな感じにやればよかったっけ？という方へ参考になれば幸いです。

## 実装方法一覧

今回実装方法として上げるのは以下になります。

– 素の JavaScript（Vanilla-JS）
– jQuery
– Input ＋ Label
– Dialog

## 素の JavaScript（Vanilla-JS）

一番スタンダードなやり方かなと思います。

分割代入で配列やオブジェクトを簡単に取得！

# 分割代入とは？
ES2015から使用できるようになった、配列からオブジェクトから値を取り出して変数に代入する方法です。

一回の宣言で配列・オブジェクトの複数の値を変数に代入することができる便利な機能になります。

本記事では使用方法などをサンプルコードを用いて整理していこうと思います。

## この記事でわかること
– 分割代入を用いて配列・オブジェクトから値を取得する
– 取得対象がundefinedの時にデフォルト値を設定する
– rest構文を使用して分割代入の残りを取得する

## 分割代入を使用して値を変数に代入する
配列・オブジェクトの分割代入の使用方法についてになります。
### 配列の分割代入
配列の各要素を任意の変数名で複数代入することができます。
“`js:array
const rgbColorArray = [‘red’,’green’,’blue’];

// 配列rgbColorArrayの先頭 ~ ２個目まで、任意の変数名で代入。
const [r,g] = rgbColorArray;
console.log(r); // red

【MapLibre GL JS】flyToで目的地までジャンプする

## はじめに
この記事は#30DayMapChallenge2022 6日目の記事です。
テーマはNetworkです。
MapLibre GL JSを使って羽田空港と新千歳空港のマーカーを地図上に表示して、2地点間をジャンプしてみます。


https://30daymapchallenge.com/

## 地図表示
東京と北海道が収まるように表示してみます。

“`index.html