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

【TypeScript】僕のチートシート

## 参考になる記事
早く理解したい方は、下記の記事と Udemy を使って最速で学習しましょう！
[TypeScriptの型入門 – Qiita](https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a)
[超TypeScript入門 完全パック(2020) \| Udemy](https://www.udemy.com/course/typescript-complete/)

随時更新していきます！！

[TODOリスト]

– interface
– implements
– デコレータ

## 変数

“`typescript
const text: string = “text”

// リテラル型
const lite: ‘foo’ = ‘foo’; // ‘foo’ しか入れることができない

// Union型
const union: string | undefined = “union”
“`

## 関数

“`typescript
// 引数 返り値 の順で実装
function method(arg

HTMLにおける相対パスの開発環境と本番環境での違いをなんとかする

#相対パスとは
相対パスは、HTMLにおいてはそのファイルからみた相対的な位置を表現したパスであり、要は同じフォルダにあるファイルなどを参照するのに使われます。
しかし、常にこれが同じになるとは限らず、かつ開発時と本番時を揃えるのが面倒くさい時にはなんとかしないといけません。
HTMLでは相対パスは`base`タグで決められます。JavaScriptでは`document.baseURI`で取得できます。
しかし`document.baseURI`は読み取り専用です。
#相対パスを変更する。
`base`タグを利用すれば相対パスを変更できます。なんでか知らないですが`document.baseURI`では変更できないので、`base`タグにid属性をつけて`href`属性を変更することで相対パスを変更できます。
この際にスクリプトなどは再読み込みされるようなので、パスが変更されることによって別のスクリプトが動作することになったりする可能性があります。

“`javascript
document.querySelector(“#base”).href=location.href;
`

VanillaJSでprivateな変数、メソッドを作る

#結論

“`javascript
// ↓ ここから

function Clazz() {
// public
this.pubVar = “pubVar”;
}

(function(clazz) {

// private
const priVar = “priVar”;
let hoge = “”;

// private（第一引数にthisを渡してね）
function priFunc(self) {
return “priFunc # ” + priVar + ” # ” + self.pubVar;
}

// public
clazz.pubFunc = function() {
return “pubFunc @ ” + priVar + ” @ ” + this.pubVar + ” @ ” + priFunc(this);
};

// セッターゲッターも作れるよん
clazz.setHoge = function(p

JavaScriptでt分布をそれなりにコンパクトに実装してみた

JavaScript組み込みの機能だけで[t分布](https://ja.wikipedia.org/wiki/T分布#:~:text=統計学および確率論,問題に利用される。)の累積分布関数(CDF)、確率密度関数(PDF)とCDFの逆関数である分位点関数を実装してみたのでそのメモです。
ちなみにCDFとPDFを同時に求めるために[双対数](https://ja.wikipedia.org/wiki/二重数)を利用しているので、双対数の簡単な実用例としてもお読みいただけるかもしれません。

##実装方針
自由度$\nu$のt分布のPDFは以下です。

$$f(t)=\frac{\Gamma((\nu+1) / 2)}{\sqrt{\nu \pi} \Gamma(\nu / 2)}\left(1+t^{2} / \nu\right)^{-(\nu+1) / 2}$$

CDFはこの関数を$t$について$-\infty$から積分したものになります。
ここで、$\Gamma(x)$はガンマ関数です。
これを素直に実装しようと思うとガンマ関数がネックなわけです。
JavaScript組み込み

【ブックマークレット】カウントアップタイマーを右下に常に表示する

正直需要はほぼ無いと思いますが、
「閲覧しているページの右下にカウントアップタイマーを
表示する」ブックマークレットです。1秒ずつ増えていきます。


javascriptコードの簡単な解説も一番下に記載しています。
カウントアップ、ダウンの参考にして頂けたら幸いです。

「Webページ上で何かを行う際の時間を計測する」
時に使用します。自分で制作したコンテンツを読む時間を
実際に計ってみる、Web上でのテストを解く時間を計測するなど。

【利用方法】
Chrome等のブックマークのURLとして下記のコードをコピペして
そのブックマークボタンを押す事で起動します。
STOPボタンで停止、restartボタンで再開、×ボタンで閉じます。

## ブックマークレット用コード

“`
javascript:
document.body.insert

RunJSを使ってサクッとJavaScriptを実行する

# はじめに
皆さんは [RunJS](https://runjs.dev/) というアプリを知っていますか？

RunJSとは気軽にJavaScriptを実行できるシンプルなアプリです。

JSのReplといえば、ブラウザで動く **Repl.it** などが有名ですよね。
ですが、これはさらに機能を絞り、プレイグラウンド要素を更に高めたオープンソースアプリです。

#マークダウンエディタのようにコードを即時に反映
Qiitaのマークダウンエディタなどのように、書いたコードが結果に即時反映されます。
実行ボタンなどを押すことなく、スムーズに結果を見ながらコードを書いていくことができます。

![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35465

async/awaitの仕組みメモ

async/awaitを学習する中で実際に書いて試してみたのでメモ

“`javascript
const makeRequest = (value) => {
console.log(‘Request received’)
return new Promise((resolve, reject) => {
if (value === ‘Google’) {
resolve(value)
} else {
reject(value)
}
})
}

const processRequest = (response) => {
return new Promise((resolve, reject) => {
console.log(‘Processing your request…’)
resolve(`Here is the response from ${response}`)
})
}

const sayHi = async (receiver) => {
console.log(`

JavaScriptの実行速度を確認したくて色々試したらjQueryの遅さが目立った

JavaScriptって難しいですよね。
普段は見やすいjQueryを使って書いちゃいますが、処理が複雑になってくると速度が気になってきます。
そこで、改めて実行速度を知りたいなと思い、こんなコードを書いてみました。

“`html

mapの中でawaitを使う方法

本当にただのメモですが、、

“`js
const list = await Promise.all(listA.map(async itemA => {
return { …itemA, …await this.getListB(itemA.id) }
}));
“`

ただawait書くだけではエラーになりますが、Promise.allを使えば良いそうです。

React hookで気持ちよく入力チェック〜エラー判定を行う

突然ですがこういうフォームっていいですよね！

– 入力が終わると、エラーかどうかを判定してエラー文を表示してくれる
– 正しい入力に戻ると、エラー文が消える

gifにするとこういう感じ！


シンプルですが、「どういう風に書けばこうなるか」は案外知らないと作れないと思います

今回はこういうフォームの作り方をさくっとまとめます

# 要点をまとめると
– `onChange`で、「入力値」を`useState`へ保存する
– `onBlur`で、「入力値を判定したエラー文」を`useState`へ保存する

これがわかればできます！

# 実装

では書いていきます

まずHTMLですが、「ラベル（はなくてもいいけど）」「入力欄」「エラー文を出す場所」があればいいです！

“`html

unique name

GASでプログラミング入門 Vol.4

# GASでプログラミング入門 Vol.4

社内サークルにてエンジニアから非エンジニアの方向けにプログラミングを教えるという活動を行っています。
今回はその教材第4弾です。
前回の記事は[こちら](https://qiita.com/YoshinagaYuta/items/ef2779594c5a101e5dea)

## 前回の演習問題の解答例

(1). for文を使用して下記のように実行されるプログラムを記述してください

“`
ループ処理5回目
ループ処理4回目
ループ処理3回目
ループ処理2回目
ループ処理1回目
“`

解答例コード

“`js
for(let i = 5; i > 0 ; i–){
console.log(“ループ処理” + i + “回目”);
}
“`

ポイントとしては`i > 0`と`i–`の部分です。
今まで例で記述したfor文とは記述が違っていますね。
この解答例のように初期値を5から始め、変数iをデクリメントしていきながら、0より大きく無くなったらループを終了しています。

(2). 数値を格納する変数numを宣言して、

【Gatsby.js】Sass + autoprefixerを導入する

Gatsby.jsで作ったサイトのスタイリングをSassで行い、autoprefixerを使いたい場合の設定をまとめます。

## Sassを導入
“`zsh
$ yarn add gatsby-plugin-sass
“`
“`gatsby-config.js
module.exports = {
plugins: [
`gatsby-plugin-sass`,
],
}
“`
“`zsh
$ mkdir src/scss
$ touch src/scss/style.scss
“`
“`src/scss/style.scss
.title {
font-size: 32px;
}
“`
“`zsh
$ touch src/components/layout.js
“`
“`jsx:src/components/layout.js
import React from “react”
import “../scss/style.scss”

export default ({ children }) => <>{children}
“`

【next.js】相対パスで指定するのは、もう古い！？たった数行の追加で絶対パスが使える方法とは？

#概要
・jsconfig.jsonを使えば絶対パスを指定できる
・pathsプロパティで各フォルダーごとの絶対パスを指定できる

#絶対パスを指定する方法
ルートディレクトリに**jsconfig.jsonファイル**を作成して、
以下の内容をコピペすればルートディレクトリからのパスでファイルをインポートできます。

“`jsconfig.json
{
“compilerOptions”: {
“baseUrl”: “.”,
}
}
“`

“`pages/index.jsx
import React from ‘react’;
import Header from “src/comp/Header”

export default function index() {

return (
<>

);
}
“`

#jsconfig.jsonでは何をしているのか？
上記のソースで何を指定してるのかを説明していきます。
まず、jsconfig.jsonとは何なのかというと**jav

【JavaScript】人生いろいろ 配列操作もいろいろ ～中級編 その① sort、reduce～

こんにちは、**どいこ**です。

[前回：【JavaScript】人生いろいろ 配列操作もいろいろ ～初級編～](https://qiita.com/doiko/items/90846f07399d780c8c20)

前回に続いて配列操作のメソッドを紹介していきます。
少し難易度が上がりますが、そこは**自分のスタンド能力**が**成長性：A**だと信じて参りましょう。
（例：空条承太郎さんのスタープラチナ、広瀬康一くんのエコーズ　などなど)

#sort()
>sort() メソッドは、配列の要素を in place でソートします。
>既定のソート順は昇順で、要素を文字列に変換してから
>UTF-16 コード単位の値の並びとして比較します。
>[Array.prototype.sort()-MDN web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

・・・in placeとは

【js】簡単にハンバーガーを作ろう

# ハンバーガーメニューを作ってみよう！

###ゴール
こんな感じのハンバーガー作ります！

### ハンバーガーメニューとは何か？
これらのサイトのように右上の棒線をクリックすると、
横や上からメニューが降りてくるような感じです！

####参考例
[POGG | スイートポテトパイ専門店](https://pogg-sweetpotatopie.com/)
[ONTOMO -音楽って、いいなあを毎日に-](https://ontomo-mag.com/)

使用目的としては、スマートフォンなどの小さい画面では
多彩なメニューを表示すると煩雑に見えてしまうため、省スペース化を目的に使用されます。
また、デザイン的にシンプルに見せる目的でも使用されます。
[ハンバーガーメニューとは｜デザインの種類・事例・2019年SEOなども絡めて解説

ヤマト運輸B2クラウドと全角スペースのある住所

WEBアプリケーションになった送り状作成ソフトB2が登場してから久しい

とあるお客様の住所が長く、後半に全角スペースが2ヶ所で使われていた

そうしたらどういうわけか一部文字列をロストしてしまう

どうやら仕様だという

残念

とりあえず半角スペースに正規化してやれば防げるらしい

Next.jsでトークン設定済みのAxiosを使えるようにしてみた

# 経緯

* Axiosに認証トークンを設定する処理を共通化したい
* 何ならAxiosを使用する際にトークン設定済みの状態にしたい

# 方法

* Axiosのインスタンスを生成→ヘッダーの設定→そのインスタンスの返却、を行うラッパー?ソースファイルを用意する。

* 各ソースファイルでAxiosを使用したいときは、そのラッパーファイルから呼ぶようにする。

# 実装

* ラッパーファイル（例：customAxios.ts）

“`ts
import axios from ‘axios’; // Axios本体をインポート

const instance = axios.create(); // Axiosインスタンスを生成

instance.interceptors.request.use(
(config) => {
// 認証トークンをヘッダーに付与
config.headers.common[‘Authorization’] = ‘Bearer ‘ + process.env.TOKEN; // この例ではBearerトークンを設定
re

チームでWeb開発を行う際に決めておきたいことまとめ

# はじめに
チームで `Web` 開発を始める際に決めておいた方が良いものを自分用にまとめています。
気付きがあり次第、追加・修正していきます。
もしこういうのあった方がいいよとかこれは違うくない？ってのがあればコメントお願いします。

## ライブラリ
– `UI`ライブラリ
– `React.js` ?
– `Vue.js` ?
– `AngularJS` ?
– `Flutter` ?
– `etc…`
– テストライブラリ
– `Jest` ?
– `Cypress` ?
– `Mocha` ?
– `etc…`

– 状態管理ライブラリ (ex, `React.js`)
– `Redux` ?
– `ContextAPI` ?
– `mobx` ?
– `Recoil` ?
– `etc…`

## 命名規則
– フォルダ名、ファイル名
– イベントハンドラー名
– コン

YouTubeの日本語以外のコメントを非表示にする拡張機能を作った(けどあまりうまく動作しなかった)話

#はじめに

過去の投稿欄を読んでもらうと分かると思うかもしれないんｄねすけど、最近(特に大学院入試前とか)Vtuberの配信をめっちゃくちゃ見ていました。中でもホロライブの配信を見るのが特に多いんですけどコメント欄の英語率のまあ高いこと。アーカイブのコメントを見ようと思ったときに英語で埋め尽くされるのもまーどうかなって感じで色々と探したんですけどそのたぐいの拡張機能が見つからなかったので頑張って作りました。

#コード部分
・manifest.json

“`json
{
“manifest_version”:2,
“name”:”HideENGCommentsOnStream”,
“version”:”1.0.1″,
“description”:”YouTubeの生配信での日本語以外で表記されているコメントを非表示にします。”,
“content_scripts”:[
{
“matches”:[“https://www.youtube.com/watch*”],
“js”:[“

IOSTでほとんどRAMを使わずにデータを保存する方法

## はじめに
ブロックチェーンのユースケースの一つとして「何かの履歴」を証明として残すということがあると思います．
Ethereumとかを使うと，RAMエコシステムがないので，ストレージ利用は高価．データを消してもETHは戻らない．
でもIOSTの場合はRAMエコシステムがあるおかげで，使い終わったストレージ領域は削除するとRAMトークンが返却されてストレージの再利用ができる．
なので，IOSTの場合は使わなくなったストレージは積極的に削除すべきということだ．
ストレージデータのいいところは「書き換えられる」ということだ．でも履歴データって書き換えますか？？ないですよね．
**じゃあ履歴データはずっとRAMに残しておく必要は無いですよね．**
とりあえずスマートコントラクトのコードを見ていきましょう．

## 悪い例

ずっとRAMに履歴を記録していくスタイル

“`js
class BadHistory {
init() {}
add(attr, action) {
const history = JSON.parse(storage.mapGet(tx.pub