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

Reactタグの作り方

# はじめに
備忘録です。
Layoutタグを作ろうかな、と思ったときに以前のコードを見直す必要があったので、
整理とまとめておくために記述します。

もっといい方法があったら教えてください。
タイプミスあったらすみません。

## code
Layout.jsxとUseLayout.jsxは同じ階層にあるものとします.
本当は分けた方がいいです…

Typescriptにする場合はChildrenは`ReactElement`を`react`からimportして割り当ててあげると良い感じで行けます.
`children: ReactElement`こんな感じで。

### Layout.jsx

“`react
import React, { Fragment, cloneElement } from “react”;

const Layout = props => {
const { title, children } = props;
return (

{title}
<

ブロックリーゲーム

[ブロックリー・ゲーム]https://blockly.games/?lang=ja

この問題は導入として優しい。

しかし、10番目の問題はいきなり難易度が高く、解かなくても先に進められるようにできている。

問題１０
10ブロック以内にゴール（赤いピン）まで進むプログラムの作成

★右壁の法則
とりあえず右壁の法則で解こうと思ってなんとなくやったら偶然できた解
※右の壁を絶えず触りながら迷路を進む方法

8ブロック使用

![ブロックリーゲームズ１.gif](https://q

【Nuxt.js】inject is 何？

## TL;DR.
– injectを利用すると関数を共通化することができる
– 関数はthis.$hogeで呼び出すことができる

## injectを使用した処理の例
ページに’hoge’を返す関数を作ってみる

``

“`js
export default function injectHoge(context, inject) {
const returnHoge = num => {
return ‘hoge’ * num
}
inject(‘hoge’, { get: returnHoge })
}
“`

これをnuxt.config.jsに設定する

``

“`js

plugins: [
{ src: ‘@/plugins/hoge’, ssr: false }
]
“`

このようにすると`this.$hoge.get(num)`でVueインスタンスで関数を実行することができる

独立したコアレイヤパターンをJavaScript(TypeScript)で実装してみる

[@shin1x1](https://twitter.com/shin1x1)さんの[独立したコアレイヤパターン](https://blog.shin1x1.com/entry/independent-core-layer-pattern)をJS(TS)でも利用できるといいかなと思い、サンプルコードを作成してみた。

# 独立したコアレイヤパターンとは？
– アーキテクチャパターンのひとつ
– コアレイヤとアプリケーションレイヤの2つのレイヤからなる
– コアレイヤ
– コアレイヤロジックやビジネスロジックを実装する
– 外部のIF(WebAPIやDBのormなど)には依存しない
– アプリケーションレイヤ
– コアレイヤと外部のIFの連携を実装する
– 外部のIF(WebAPIやDBのormなど)に依存する
– **スーパーヒーローがいなくても使えるパターン**

# ゴール
サンプルとして、記事に対するファボ(お気に入り)を設定・解除する機能のユースケースを作成する。

## サンプルリポジトリ
[oh

JavaScript/Reactの見直し用記事

#はじめに
いろんな言語をやっているとどうしても忘れてしまうのでよく忘れるものをメモ

以下の違いって何？って質問された時微妙な答えをしてしまったのでコレもメモ
**フロントエンドとは？**
– HTMLの構築
– バックエンドへAPIを呼び出す
– データの返却を受け取る

**バックエンドとは？**
– データベースとの接続
– フロントエンドからの要求に対応するデータを返すAPIを用意
– データをフロントエンドへ渡す
# DOMとは
「Document Object Model」の略。HTMLとJavaScriptをつなぐ役割をもつ。
階層構造を取り、各要素を表すノードで表現されることが多い。

– [JavaScript初心者でもすぐわかる！DOMとは何か？](https://eng-entrance.com/what-is-dom)

#Node.jsとは
JavaScript アプリケーションのプラットフォームでサーバーサイドのJavaScript
ReactなどのJSフレームワークを導入する際にはNode.jsが必要となる。(Node.jsが支える側に)
Node.js

JavaScript勉強の記録その20: alertとconfirmを使ってメッセージボックスを表示

#alertを使ってメッセージボックスを画面に表示する

alert(‘表示したいメッセージ’)とすることで、画面に以下のようなメッセージボックスを表示することができます。

“`index.js
alert(‘このページはまだ準備中です’);
“`

#confirmを使って画面にメッセージボックスを表示

confirm(‘表示したい内容’)とすることで、OKかキャンセルかどちらかを選べるメッセージボックスを表示することができます。

alertとの大きな違いとしては、confirmは返り値としてB

JavaScript勉強の記録その19: Dateオブジェクトを使って現在時刻を取得

#Dateオブジェクトを利用して現在時刻を取得

new Date()としてあげると、現在時刻に関するデータを持つオブジェクトを生成することができます。
Dateオブジェクトには標準でいくつかのメソッドが用意されてあり、日時に関するデータを取得することができるようになっています。

“`index.js
const d = new Date();
console.log(d);
//=>Mon Jan 13 2020 23:59:08 GMT+0900 (日本標準時)
“`
#getFullyearメソッド
以下の例では、生成されたDateオブジェクトがもつ西暦の情報を取得しています。

“`index.js
const d = new Date();
console.log(d.getFullYear());
//=>2020
“`
#getMonthメソッド
読んで字の如しですが、月に関する情報を取得します。
たた注意する点としては、JavascriptのgetMonthメソッドで返ってくる値は、0は1月を表し、1は2月を表します。
したがって、返ってくる値に+1としてあげ

初心者による フォームの扱い

#概要
クライアントjavascriptにおいて、フォームはエンドユーザからの入力を受け取る代表的な手段である。Webページに必ずあるといってよいものであるため、十分に学習しておきたい。

#入力ボックス/選択ボックス
入力ボックス、選択ボックスの入力を受け取る方法はvalueプロパティにアクセスするだけである。

“`html:sample.html

名前：

“`

“`javascript:sampl.js
document.addEventListener(‘DOMContentLoaded’, function(){
document.getElementById(‘btn’).addEventListener(‘click’, functi

頼むからGraphQLのクエリを動的に組み立てるのはやめてくれ

主にapolloの話。

https://github.com/Shopify/graphql-js-client のようなクエリビルダを使ってるんだったら別。

ここでいう「動的に」というのは、下記のように通常の文字列結合で引数とかselection setを突っ込むようなコードを指している。

“`js
apolloClient.query(gql`
query {
procucts(${variables}) {
id
}
}
`);
“`

当たり前なんだけど、`variables` に `”first: 10) { __typename } users(first: 10″` みたいな文字列を突っ込んだら、想定とは全く異なるクエリになって何が起こるかわかったもんじゃない。

変数はGraphQLのvariablesに格納するようにしろ。

“`js
apolloClient.query(gql`
query MyQuery($first: Int!) {
procucts(first: $first) {
id

JavaScript で配列に特定の要素が含まれているか確認する

`Array.prototype.indexOf()`メソッドを使用して、配列に特定の要素が含まれているか確認する。

## 例

配列に特定の要素が含まれている場合は`true`、そうでない場合は、`false`を返す。

“`js
console.log([‘foo’, ‘bar’, ‘baz’].indexOf(‘foo’) !== -1); // true
console.log([‘foo’, ‘bar’, ‘baz’].indexOf(‘fo’) !== -1); // false
“`

## Array.prototype.indexOf()

`indexOf()`メソッドは、引数に指定した内容と同じ配列要素を探し、最初の要素の添字を返す。
存在しない場合は、`-1`を返す。

### 例

“`js
console.log([‘foo’, ‘bar’, ‘baz’].indexOf(‘foo’)); // 0
console.log([‘foo’, ‘bar’, ‘baz’].indexOf(‘bar’)); // 1
console.log([‘foo’,

TypeScriptでユーザー定義のエラーを実装する

例外周りにあまり知見がなかったのでJavaScriptの標準のエラーから、TypeScriptでユーザー定義の例外を実装する方法までを調べました。

## JavaScriptの標準のエラーオブジェクトについて

JavaScriptの[標準のエラーオブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects#Fundamental_objects)は以下の表の通り7つあります。

|エラーオブジェクト |説明 |
|—|—|
|Error |ランタイムエラーが発生した時に投げられます。ユーザー定義の例外の基底オブジェクトとして使用することもできます。 |
|EvalError |グローバルな eval() 関数に関連するエラーを示します。この例外はもう JavaScript から投げられませんが、EvalError オブジェクトは互換性のために残っています。 |
|RangeError |値が配列内に存在しない、または値が許容範囲にない場合のエラーを表し

CodePen: HTML+JavaScriptで波形生成して聴覚テストっぽいものをつくってみた

200Hzだけ聞き取りづらかったので音量上げてます。

※JavaScriptについては、わたしはほぼ素人です。テキトウにコード書いているのであまりマネしないようにおねがいします。

音量注意！

See the Pen

JavaScriptでスムーススクロールを実装する

# こんなやつ
[](https://gyazo.com/fa945a03aa31708c738ee82d7156ca86)
**動作デモ → [https://jsfiddle.net/zr36gcpb/](https://jsfiddle.net/zr36gcpb/)**

# コード
“`html:HTML

Scroll
Scroll
Scroll
Scroll

初心者による DOM 属性値の取得/設定

#概要
getElementById()等で要素ノードにアクセスできたら、次は、その要素ノードに何らかの処理をしたい。

#特定の属性の取得
多くの属性は「要素ノードの同名のプロパティ」としてアクセスできるからです。たとえば、

“`javascript:sample.js
//取得
let url = link.href
//設定
link.href = ‘https://google.com’
“`
ただし、classに関してはclassNameになることが注意点です。この「属性とプロパティは一致しない場合がある」ことを意識したくないのであれば、次の方法がある。

“`javascript:sample.js
elem.getAttribute(name)
elem.setAttribute(name, value)
//elem : 要素オブジェクト name : 属性名 value : 属性値
“`

これを用いて書き直すと、

“`javascript:sample.js
let url = link.getAttribute(‘href’)
link.setAt

便利ページ：JavascriptでQRコードスキャン

久しぶりの、「[便利ページ：Javascriptでちょっとした便利な機能を作ってみた](https://qiita.com/poruruba/items/6c67c7eef34ed302feb3 )」 のシリーズものです。

今回は、QRコードスキャンです。
QRコード生成はすでに実装してあったのですが、スキャンする方はありませんでした。

HTML5では、PCに接続されたカメラを扱うことができますので、ブラウザだけでスキャンできます。また、AndroidやiPhoneでのChromeでも動作するので、これでPCだけでなくスマホでも動きます。

いつもの通りGitHubにも上げてあります。
　https://github.com/poruruba/utilities

参考までに、以下にデモとしてアクセスできるようにしてあります。
　https://poruruba.github.io/utilities/

# QRコードスキャンのためのライブラリ

以下を使わせていただきました。ありがとうございます。

cozmo/jsQR
　https://github.com/cozmo/js

Svelteで使えるCSSフレームワークまとめてみた

# はじめに
Svelteで使えるCSSフレームワークを調べたのでまとめます。

# sveltestrap
HP：https://bestguy.github.io/sveltestrap/
GitHub：https://github.com/bestguy/sveltestrap
Star：181
もとになったフレームワーク：[BootStrap](https://getbootstrap.com/)
※2020/01/13現在

# Svelma
HP:https://c0bra.github.io/svelma/
GitHub：https://github.com/c0bra/svelma
Star：200
もとになったフレームワーク：[Bulma](https://bulma.io/)
※2020/01/13現在

# Svelte Material UI
HP：https://sveltematerialui.com/
GitHub：https://github.com/hperrin/svelte-material-ui
Star:546
もとになったフレームワーク：[

react にて、画像リンク切れの際、imgタグを非表示にする

通常のhtmlにおいては、onerrorハンドラにてリンク切れのimgタグを非表示にできます。

“`html

“`

reactではこれができないため、以下のように`onError`ハンドラを作成します。

“`Javascript
e.target.style.display = ‘none’} />
“`

# サンプル
?以下のサンプルは、`create-react-app`直後の`App.js`を編集したものです。

“`Javascript:App.js
import React from ‘react’;

function App() {
return (

【復習】JavaScriptで複数のclassに反映させる方法

##困ったこと
classを指定しているのに一つしか反映されない。。。

##理解と対応
classの場合は配列になるので一つ一つ取り出さなければいけない

そんな時に利用するのが
for文

“`js
for ( 初期値; 繰り返す条件; 増減値 ) {
// 繰り返す処理を書く
}
“`

配列の取り出し方としては
box[1]やbox[2]などで取り出すため
変数を用いてbox[i]と記載しfor文で変数の値を増やしていけば取り出すことが可能

##実際のコード

“`html

ejectなしのExpoアプリにStripe決済をWebViewを使って埋め込む（Checkout編）

[Payment IntentとElementsを使った記事](https://qiita.com/mildsummer/items/f95fd53864be6f14e3b0)に引き続き、Stripe CheckoutでStripeによって生成されるページをWebViewで使用してみます。

Checkoutページに遷移させるにはStripe.jsの[`redirectToCheckout`メソッド](https://stripe.com/docs/js/checkout/redirect_to_checkout)を使用しますが、その際、`sku`を指定する場合（Checkout クライアント専用組み込み）と、サーバー側でセッションを作成してから`sessionId`を指定する場合と２種類の方法があります。
クライアント専用組み込みの場合はサーバー側の実装が不要ですが、リダイレクト元に関して設定の必要と制限がある*ため、この記事では後者の方法をとります。

*URLスキームが`http(s)`に限られるので、WebView上の非ホスティングのHTMLから直接リダイレクトできない。

#

?祝日とかぶった予定を自動で削除する(Google Apps Scriptで)

# やること: 祝日とかぶった予定を自動で削除する
会議や打ち合わせの予定を繰り返しイベント(予定)で登録していませんか?私もその1人です。
この機能、便利なのですが、イベントが祝日にかぶったとき、いちいち手で消すのが面倒なのですよね…
(例えば、毎週月曜に定例の会議を入れているけど、来週は祝日だから中止だ、とかのケースです)

今回は祝日の検知と、その日のイベントを自動キャンセルするというスクリプトを実践してみましょう。

# やってみよう
手元で動かしているロジックは、もっといろんなことをやっているので、本質的な部分を切り出して紹介します。
(間違いを見つけられましたら、指摘してもらえると嬉しいです。)

**言うまでもありませんが、自己責任でお願いします。予定を削除するメソッドが含まれますので、バックアップを取るとか、削除の部分はコメントアウトして動かすなど、各自対策していただければ。**

“`.js
function removeBusinessEventOnHoliday() {
// 通知用(ここではSlackを使う)
const slackApp = new