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

GitHub Pagesで公開するときWebpackのパス関係で少し詰まった話

GitHub Pagesはとても手軽に公開ができ、
自分のようなフロントエンドエンジニアにはとても重宝しています。

ですが、Webpackを用いたページ作成の際、躓き、
これといった解決方法がWeb上に見つからず、自己解決したので、解決方法を残しておきます

## どんな問題か？
GitHub Pagesは通常、
> https\://userName.github.io/repository/

というURLがルートとなる構成となっています。（userNameとrepositoryは任意）

その際、ルートディレクトリが1階層ずれてしまい、その影響で

“`JavaScript
fetch(‘../data/hoge.json’)
“`
といったファイルを読み込もうとしたときパスがずれてしまい404エラーとなってしまいました。

## 問題発生時の環境

WebpackにはJSとSASS(Scss)だけを通して、JSとCSSで出力していました。

長くなってしまったので各詳細はまとめてあります。

ディレクトリ構成

【自分用メモ】JavaScript

## Node.js

### npmとYarnの違い
* Yarn：Facebook発のパッケージマネジャーはnpmに代わるスタンダードになるか
* https://www.webprofessional.jp/yarn-vs-npm/

[JavaScript]お手軽に文字列を（ほぼ）衝突させないで生成する方法

例えば、ユーザ登録用のダミー値を複数かつ衝突させないで用意したい場合がありますよね。
そんな時に**ちょっと**した工夫で、文字列を生成できる方法を紹介します。

## 実装

“`js
new Date().getTime().toString(36); // => kcexh9g6
“`

## 解説
ミリ秒をX進数に変換するだけで。お手軽に文字列を生成することができます。
`toString()`に2-36の間の数を与えるとその進数へ変換できます。
また、`Date().getTime()`は1970年1月1日00:00:00から経過したミリ秒を返すので、
この二つを利用すれば桁数も自由に変えることも可能です。

初心者向け！JavaScriptの演算子について解説！　byウェブカツ

JavaScriptに限らず、どのプログラミング言語でも共通する基礎には
**「演算子」「条件文」「繰り返し」「変数」「関数」**
などがあり、まずはこの基礎中の基礎の理解が必要となる。

今回はその中から「JavaScript」での**「演算子」**について解説します。

# 「演算子」とは？
演算子とは**主に「データの代入・計算・比較」を担当する様々な記号**のこと。

# 演算子の種類と解説
初心者は最初から全部を網羅する必要はないので、基本的な内容をピックアップしました。
## 代入演算子
### 「代入演算子」とは？
簡単に言うと、**データを変数に代入するためのもの**です。
最もよく使用されるのが「=」記号。

学生時代にやった算数や数学では、「=」は「**等しい**」という意味で使っていたので、慣れるまで違和感があると思うが、プログラミングでは「**等しい**」ではなく「**代入する**」という意味で使われます。

### 代入：（=）記号
さきほども説明したように、代入演算子は「代入」をします。
「=」の右側と左側にわけて見ていただきたいのですが、「

VisualStudioCodeでNuxt.jsを使ったDockerコンテナ内での開発

# はじめに

以前、[環境を汚さず（選ばず）Nuxtプロジェクトを作成しGitHub Pagesで公開するまでの一部始終](https://qiita.com/nakazawaken1/items/675b7e16b793330db410) という記事を書きました。
その後、より簡単にNuxtの開発環境を作れないかと何回かやっているうちに、
VisualStudioCodeをうまく使えばよりシンプルにできることがわかってきたので、再度まとめました。
Nuxtのバージョンが上がってプロジェクト作成時の設定が若干変わっています。

# 事前準備

Docker, Visual Studio Codeをインストールしておきます。

これからインストールする方は以下を参考にしてください。

[Windows 10 Home に Docker for Desktop をインストールする手順](https://qiita.com/nakazawaken1/items/2646e0dac287952c3fd3)

[VisualStudioCodeのインストール手順(Windows)](https

【javascript】ロックとキーのシミュレート

書籍のアウトプットとして

ロックとキーのシステムを構築する。
lock関数では鍵をかけて保管するデータが有る。
戻り地はロック解除のための一意のキー(key)。
unlock関数は正しいキーを使ってロックを解除する。
したがってAPIは`{key,unlock}=lock(secret)`となる。

“`javascript
function lock(secret) {
const key = Symbol(‘key’)
return {
key,unlock(keyUserd) {
if (keyUserd == key) {
return secret;
} else {
return ‘*’.repeat(secret.length || secret.toString().length)
}
}
}
}

const {key,unlock}=lovk(42)
console.log(‘key’)//**
console.log(42)//**
console.log(key)

Nuxt.js: middlewareを使って特定のページ以外からのアクセスをリダイレクトする

# 成り行き

nuxtを使用しているアプリを作成中、ログイン後の二段階認証ページなどログインした後にアクセスしてほしくないページにアドレス直打ちで入れることに気づきました。

Nuxtには`middleware`というページレンダリングを行う前に設定されたメソッドを実行してくれるAPIがあります。今回はmiddlewareを用いて、特定のページ以外からのアクセスを行なった場合リダイレクトするようにしました。

# コード

“`js:auth.js
export default function({ from, redirect }) {
if (!from || from.path !== ‘/login’) { // 利用される場合、/loginには任意のパスを入れてください
redirect(‘/’);
}
}
“`

あとはこれをページのmiddlewareプロパティに設定するだけです。

## 解説

`from`は遷移元のrouteデータが入っています。
今回の場合ログイン後に表示される二段階認証ページへのアクセスを制限したかったので、fromに入って

【javascript】計算されたプロパティ名

書籍のアウトプット

#計算されたプロパティ名

現在使用している状態マネージャを別のライブラリに対応させる必要があるとする。

このライブラリは状態に格納する必要があるいくつかの値を渡す。
問題はこのライブラリが渡すキーとペアが状態マネージャのメソッドに渡せるオブジェクトではなく、配列形式であるということ

そこで状態マネージャをうまくライブラリに渡すために仲介関数を作成する。

“`javascript
function setValue(name, value) {
const changes = {}
changes[name] = value
stateManager.update(changes);
}

const [name, value] = otherLibrary.operate()
setValue(name, value)
“`

ポイントはsetValue関数でプロパティを定義する前にからのオブジェクトを作成しなくていけないこと。
これはプロパティ名は動的に設定されるため。

{name:value}というものを定義していたとすれば、プロパテ

WWDC 2020 Web Developer 向け情報

Web Developer 向けの WWDC 情報です。個人的には Safari Web Extension が追加されて、Safari を使ってる方にも自分の Web Extension が提供できるようになったのが一番嬉しかったです。
なんというかやっぱり色んなベンダーを超えたブラウザで同じような体験が提供できるのがウェブテクノロジーの強みなので、よかった。

# WWDC for Web Developer

ざっくりまとめ

1. Safari (WebKit) がアップデート
2. iOS のデフォルトブラウザを Safari 以外に変更可能に
3. App Clip が登場、ウェブページでもサポート
4. Safari Web Extension が登場
5. WKWebView のアップデート
6. (今回は省略) Sign in with Apple の強化
7. (今回は省略) Touch ID / Face ID の対応
8. (今回は省略) Web Inspector の強化

# Web デベロッパのための新機能

▶︎ [https://developer.a

Google スプレッドシートのデータを JS で fetch したい！

Google スプレッドシートを方眼紙としてではなく、ちゃんとデータを保存するテーブルとして使用していた場合、外部のシステムからそのデータを使用したいと思うのは必然ですよね？なんなら Web のフロントエンドから直接 JavaScript で `fetch` して使いたいですよね？？

それ簡単にできますよ？そう、Google Apps Script ならね！

例えば Google スプレッドシートにこんなデータがあって、このデータを外部から JSON で取得したいとしましょう。この記事の最後に完成する[こんな API](https://script.google.com/macros/s/AKfycbyRzwWIOOl6xI-c-kB6-rKYm5L-UwBRe_FZwD13_n0An4_Pyeg/exec) を作るという事です。


Firebase SDKをJestでMockしてテストする

## やりたいこと
Firebase SDKを利用した関数のテストをしたいと思い立ちました。実際にAPIにアクセスせずにテストを実行したいので、Firebase SDKをMockしてテストを行うこととしました。テストはJestを使います。

## テスト対象のコード
例としてCloud Firestoreを利用する際の手順を記載します。
なお、以下には記載していませんが、環境構築は終わっているものとすします。（手順は[こちら](https://firebase.google.com/docs/firestore/quickstart?hl=ja)の通り！）

以下のようなFirestoreのドキュメントを監視して更新があったときにsomethingをする関数をテストすることにしてみます。

“`javascript:target.js

async watchDoc({ commit }) {
await firebase
.firestore()
.collection(‘users’)
.onSnapshot((snapshot)

RailsとAjaxを使ったいいね機能の非同期通信

転職活動用に個人アプリを開発中です。
今回、RailsとAjaxを使って、いいね機能の非同期化を行いました。

AjaxではjQueryを使うため、jQueryを使えるようにしておく事前準備が必要です。それは[参考記事](https://qiita.com/__tambo__/items/45211df065e0c037d032)を見てください。以下の記述はそれが設定済みのうえでの話です。


### 実現した機能
・「いいね」ボタンを押すとリロードせずに「いいねを取り消す」に表示が変わる
・「いいね」ボタンを押すとリロードせずにlikesテーブルにデータが1つ追加される
・「いいね」ボタンを押すとリロードせずにいいね数が1つ増える
※その逆もしかり

# このコードでうまくいきました

### コントロー

Javascript クラスの書き方 進化版

かなりいいと思います。もうこれで決定ですね。
あえて何も説明を書かないが、わかる人がわかると思います。

“`js
‘use strict’

let Cat = (function() {
let _share = ‘only one’;
let privates = new WeakMap();
let $ = function(o) {
return privates.get(o);
};
function Cat(name) {
privates.set(this, {});
$(this).name = name;
}
Cat.prototype = {
//self:function(){return privates.get(this);},
init:function(){},
load:function(){},
say:function(){console.log(‘my name is’, $(

秘密にしておきたかったんだけど、実はTwitterにはWebページを埋め込めるんだよね

こんにちは、Twitter大好き丸の [あかい](https://twitter.com/Ver1000000000) です:baby_chick:

タイトルの通りなのですが、**実はTwitterにはWebページを埋め込むことができます**。（具体的には「ツイートには」ですが）

「WebページにTwitterを埋め込む」ではないですよ。
次のツイートをご覧ください。

つくったから見て！！！！

特にPC版Twitterから《《《再生》》》してみて！！！！！https://t.co/a1KLMSXfaV #朱猪わらい

— あか

Google Formのサブミット時にGoogle Apps Scriptで値を取得する（Slackに通知するサンプルコード付）

# 概要
Google Formのsubmit時にtriggerとして設定した関数からフォームの情報を取得したい。
これを達成するためドキュメントを読んだり、リバースエンジニアリング的に調査した結果をまとめておきます。
備忘録です。

コピペで使えるようなコードを記載していますので、ぜひご利用ください！

# 対象読者
– Google Formのsubmit時に何かしたい人
– Google Formのsubmit時にSlackに通知したい人

# 前提知識
Google Formのフォームサブミット時のトリガーのコールバック関数の一覧を確認しておきましょう。
参照: https://developers.google.com/apps-script/guides/triggers/events#form-submit_4

– authMode
– response
– source
– triggerUid

Google Formのフォームサブミット時のユーザが回答した内容は `response` パラメータに含まれます。
回答以外の要素(タイトル、説明)などは `sour

更新後のstateの値を使ってdebounce処理をしたい

##デモ
#### **`App.js`**
“`jsx
import React, { useState, useEffect, useCallback } from “react”;

export default function App() {
const [state, setState] = useState(“”);

const callback = useCallback(() => {
//この中で更新後の値が使える
console.log(“debounced!!!”, state);
}, [state]);

useEffect(() => {
const handler = setTimeout(callback, 1000);
//cleanup
return () => {
clearTimeout(handler);
};
},[callback);
return (

【EMMET 記法】　基本　よく使うやつ　エメット記法　まとめ

##【メリット】
■　コーディングが早くなります。
■　ミスが少なくなります。

##【開発環境】
■ Mac OS catalina
■ **VS code**

##【やっていきましょう】

##HTML版
#### div.hoge

“`html:hoge.html

“`

#### div#hoge
“`html:hoge.html

“`

#### div*3
“`html:hoge.html

“`

#### div>h2
“`html:hoge.html

“`

##CSS版

#### h100
“`css:hoge.css
heigh: 100px;
“`

#### w100
“`css:hoge.css
width: 100px;
“`

#### bc
“`css:hoge.css
background-color:

WebStorageで1回目のアクセス時のみモーダルを表示する WebStorageで1回目のアクセス時のみモーダルを表示する

###HTML
“`html

モーダルの中身です。
モーダルの中身です。
モーダルの中身です。

次回以降表示しない

閉じる

“`
###Javascript

“`javascript
// モーダルの処理
var bg = document.getElementById(‘c-modal_bg’);
bg.addEventListener(‘click’, modal_close, false);

var close = document.getElementById(‘c-modal_close’);
close.addEventListener(‘click’, modal_close, false);

func