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

reactでクッキー使うおすすめ

## 結論

あんまり専用なのでおすすめはない

## 結論

js-cookieでいい

【2019年最新版】JavaScriptプラグインjs-cookieで超簡単にクッキー管理

『OAuth徹底入門』のサンプルコードについて

Node.js 8系 + Express等のフレームワーク・ライブラリで構成されています。OAuthの主要プレイヤー3種類（クライアント、認可サーバー、保護対象リソース）はそれぞれ独立したサーバになっており、http://localhost:9000, http://localhost:9001, http://localhost:9002 で動作します。それぞれ単一のJavaScriptファイルであることが多いです。

書籍中では独立したターミナルで起動するのが良いとしています。実際、トラブルシューティングのためにはそのほうがよいです。単に一つのターミナルで一括起動する場合には例えば次のような感じでbashスクリプトで起動はできます

“`
#!/bin/bash

(
trap “kill 0” SIGINT
# TCP 9000
(node client.js) &
# TCP 9001
(node authorizationServer.js) &
# TCP 9002
(node protectedResource.j

JavaScriptの配列はクセが強い ～lengthを疑え～

ブラウザの開発者ツールで以下を確認してみましょう。

“`js:最終的に6個の要素を持つ配列が出来そうなソース
a=[10]
a[5]=20
a
a.length
“`


`empty × 4` の部分が曲者で、実はこの部分には「要素は無い」。
a[1] を評価すると `undefined` になるので「aの1番目には `undefined` が入っている」かのように見えますが、正確には存在しないキーを指定されたから `undefined` になっただけです。

# それが何？

さて、例えば終端が不確定な配列データをグラフ上にプロットしたいとかの要件で「配列の長さを最低N個まで拡張する」という関数を作る場合、何も考えずに実装するとこういうソースになると思います。

“`js
function fillUp(arr, length) {
 

React触って１年たったが学び直した

Reactをおおよそ一年くらい触って複雑なUI組む時にjQueryで書くより楽だな。。みたいな感覚は理解できたし開発はできているものの例えばRailsで開発してる時に比べて

「こんな書き方あったのか。。」とか、

「ReactのコアAPIでこんな機能あったの。。」とか

「ここまでがReactの機能でここまでがNextでここまでがreact-domなのか。。」

とかの「あっ、知らなかった。。」って場面が多いとは感じていた。

調べるコストもかかってるし雰囲気でやっちゃってる部分も多かったので公式のドキュメント、チュートリアル、オンライン講座、技術ブログ等で教材を漁って学び直したのでやったことを書いてみる。

## reactjs.org
reactで調べるとトップに出てくるサイト。以前もここでチュートリアルやったけど曖昧だった部分（hooksとかrefとか）を読み直した。

[https://ja.reactjs.org/docs/hello-world.html:embed:cite]

## Next.jsのチュートリアル

[ht

クライアントサイド系を歴史も踏まえて振り返る

## 概要
* クライアントサイド系の技術を改めて背景・歴史振り返る
* クロスプラットフォーム系とJSフレームワーク系を中心に記載
* 気になっている技術はFlutter/Electron
* Angular/Vueは引き続きウォッチ

## 背景や歴史
スマホが出てくる前はマルチブラウザ対応が種だったが、Android/iOSも含めてクロスプラットフォームでの開発が必須な時代で、その状況に準じた製品が様々出てきている。

JQueryみたいなプリミティブなものは2010年前後に主流だった記憶があるが、その後AngularJSなどのデータバインティングとか少しずつ大きめの機能を持つようなJSフレームワークが出てきたように感じる。

※なお、RIA（Rich Internet Application）と言う言葉で総称され、Apach FlexやJavaFXやSilverlightなど様々なクライアントサイド技術の流行もあった。

## クロスプラットフォームフレームワーク
[こちらの記事](https://qiita.com/nskydiving/ite

jQuery 基本集③~非同期通信(Ajax)~

#jQuery 基本集③~非同期通信(Ajax)~
自分の学習用です。
###非同期通信（Ajax）
リクエスト後にレスポンスが帰ってきた際、ブラウザが再読み込みされること無く通信が行われる通信方法。
非同期通信は英語で”Asynchronous JavaScript + XML”と表現され、略して***Ajax（エイジャックス）***と呼ばれる。
非同期通信ではJavaScriptを利用してリクエストを行う。
###JSON
Java Script Object Notationの略で、データ交換を行うためのデータ記述形式の一種。
キーとバリューの組み合わせでデータを表現する形式。

“`js
{name: “taro”, created_at: “2020-03-29T5:00:00.000+09:00” content: “JSONとは？”, image_url: null, id: 1}
“`
通常HTMLをレスポンスとして受け取ると、ブラウザは全てのHTMLを書き換え、画面が再読み込みされる。

**Ajax**では主に**JSONという型でレスポンス**が行われれる。

Vue Routerでquery書き換えができなかった(凡ミス)

試行錯誤の段階を記載しているので急いでいる方は下へ。
## 問題
Vue Routerを使用してqueryを書き換えようとすると次のように怒られた。

“`
Uncaught (in promise)
NavigationDuplicated {
_name: “NavigationDuplicated”,
name: “NavigationDuplicated”,
message: “Navigating to current location (“/blog?page=3″) is not allowed”,
stack: “Error↵ at new NavigationDuplicated (webpack-int…node_modules/vue/dist/vue.runtime.esm.js:1853:26)”
}

Error
at new NavigationDuplicated (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:20

Visual Studio CodeでツクールMVをデバッグ～NW.js(ローカル環境)編～

### 前提記事
「Visual Studio Code」+「Chrome」で「ツクールMV」のローカルでデバッグなテクニックの紹介
https://qiita.com/Sanshiro/items/084fb0971942e03db9a4

### はじめに
現在開発中のプロジェクトがVisual Studio Code(以下VScode)のchrome(ブラウザ環境)デバッグで動かなかったので、NW.js(ローカル環境)でデバッグする方法を紹介します。

### こんな人におすすめ
– ツクールMVをダウンロード版として開発していて、アツマールやPLiCyなど、ブラウザで配布する予定がないのでローカル環境でテストしたい
– 開発中のMVプロジェクトが、ブラウザ版では使えない機能を使っている
– ~~ブラウザ版だとキーの入力受付が数フレーム遅くて、操作感が気に入らない~~
– ツクールMVでNW.jsの最新バージョンや特定のバージョンを手軽に試したい

## 導入方法
VScodeの導入については、、@Sanshiro さんの記事
「Visual Studio Code」+「Chro

Firebase Functions [onCall]を使った関数でCORSが発生してしまう

# 前提

Firebase Functionsで、あらかじめ、次のような関数を用意しています。

“`typescript:server.ts
import * as functions from ‘firebase-functions’;
import { HttpsError } from ‘firebase-functions/lib/providers/https’;

export const exampleMethod = functions
.region(‘asia-northeast1’)
.https.onCall(async (data, context) => {
// hogehogeが空白でなければ中身をそのまま返し、空白ならエラーを投げる
if (data.hogehoge !== ”) {
return {
hogehoge: data.hogehoge
}
} else {
throw new HttpsError(‘invalid-argum

ONE PIECEで学ぶオブジェクト

#〜ONE PIECE〜で学ぶオブジェクト

javascriptを学習中の作者が、大好きなONE PIECEになぞってオブジェクト作成方法について考えてみました。

それでまず簡単にオブジェクトについて

###オブジェクトとは
**オブジェクトとはプロパティの集合体**と言えます。
中にはオブジェクトの機能とも言えるメソッド（処理）を含みますが、一つのオブジェクトが持つデータのことをプロパティと言います。
簡単に言いますと、現実世界に存在するものに例えられますが、?（車）というオブジェクトは、車名や色、排気量などの**プロパティ（データ）**を持ち、車というオブジェクト毎にその値は違ってきます。
（一つの駐車場に停まっている全ての車にも違いや個性がある様なものです）
そしてアクセルを踏むと車が走り出したり、ブレーキを踏むと減速する等の**メソッド（処理）**を持っています。

“`js
var 変数名 = {“キー”: “値”, “キー”: “値”, “キー”: “値”}; //この{}オブジェクトリテラルで囲ったものがオブジェクトで、今回は３つのプロパティを持っていま

for Each文

#はじめに

今回は、
for Eash文について説明していきます。

通常のfor文の場合、
配列内のデータを順に出力する際は、
設定が必要となり、少し複雑なコードになりがちで、
理解するのに時間が掛かってしまうと思います。
（私はそうです。）

そこで、
救世主になるのが、
forEach文です。
コールバック関数に実行したい処理内容を記述するだけで済むので、
コードをシンプルに記述でき、
ミスの軽減ができます。

#for Each文とは

まず、記述方法を見ていきましょう↓↓

“`js
var arr = [配列データ];
arr.forEach(コールバック関数);
“`

上記のようになります。

####一次元配列での例↓↓

“`js

var arr = [‘金子’, ‘源田’, ‘森’, ‘山川’];

arr.forEach(function(value) {
console.log(value);
});
“`

このコードでは、arrに格納された各要素に対して、
forEach文にて順に出力するような命令しています。
順番通り、金子,源田,森,山

jQueryUIを使用して複数要素の同時ドラッグを実現する

# 環境

– jQuery v3.4.1
– jQuery UI 1.12.1

# 実現したいこと


これです。
※実際にはイベントを発火させるなどやりたいところでしょうが、今回はまず「動かすこと」だけを目指します。

# ソースコード

“`test.html