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

N予備校の教材でAjaxでCORSを試してみる

# やりたいこと

N予備校のAjaxのページに「同一生成ポリシーを満たさない場合CORSにひかかって通信できません」と書かれているが、そのあたりの回避策について特に紹介されていなかったので`Access-Control-Allow-Origin`を試してみる。

## 前提知識

* CORS https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
* N予備校 https://www.nnn.ed.nico/courses/497/chapters/6891
* この教材をそのまま使います（非会員は見れません）

## 環境

* Vagrant ubuntu（Node.jsにて上記のリンクのサーバが稼働している）
* 手元のマシン（Mac）

## 実験

* 手元のマシンのブラウザから、Vagrant上のNode.jsに対してAjax通信を行い失敗することを確認する
* CORSを回避するためにサーバー側にヘッダーを挿入する

### 修正前

* LoadAvgが表示されない
* コンソールログをみると以下のエラーが発

【useState/ReactRedux】Reactにおける状態管理

## 概要

– Reactにおける状態管理のしかたをReact標準で備える`useState`を使ったものとReactにおけるReduxライブラリである`ReactRedux`を使ったものを紹介します

## サンプルアプリの準備

– この後の説明をするためのサンプルを作っておきます
– 必要なライブラリを追加

“`sh
yarn add react react-dom react-router-dom parcel-bundler
“`

`index.html`を作成

“`html:index.html

“`

`index.js`を作成

“`jsx:index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
i

Reactのチュートリアルの三目並べをjQueryでやる

[前回](https://qiita.com/GodPhwng/items/1a4c2e0b784c7a4f8b54)作った三目並べをjQueryで書いてみようと思います。
どれくらい煩雑になるのだろう。

#数値の表示のみ
“`html:index.html

GraphQL Mesh は何を解決するのか？ ~ Qiita API を GraphQL でラップして理解する GraphQL Mesh ~


# GraphQL Mesh とは

[The Guild](https://twitter.com/TheGuildDev) から [GraphQL Mesh](https://github.com/Urigo/graphql-mesh) が発表されました。

? GraphQL Mesh – Query Anything, Run Anywhere ?https://t.co/PlZpAC9b54

? I'm very proud to announce our new open source library – GraphQL M

チーム開発 3/24

#メモです
商品出品機能のサーバーサイドを作っていく

画像を貼る際にすぐに画像が
プレビューできるようにする
複数画像を送信できるようにする

使うメソッド
fields_forは,file_fieldや collection_check_boxesなどと
同じくフォームのインプット要素を生成するフォームヘルパーです。
1つのリソースに対し紐づいた、
複数の別のリソースを同時に保存したい際に利用します。
例えば今回のような1投稿に対して複数の画像をつけるパターンや、
1投稿に対して複数のタグをつける時などにも利用できます。

“`ruby
<%= form_for @product do |f| %>
商品名<%= f.text_field :name %>
価格<%= f.number_field :price %>
<%= f.fields_for :images do |i| %>
<%= i.file_field :src %>
<% end %>
<%= f.submit %>
<% end %>
“`

accept

for文

#forとは

ループ処理を行う為の、
方法の１つです。

記述方法から見ていきましょう↓↓

“`js

for (初期値; 条件式; ステップ) {
　　繰り返し処理
}
“`

上記のように記述していきます。

続いて、＋１をループ処理していきましょう↓↓

“`js

let num=9;//変数「num」を定義

//繰り返し処理
for(num=1; num < 10; num++){ document.write(num);　 }//1,2,3,4,5,6,7,8,9 ``` 上記では、 ９までの処理が、実行されます。 ###初期値 今回でいうと、「１」になります。 最初に変数で、「９」と定義されていますが、 for文が開始してから、初期値で上書きされてしまいます。 ###条件式 今回を見てみると、 10未満の処理まで、表記されることになります。 もし、最初から条件式で、 false（条件式が成り立たない）になる時は、 処理は行われません。（表記なし） ###ステップ 増減式と呼ばれます。 初期値を増減していく計算方法になります。 #途中で

高階関数ってどんなときに使う？

高階関数(higher-order function)が流行っているので、高階関数をどんなときに使うのかを書いてみます。
高階関数というと「関数を関数に渡す」ということをイメージできますが、実際にどういう風に使うものかと聞かれると「関数とかサブルーチン」を渡したいときに使うものだよくらいにしか答えられないのでよくよく考えてみました。

私はよく使うと思うのは次の用途が多いと思います。

* 実装の切り替えを柔軟にする用途 (関数を受け取る関数)
* 処理の管理や制御のための用途 (関数を受け取る関数)
* (省略)関数の構築を簡単にする用途 (関数を返す関数)

特に「関数を返す関数」も高階関数と呼ぶようですが、今回はややこしくなるので高階関数のうちでも「関数を受け取る関数」についてみていきたいと思います。

# 実装の切り替えを柔軟にする用途

## 高階関数を使わないと

もし仮に言語に関数に関数を渡すことができなかったとしましょう。
（大抵の言語は関数を関数に渡せるかそれに準ずる機能を提供してます。）

じゃんけんをするプログラムを書いた場合は以下のようになるでしょう。

“`

Railsフリマアプリ　payjpを使ってクレジットカードを登録・削除

# payjp とは・・・？
`クレジットカードを登録、変更、購入を行ってくれる便利なAPIです。`
みんさんもフリマアプリ、ECサイトでクレジットカードを使って商品の購入すると思います。その時登録したクレジットカード情報はどこに保存されているでしょうか？私は運営するサイトで暗号化されて管理されているのだと思っていましたが、違うようです。たしかにサイトのデータベースにクレジットカード情報を登録するのはセキュリティ上よろしくないですよね。
このとき登場するのが`payjp `になります。

# payjpの仕組み
まずpayjpとフリマアプリではどのような流れでクレジットカードの処理が行われているのかざっくりとイメージしましょう！
私はここを飛ばしてすぐコードを書き初めてため概念の理解に時間がかかりました。わかれば非常に単純でした。笑
以下の記事がとてもわかりやすく参考になります。
[Pay.jpの仕組みについて！](https://qiita.com/wacker8818/items/d050f1b5632a271ebda5)
セキュリティに加えて、payjpで発行されるトークンと顧

Kinx 実現技術 – JIT

# JIT Compile – Just In Time コンパイル

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。作ったものの紹介だけではなく実現のために使った技術を紹介していくのも貢献。その道の人には当たり前でも、そうでない人にも興味をもって貰えるかもしれない。

前回のテーマは [VM (Virtual Machine)](https://qiita.com/Kray-G/items/034454f69dfa914f56c9)。今回のテーマは JIT。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](ht

商品出品画面を作る

# メルカリの商品出品画面を参考にコピーを作る
参考画面[メルカリ](https://www.mercari.com/jp/sell/)

使用する機能

– ActiveStorage(画像投稿)[リンク](https://qiita.com/m-kawakami/items/492f18473a4c31ca9c5f)
– ancestry(多階層カテゴリー)
– active_hash(静的データ作成)

##とりあえず出来たコード
“`haml:new.html.haml
.sell
%header.sell-header
= link_to root_path do
= image_tag ‘mercari_top_logo.svg’, alt: ‘mercari’, height: ’49’, width: ‘185’
-#メイン部分
%main
%section.sell-container
= form_with model: @item do |f|

-# 画像部分
.sell-c

Electronでカレンダーを作る　番外編①　～リファクタリング～

# はじめに

どうも、こんにちは。
Electronでカレンダーを作っているのですが、ロジックをつらつら書いているうちにファイルが膨れあがって読みづらくなってきたので、ここらでスッキリさせようと思い、リファクタリングをすることにしました。

前回までの記事は、以下を見て下さい。
[link1]:https://qiita.com/turn-take/items/e8b7f0aa8ac4d22a5741
[link2]:https://qiita.com/turn-take/items/19b8b21671867b3e4758
[link3]:https://qiita.com/turn-take/items/12d967678e4764cd7683
[link4]:https://qiita.com/turn-take/items/3858a33e884c2a263e48
[link5]:https://qiita.com/turn-take/items/be20ba20c39a54c70dae

[Electronでカレンダーを作る①][link1]
[Electronでカレンダー

[Node.js] request モジュール がDeprecated になっていた

### 内容
> As of Feb 11th 2020, request is fully deprecated. No new changes are expected to land. In fact, none have landed for some time.

– 2020年2月11日をもってDeprecatedになったようです。
– 下記のモジュールについても `request` と依存関係があることから非推奨となりました。
– [request-promise](https://github.com/request/request-promise)
– [request-promise-native](https://github.com/request/request-promise-native)
– [request-promise-any](https://github.com/request/request-promise-any)
– 代替手段については[このissue](https://github.com/request/req

【JavaScript】全ての値がオブジェクトに`なり得る`

## はじめに
[開眼!JavaScript](https://www.oreilly.co.jp/books/9784873116211/)を読んだまとめ的な記事です。

## オブジェクト
「オブジェクトとは、名前と値を持つプロパティを格納する**コンテナ**にすぎない」
著者も言っていますが、オブジェクトとはただのプロパティを持った箱です。
これ以上も以下もありません。

## プリミティブ型
リテラルを使って値を生成したり、new演算子を使用せずにコンストラクタ関数で値を生成した際には、プリミティブ型となります。

“`js
// どちらもプリミティブ型
const myString = 1;
const myString2 = String(‘hello’)
“`

プリミティブ型はオブジェクトではありません。
ですが、プリミティブ型でもStringオブジェクトで使用できるメソッドを使用することができます。
何故でしょう。

“`js

// オブジェクトを生成
const myString = new String(‘hello’);

console.log(myS

【JavaScript】一度は聞いた「即時関数」と「クロージャ」について

### 概要

一度は耳にしたであろう「即時関数」「クロージャ」について簡易的にまとめました。

### 即時関数

名前の通り、即実行される関数のことですね?
通常、無名関数を実行する時は、下記のように一旦変数に格納して括弧演算子で実行したりします。

“`js:
var hello = function(name) { return `${name}さん、Hello!!`; };
hello(‘太郎’) // 太郎さん、Hello!!
“`
ですが、JavaScriptには**即時関数**と呼ばれる構文が存在します。
上の例を即時関数で書き換えると、以下のような記述になります。

“`js:
(function(name) { return `${name}さん、Hello!!`;})(‘太郎’); // 太郎さん、Hello!!
“`
上のように括弧(グループ化演算子)で囲むことにより、定義と実行が行われるのですね。
* ちなみに、以下のように即時関数に関数名をつけたりもできます。

“`js:
(function hello(name) { return `${nam

【React】チュートリアルの三目並べをやる #2

#前回
[【React】チュートリアルの三目並べをやる #1](https://qiita.com/GodPhwng/items/d7bc022dd12fde4cab63)

#タイムトラベル機能の追加
[前回](https://qiita.com/GodPhwng/items/d7bc022dd12fde4cab63)は通常の三目並べ完成までやりました。
今回はその三目並べに「タイムトラベル機能」なるものを実装していきたいと思います。履歴ですね。

[公式チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html#adding-time-travel)

##着手の履歴の保存
suquaresの配列を`setState`で毎回新規オブジェクトで更新していたことがここで活きるらしいです。
このオブジェクトを更新のたびに保持していきます。

その履歴を保持する場所は一番TOPの`Game`にするそうです。
これによりBoardは`state`を保持する必要がなくなります。

“`react:Game
class Game extends

【React】チュートリアルの三目並べをやる #1

[前回](https://qiita.com/GodPhwng/items/281be00fa9ff3fec1fdd)まではProgateの無料レッスンを一通りこなしました。

今回からはアプリを作成するアウトプットを行っていこうと思います。
または、自分が新たに習得した知識の共有等も行えたら良いなと思います。

**次回**
[【React】チュートリアルの三目並べをやる #2](https://qiita.com/GodPhwng/items/1a4c2e0b784c7a4f8b54)

#React公式チュートリアル
Reactの[公式チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)に三目並べ~~ゲーム~~があり、なぜかこれが気になってしまうので、作っていきたいと思います。

最終成果物は　→　[三目並べ~~ゲーム~~](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)

これをチュートリアルに沿って作るのが目標です。

##前提知識
アロー関数、クラス、`let`

Vue.jsでjszipとfilesaver.jsを使ってzipフォルダを作成し、ダウンロードしてみる。

#初めに
今回はjavascriptのライブラリの一つ、[jszip](https://stuk.github.io/jszip/)と[filesaver.js](https://github.com/eligrey/FileSaver.js/)というライブラリの記事を書こうと思います。
jszipというものはzipとして圧縮するためのライブラリで,filesaver.jsはファイルをダウンロードするためのライブラリです。
必要最低限(zipフォルダにファイルやフォルダ又はフォルダの中にファイルを入れる)のやり方を書きます。
##必要な技術、ライブラリ
– vue.cli(vue.js)
– jszip
– filesaver.js

##やり方
必要最低限をやるために必要なメソッドは、**file()** **folder()** **generateAsync()** **saveAs()** の4つ。
**file()**の第一引数はファイル名(string型),第二引数は内容(string型,array型etc)です。
**folder()**の第一引数はファイル名(st

[CSS/jsのみ]tableの行/列ヘッダーを固定する

# はじめに
最近Webアプリ周辺の技術を学び始めた者です。普段は製造業で設計業務を担当しておりますが、社内システム構築用にいろいろと勉強しています。主に使うのは下記。

* 言語 : python/C#
* Web framework : django

記事に書き出すことで自身の理解も深まると考え、今回初投稿をさせて頂きます。

# 動機
休日に妻と共同でアプリ開発をしています(この開発記録もつけられたらなーと思っています)。
tableを多用するのですが、その際列ヘッダーと行ヘッダーを固定してtbodyのデータセルだけスクロールできないかなと考え、いろいろ調べていました。
便利なプラグインもたくさんありましたが、

* 複数ヘッダーを固定できるものが限られていた
* なるべく既存のtableに変更を加えたくない

という理由で手を出せず。position:stickyというステキなオプションがあるので、どうにかこれを使ってできないかと思い、やってみました。
なおこちらのstackoverflowの質問を参考にしました→[Table with fixed header and fi

イベントが発生した時、その兄弟要素を操作する方法

# 概要
jQueryを使用せずに実装することを目指す。
同じ構造をした要素が複数存在する際に、その中でイベントが発生した兄弟要素だけを操作したい場合の実装方法である。

#実装例
クリックしたらその兄弟要素にあたる画像を小さくするボタンを実装。今回は同じ構造の要素を4つ用意。

##HTMLとcss
参考程度に掲載

“`html:HTML

• 
  look

GoogleAppsScriptでのMail とUserとSession

だんだん内容が薄くなってきました
先日、Lineに通知を出すやつをつくって、早速稼働してるのだけど、LineにURL送るとクリックしたときにLine内のブラウザーで開いてしまい、ちょっと面倒なことに。（ログインが必要なWebサイドなので）

というわけで、メールで送っちゃおう、というのが今日の趣旨です。
IFTTT側でメールを出す方法もありますが、アプレットつくるより早そうだったので。。。

#1.MailAppクラス
至ってシンプル。リファレンスは[こちら](https://developers.google.com/apps-script/reference/mail/mail-app)

“`javascript
let mailObject = {
to:”hogehoge@gmail.com”,
subject:”hoge”,
body:”hoge hoge-!”
};
MailApp.sendEmail(mailObject);
“`

sendEmailは引数の違うメソッドがいくつかあるけど、普段はこれで十分かと。

#2.User