- 1. fetch
- 1.1. 名前情報を取得
- 1.1.1. JavaScriptの「基礎」が1時間で分かる「超」入門講座メモ
- 1.1.2. Chart.jsのscales optionsの書き方が変わっていたのでメモ
- 1.1.3. 骨までしゃぶりつくす「ぷよぷよプログラミング」(2/X)
- 1.1.4. Reactでemitする方法
- 1.1.5. 【jest】モック化したuseRecoilValueの戻り値がundefinedになる【react】
- 1.1.6. Apache EChartsのグラフをスイッチで切り替えられるようにする ~1日10行コーディング~
- 1.1.7. Webの勉強はじめてみた その32 〜AJAXとWebSocket〜
- 1.1.8. Githubがmermaid.jsに対応したので早速使ってみました。
- 1.1.9. 【JavaScript】オブジェクトにプロパティを追加・削除する方法
- 1.1.10. ブラウザバック感知の備忘録
- 1.1.11. 【JavaScript関数ドリル】を毎日やる【勉強用】その6 tail関数
- 1.1.12. eslint-plugin-reactで未使用メソッドを検知：no-unused-class-component-methods
- 1.1.13. フロント側での画像リサイズ方法
- 1.1.14. Javascript/Node.jsのimportやらrequireやらのまとめ
- 1.1.15. CSRF攻撃対策についてNode.js Expressでアプリを構築して実例で理解する
- 1.1.16. JavaScript で非同期処理のリトライ
- 1.1.17. [javascript] isTrusted=trueな疑似クリックを作る
- 1.1. 名前情報を取得
[Stripe Updates] Customer Portalから定期課金をキャンセルする際に、「キャンセル理由」を聞くことができるようになります
定期課金サービスを提供する上で、「なぜ顧客は解約したか」を知ることはとても重要です。
そのため、さまざまな企業やサービスで、解約時にアンケートを行うシステムを開発・実装しています。Stripeを利用している場合、Customer Portalを利用することで、この解約理由アンケートを簡単に実装することができます。
# Dashboardから設定する
もっとも簡単な設定方法は、Dashboardからの操作です。
[[設定 > カスタマーポータル](https://dashboard.stripe.com/test/settings/billing/portal)]から、[顧客によるサブスクリプションのキャンセルを許可]を有効化しましょう。
その後、[キャンセル理由を収集する]をオンにしま
【Chrome拡張】続編：Qiitaの記事を見ているエンジニアとリアルタイムに交流できる拡張機能作った
**本記事は、MMOBrowser(ver0.1.0)の追加機能を使ったQiitaの利用シーンを紹介する記事になります。
MMOBrowserの概要・利用方法は[こちらの記事](https://qiita.com/Hylia221/items/6142bdc527cc6b3c9fe5)をご参照ください。**# こんなことを思ったことはありませんか
– Qiitaで見つけた面白い記事の感想を共有したい…
– 自分が投稿した記事を見ている人に感想を聞きたい…
– 記事にあるコードや数式が分からないのでエンジニアに質問したい…## そんなときにはMMOBrowserを活用しよう！
MMOBrowserを導入することで、ブラウザ上に同じWebサイトにアクセスしている人たちのマウスカーソルが表示され、自由にコミュニケーションを取ることができるようになります（下図）。
Qiitを利用。
何種類かリソースが用意をされておりますが、今回はUSER情報（https://jsonplaceholder.typicode.com/users）
を使用させてもらいます。### JSONPlaceholder
## 実装
“`htmlfetch
名前情報を取得
“`
“`javascript
let name_bo
JavaScriptの「基礎」が1時間で分かる「超」入門講座メモ
[JavaScriptの「基礎」が1時間で分かる「超」入門講座【初心者向け】](https://www.youtube.com/watch?v=E08jeQBa1D0&t=1115s&ab_channel=%E3%81%A0%E3%82%8C%E3%81%A7%E3%82%82%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%2F%E5%B1%B1%E6%B5%A6%E6%B8%85%E9%80%8F)の講座メモです。
## let
– 値の再代入ができる## const
– 値の再代入ができない
– 位数の宣言## var
– letとほぼ同じ
– 今はletを使うべし## 関数
– function## addEventlisterner
## event.preventDefault();
## データ型
– データ型＝データの種類
– データの種類によって出来ることを区別するために存在1.プリミティブ型
– 真偽値
– 数値
– 文字列
– etc2.オブジェクト
– オブジェクト
– 配
Chart.jsのscales optionsの書き方が変わっていたのでメモ
[Chart.js](https://www.chartjs.org/)を使ってグラフを描くにあたってグラフのオプションの書き方が以前（v2）と変わっていてつまずいたので備忘録。
# 公式ドキュメント
ここみたらちゃんと書いてある。
[https://www.chartjs.org/docs/master/axes/](https://www.chartjs.org/docs/master/axes/)`@see`に記載されているここもoptionsだけどgeneralのことしか書いてない。（使うときは一緒に入れて渡す）
[https://www.chartjs.org/docs/latest/general/options.html](https://www.chartjs.org/docs/latest/general/options.html)# 環境
“`json:package.json
“chart.js”: “^3.7.0”,
“react-chartjs-2”: “^4.0.1”,
“`# 全部入りサンプル
“`typescript:Graph
骨までしゃぶりつくす「ぷよぷよプログラミング」(2/X)
この記事は未完成です@2022/02/15
# この記事の目的
この記事では[前回記事](ref)の– 目的2.「ぷよぷよプログラミング」のソースコードを理解することで、その仕様や設計を推測してドキュメント化する
に沿ってソースコードを読み込んだ結果をできるだけ仕様、設計に復元しようと思います。
# 前置き
「ぷよぷよ」は日本ではかなりの市民権を得ているゲームで、そのルールを知らない人はあまりいないと思います。ですので、ゲームとしてのルールはある程度知っている前提で、そのゲームをWebアプリとして動作させるために必要な仕様や設計をソースコードから書き起こします。下記を一読してからソースコードを読むと、何を実現しようとしているか理解しやすくなると思われます。以下は厳密な仕様を規定するわけではなく、ソースコードの理解を促す目的のドキュメントだと捉えてください。# ゲーム仕様
## 状態遷移仕様
game.js から抽出したゲームの状態遷移図が以下です。楕円が状態を表現します。ゲームは開始状態(Start）から始まり、終了状態（batankyu）へ移行するまでループしま
Reactでemitする方法
### はじめに
vueだと、$emitで親コンポーネントのイベントを発火します。
今回は、Reactで子コンポーネントのイベントを親コンポーネントに伝える方法を紹介したいと思います。親コンポーネント
“`
import React from ‘react’
import Layout from ‘../components/Layout’
import { Button } from ‘@material-ui/core’
import ChildComponentDialog from ‘src/components/diagnose/ChildComponentDialog’const IndexPage = () => {
const [open, setOpen] = React.useState(false)const openDialog = () => {
setOpen(true)
}
// 子コンポーネントのイベントハンドラに渡す用の関数
const closeDialog = () => {
setOpen(
【jest】モック化したuseRecoilValueの戻り値がundefinedになる【react】
# はじめに
タイトルどおりですが、モック化した`useRecoilValue`や`useRecoilState`の戻り値が`undefined`になってしまう現象に遭遇し、小一時間ハマってしまいました。
jest 初心者なので勉強がてらメモを残します。# 解決策
後に再現コードを記載しますが、先に結果を知りたい人用に解決策を記載します。
結論としては、以下の 2 点が解決策となります。– 各テストケースごとに`mockImplementation`を書く
– `beforeEach`に`mockImplementation`を書く`beforeEach`と似た関数に`beforeAll`がありますが、こちらはうまく動作しませんでした。
公式ドキュメント：[beforeAll(fn, timeout)](https://jestjs.io/ja/docs/api#beforeallfn-timeout)、[beforeEach(fn, timeout)](https://jestjs.io/ja/docs/api#beforeeachfn-timeout)# 再現コ
Apache EChartsのグラフをスイッチで切り替えられるようにする ~1日10行コーディング~
## 概要
### 1日10行コーディングとは
まず、1日10行コーディングというのは、1日10行でいいから新しいコード書こうよって感じのやつです(雑)
(1日1記事とか1機能とかだと続かない気がしてしまってる…)### 実装するもの
とあるソシャゲのイベント走った記録とかができるサービスを作りたい。
ただ、今日その中のグラフのタイプを切り替えられるようにする部分を作る。
## 手順
1. jqueryを使えるようにする
ラジオボタンの切り替えを検知したりするので素のJSだと大変なのでjqueryを使います。
jqueryのcdnを埋め込む“`html
“`
2. ラジオボタンを配置
グラフ切り替え用のラジオボタンを配置“
Webの勉強はじめてみた その32 〜AJAXとWebSocket〜
N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章9,10節です。## AJAX
Asynchronous JavaScript + XML
クライアント-サーバー間で、非同期に通信が行える。:::note
複数ページで実装していたサイトを単一のページで複数の機能(AJAXやWebSocket)を表現したアプリケーションを、シングルページアプリケーション(SPA)という。
:::“`javascript:app.js
const serverStatus = require(‘./routes/server-status’);
app.use(‘/server-status’, serverStatus);
“`“`javascript:app/entry.js
const loadavg = $(‘#loadavg’);setInterval(() => {
$.get(‘/server-status’, {}, (data) => {
loadavg.text(data.loadavg.toString());
Githubがmermaid.jsに対応したので早速使ってみました。
こんにちは。
Twitterでトレンドに上がっていたmermaid.jsとの連携対応が可能になったとの事だったので遊んでみました。
それだけの報告なので、特に技術的な価値はあまりないっす。実際のGithubでの表示とコードをそれぞれ記載していますので参考にどうぞ！
# シーケンス図
書き方。“`
“`mermaid
sequenceDiagram
ブラウザ->>+Controller: Httpリクエスト
Controller->>+Service: ロジック層処理
Service->>+Repository: クエリ発行
Repository->>+DB: データベース操作
DB->>-Repository: データベース結果
Repository->>
【JavaScript】オブジェクトにプロパティを追加・削除する方法
JavaScriptでオブジェクトにプロパティを追加・削除する方法をまとめておく。
# プロパティの追加
オブジェクトにプロパティを追加する方法は、““.““と“`[]“`を使う2つの書き方がある。
以下が各方法の基本的な書き方になる。“`javascript
<オブジェクト>.<プロパティ名> = <値>
<オブジェクト>[“<プロパティ名>“] = <値>
“`
これを使った簡単なサンプルが以下となる。“`javascript
const student = {
id: 1,
name: “ryota”,
};student.age = 17;
student[“grade”] = 3;console.log(student); // { id: 1, name: ‘ryota’, age: 17, grade: 3 }
“`# プロパティの削除
オブジェクトのプロパティを削除する方法は、“`delete“`演算子を使用する。
“`delete“`演算子の後に記述するプロパティの指定の書き方は追加と同様に書ける。“`
ブラウザバック感知の備忘録
#はじめに
仕事でブラウザバック時のみ実行される JavaScript コードを作成したので、その際の知見を書き留めておきます。
#画面読み込み完了イベントの発火
ブラウザバック時はキャッシュから画面が読み込まれることも相まって、使用するブラウザによって画面読み込み完了イベントの発火の扱いが異なります。
いくつかあるイベントの種類の中でも、「**pageshow**」はメジャーなブラウザ（Google Chrome, Firefox, Safari, Edge）のいずれにおいてもキャッシュから読み込まれた場合でも発火します。#ブラウザバックかどうかの見極め
ブラウザやキャッシュの状況によって反応が異なるので、併記した方が良い二つの判定方法を記載します。## 1. PageTransitionEvent.persisted
**PageTransitionEvent.persisted** はキャッシュから読まれたかを boolean で返すプロパティです。“`javascript
window.addEventListener(“pageshow”, function
【JavaScript関数ドリル】を毎日やる【勉強用】その6 tail関数
#【JavaScript関数ドリル】初級編のtail関数の実装のアウトプット
“`javascript:tail関数の挙動
_.tail([1, 2, 3]);
// => [2, 3]
“`
先頭を取り除いたものを新たに出力する
##tail関数の課題内容##tail関数に取り組む前の状態
– 元の配列を変更しないよう気をつける##tail関数に取り組んだ後の状態
– 数分で作成できた
– 変数名の付け方もnewばかりでなく、関数名を入れた方がわかりやすいと気づいた
– もっとサクッとfor文を使えるようになる##tail関数の実装コード
“`javascript:
const tail = (array) => {
const newArray = array.slice();
newArray.shift();
return newArray;
};console.log(tail([1, 2, 3]));
// =>[2,3]
“`#
eslint-plugin-reactで未使用メソッドを検知：no-unused-class-component-methods
eslint-plugin-reactに正式に未使用メソッド検知が正式にサポートされるようになった。
“`..eslintrc.json
“react/no-unused-class-component-methods”: “warn”,
“`## 検知できる内容
– 未使用のインスタンスメソッド：this.hoge()
– 未使用のインスタンス変数：this.varHoge
フロント側での画像リサイズ方法
フロント側で画像リサイズ方法を紹介します、取得した画像が大きすぎるため小さくして表示したい、送信したい場面に役立つかと思います。
## 画像をリサイズして表示する
表示するだけであれば、わざわざ容量を落とす必要もないためCSSで調整可能です。
新たなCSSプロパティであるobject-fitでのリサイズがオススメです。### デモ
See the Pen Javascript/Node.jsのimportやらrequireやらのまとめ
JavascriptとNode.jsを行ったり来たりしていると、import、export、exports、require、module、defaultの単語が頭の中でぐちゃぐちゃになりがちです。
備忘録として、使い方を残しておきます。ちなみに、Javascriptにおいて、webpackやbrowserify、babelといったbundlerを使ったrequireの使用は述べていません。純粋なNode.jsや、ブラウザ上のJavascript上での動作を想定しています。
#Javascript編
#import/exportを使わない方法
① インラインスクリプト
“`html:index.html
“`
CSRF攻撃対策についてNode.js Expressでアプリを構築して実例で理解する
## はじめに
Node.jsのExpressでテンプレートエンジンejsを使って実装するWebアプリを実例に、CSFR攻撃を受ける脆弱性がある状態と対策を講じた場合の実装を見ていく事で、CSRF攻撃について理解を深めてみようと思う。## CSRF（クロスサイト・リクエスト・フォージェリ）攻撃とは？
悪意のある人が用意した罠により、Webアプリのユーザ（利用者）に意図しないリクエストを送信させ、利用者の意図しない処理をWebアプリに実行させることが可能な状態になっている＝脆弱性がある時に、それを利用されてユーザが意図していない処理が勝手に実行されてしまうような攻撃を CSRF（クロスサイト・リクエスト・フォージェリ）攻撃という。（問題は、ユーザ本人の意図したものではない悪意のあるリクエストをWebアプリが受け入れてしまう事）。詳細は以下のサイトを参照。
https://www.ipa.go.jp/security/vuln/websecurity-HTML-1_6.html
※IPAのサイトを見ると、認証の仕組みを持つWebアプリ（ログインしているユーザ）に対する攻撃のみが
JavaScript で非同期処理のリトライ
JavaScript で 非同期処理 + リトライ の仕組みを作ったら意外とややこしかったのでメモ。
## 実装
“` js
function retry(func, onError) {
function _retry(e) {
return onError(e)
.catch((e) => {
throw e
})
.then(func)
.catch(_retry)
}
return func().catch(_retry)
}
“`– `func`
– 失敗したときに再試行したい何らかの非同期関数を指定する (Promise を返す必要がある)
– resolve するとその結果が返る、reject すると `onError` 実行後にリトライされる
– `onError`
– `func` が失敗した際に、再試行の前に実行したい何らかの非同期関数を指定する (Promise を返す必要がある)
– resolve するとリトライされる、reject す
[javascript] isTrusted=trueな疑似クリックを作る
# isTrusted
ブラウザ上で発生するEvent（clickとか）にはisTrustedというプロパティがついている。
https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
ユーザーが実際にElementをクリックした時はisTrusted=trueだが、例えば：“`javascript
const button = getElementById(“button”);
button.click();
“`などによるjavascriptで生成された疑似クリックではisTrusted=falseとなる。
# isTrusted=trueのイベントを作りたい
isTrustedはRead-onlyプロパティなので外部から変更することはできないし、そもそも疑似クリックはTrustされるべきではない（そらそう）。しかしどうしてもisTrusted=trueなクリックを作りたい時はある（ブラウザ拡張作りたい時とか）ので調べてみた。**セキュリティに関しては自己責任でお願いします**# コード
“
