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

スプレッド構文

##スプレッド構文
**「…」**の形で記述され、配列やオブジェクトの要素を展開する構文です。

“`js
const test1 = { a: 1 };
const test2 = { b: 2 };

// test1とtest2が平らな状態でオブジェクトに入れることができます！
const test3 = { …test1, …test2};

// スプレッド構文を使わない場合
const test4 = {test1, test2};

// ネストしてい場合
const test_Oj1 = {a: {test: 1}, b: {test: 2}};
const test_Oj2 = {c: {test: 3}, d: {test: 4}};
const test_Oj = {…test_Oj1, …test_Oj2};

// スプレッド構文を使わない場合
const test_Oj3 = {test_Oj1, test_Oj2};
“`

**結果**
JavaScript系：Qiitaのタグ統計を浄化するためのタグ詰め合わせ記事

タグだけ

超雑な IndexedDB のメモ

## 雑な理解メモ

“`plantuml
@startsalt
{{T
+ IndexedDB
++ DB_NAME
+++ OBJECT_STORE
++++ RECORDS
+++++ ROW
}}
@endsalt
“`

## 普通の RDB に置き換えるなら

* DB_NAME → DB
* OBJECT_STORE → Table
* RECORDS → Rowset
* ROW → Row

Backlogの予定/実績時間の入力を強制するChrome拡張機能をつくった

# なぜやるのか

プロジェクトの採算を管理するために、Backlogチケットの **予定/実績時間** の入力をチームにお願いするものの、なかなかうまくいかない。
個人の意識に任せるよりも **ツールを使って解決しよう** ということで開発を行った。

# Backlog Ticket Guardian

[Chrome ウェブストア](https://chrome.google.com/webstore/detail/backlog-ticket-guardian/pgllgfhhnciflmcmcicdfhgkffemcbln)
[GitHub](https://github.com/spookies-jp/backlog-ticket-gardian)

# なにをするものか

チケットのステータスに合わせて **予定/実績** の入力をチェックし **登録する** ボタンを無効化する。

– 未対応
– 無効化しない。
– 処理中・処理中に変更する
– **予定が未入力** の場合に登録ボタンを無効化する。
– 処理済み
– **予定/実績が未入力** の場合に登録ボタ

ユーザーページにLGTMトップの記事を表示するユーザースクリプト


“`js
// ==UserScript==
// @name Qiita top items
// @namespace http://tampermonkey.net/
// @version 0.1
// @description なんか名前が変わったやつをたくさんあつめたのを表示する
// @author khsk
// @match https://qiita.com/*
// @exclude https://qiita.com/
// @exclude https://qiita.com/timeline*
// @exclude https://qiita.com/

使いこなそう正規表現(入門)

この記事は株式会社クロノスの「[~2020年春~勝手にやりますアドベントカレンダー](https://qiita.com/beeeyan/items/342d51fa301bcf81e9c0)」の18日目の記事です！

## はじめに
正規表現の基本知識をまとめました。
正規表現は、ファイル検索や文字列置換を行うときに使用することができます。
エディタの検索で正規表現を活用することで、検索効率や置換効率があがるので活用していきましょう。
VSCodeでは以下の「.*」を選択すると正規表現が使用できるようなります。

サンプルコードはJavaScriptの `match` メソッドを使用しています。

“`JavaScript
‘対象文字列’.match(/正規表現/);
// 取得結果
“`

# メタ文字(使用頻度が高いもののみ)

Gatsby.jsのsourceNodesライフサイクルでresourceを参照する方法

Gatsby.jsでノードを作るライフサイクルの`sourceNodes`でresourceのデータを参照したい時に詰まったのでメモ。

# 経緯
あるresourceのデータに外部画像のURLがあり、それを gatsby-image で使うために、gatsby-source-filesystem の createRemoteFileNode で外部画像用のNodeを生やす必要がありました。

新たにNodeを生やすのでsourceNodesのライフサイクルで

1. 内部のスキーマに対してGraphQLで対象のURLを取得
2. そのURLに対してcreateRemoteFileNodeでノードを作成する

で良いのかなと思ったのですが、sourceNodesではまだschemaがないのでGraphQLのAPIを呼べませんでした。

ということで、sourceNodesライフサイクルでresourceを参照する方法です。

# 方法

**[getNode API](https://www.gatsbyjs.org/docs/node-api-helpers/#getNode)**

Web開発の基本知識（メモ用）

#背景
フロントサイドのソースを見たら、なんじゃこれ？のこれをメモする目的

#jQuery
– **$から始まる**
– **ready(function(){})関数**

内側の関数は：HTMLの読み込みが終わった後に、実行される。

“`javascript:例
$(document).ready(function() {
　　ここに処理記述
});
“`
readyが省略可能

“`javascript:上記の例の省略形
$(function() {
　　ここに処理記述
});
“`

– **各種セレクター**

1.要素セレクター：`$(“li”).css(“color”, “blue”);`

“`html:要素セレクター

• 要素

“`

2.IDセレクター：`$(“#myID”).css(“color”, “blue”);`

“`html:IDセレクター

• IDセレクターの場合、”#”を使う

“`

3.クラスセレクター：`$(“.myC

ジェネリクスをもう少しだけ使いこなす。

[**4歳娘「パパ、具体的な名前をつけないで？」**](https://qiita.com/Yametaro/items/bcd3166e5d2ad696a89e)

↑こちらの記事の続きです。

## 前回のあらすじ

前回の記事は、

> + 引数が**数値**であれば、**数値の配列**を返すべし
> + 引数が**文字列**であれば、**文字列の配列**を返すべし
> + 引数が**オブジェクト**であれば、**オブジェクトの配列**を返すべし
> + 引数が**配列**であれば、**配列の配列**（二次元配列）を返すべし

上記のような**制限**を持った関数を、
**ジェネリクス**を使って表現しよう、という内容でした。

コードも軽く見返してみましょう。

“`typescript
function toArray(arg: T): [T, T, T] {
return [arg, arg, arg];
}
“`

できあがった関数は上記のようなものでした。

> + 引数が`T`だったら、戻り値は`[T, T, T]`であるべし

つまり、

> + 引

Reactのチュートリアルの三目並べを素のJavaScriptに

[前回](https://qiita.com/GodPhwng/items/168576c0a9c89375a3f0)のjQueryで作ったReactチュートリアルを素のJavaScriptにしてみます。すべてのブラウザで動くかは試してません。Edge(chromium)で確認しました。

#マス目に数値を表示する
“`html:index.html

自動更新

##自動更新の機能
①何秒かおきに、JavaScriptを使ってブラウザに表示されているメッセージのうち最も新しいもののidをリクエストとして送る
②Railsのコントローラのアクションにてデータベースに保存されている最新のメッセージのidと①のidを比較し、①のidよりも大きいidを持つメッセージたちをレスポンスする
③JavaScriptを使って、レスポンスに含まれるメッセージたちをメッセージ一覧の最後に追加する
##表示されているメッセージのidの確認
jQueryを使って表示されている最新メッセージのidを取得できるようにします。そのため今回はmessagesテーブルとし、messagesテーブルのidを、HTMLの中に埋め込みます。
その時に利用できるのがカスタムデータ属性です。
###カスタムデータ属性
カスタムデータ属性とは、HTMLタグの属性の１種です。
【例】

“`

“`
例えば、上記の例はpタグにclass属性を設定しています。このように、あるタグを使う時に情報を付加するために使用するものです。
属性として設

Chromeはwindow.openするときに修飾キーの影響を受ける

たまたま「⌘+クリック」で新規タブを開かせたい機能の実装をしていて見つけた挙動です。知らなかったのでメモ。

## window.open の普通の挙動

“`js
const $button = document.querySelector(‘#button’);
$button.addEventListener(‘click’, (e) => {
window.open(‘./hoge’);
)};
“`

のような実装をした場合、通常はボタンクリックで新規タブが開き、新しいタブへ自動的に切り替わります。


## 修飾キーを押しながらクリックしたときの挙動

同じ実装のまま、ボタンをクリックするときに特定の修飾キーを押し続けてみます。

– macOSの場合はcommandキー
– Wi

【学習記録】『スラスラ読める　JavaScriptふりがなプログラミング』読書感想　 5章編 （最終章）　〜N予備校の復習を添えて〜

【学習記録】『スラスラ読める　JavaScriptふりがなプログラミング』読書感想　 ４章編（後半）( https://qiita.com/Molly95554907/items/e9587a8c1eccb9282f23) の続き

第五章

・HTMLで作成したページを、後からJavaScriptによって変える

・HTMLを操作するために対象となる要素を選び出す
→DocumentオブジェクトのquerySelectorメソッドを利用

let 変数 = document.querySelector(‘取得したい要素’);

で、HTMLの’取得したい要素’セレクタを獲得して変数(Elementオブジェクトに自動変換される）に代入する。

変数（Elementオブジェクト).innetText

で、要素を操作することができる。つまり、innerTextプロパティを利用すると、要素の中のテキストを操作できる。

例）

“`js

let elem = document.querySelector(‘h1’);

JavaScriptに於ける闇の魔術と闇の魔術に対する防衛術

prototypeはね…死人がでるよね。

## 闇の魔術

自分のPCに閉じ込めておく分には、まぁ楽で良いんだけれども。

“`js:俗に言う黒魔術
const __BASE_PROTO = {
$: {
value (…child) {
// 略
return this;
}
}
}
{
Object.defineProperties(Node.prototype, __BASE_PROTO);
Object.defineProperties(Element.prototype, __BASE_PROTO);

}
function GOD(v) {
this.v = v;
// 略
};
Object.assign(GOD.prototype, Object.prototype, Array.prototype, Number.prototype, String.prototype);
“`

ただ、後で面倒になる。

## 闇の魔術に対する防衛術

参考にしたライブラリはある [$(dsand).$()](https://githu

Javascript基本集

# Javascript基本集
**〜自分の学習用です〜**

javascriptの基本を振り返ろうと思い作成しました。

##**javascript**とは
人間がプログラム言語で記述したソースコード（設計図）をインタープリタと呼ばれるソフトウェアによって、コンピューターが実行できる形式に変換しつつ逐次実行するタイプのプログラム言語(**軽量なインタプリタ型**)。
あるいは実行時コンパイルされる、**第一級関数を備えたプログラミング言語**。
成熟した**動的プログラミング言語**であり、HTML文書に適用するとWebサイトに動的な対話操作を提供出来る。

　　
**インタプリタ言語**とは、
コードを実行する際に**1行ずつ機械語に翻訳していく言語**。
コンパイラ言語は始めに全コードを機械語に翻訳した後に一気に実行する言語。
　　

**第一級関数**とは、
関数を第一級オブジェクトとして扱うことのできる性質またはその関数のこと。
　　

**第一級オブジェクト**とは、
無名のリテラルとして表現可能な値で、
変数への格納や引数や戻り値として受け渡しが行えるようなオ

JavaScriptで西暦と平年orうるう年を出力する

初投稿です。最近、JavaScriptなどの学習を始めました。優しくしてください。
先日JavaScriptを使ったうるう年のプログラムを学習したところですが、最近覚えたfor文と組み合わせて、
西暦と一緒にうるう年かどうかをhtml上で` 西暦○○年：平年ですorうるう年です `とブラウザに出力するプログラムを書いてみようと考えました。
0年から2020年までずらーっと並べます。

コード内の下記の配列は[連番の数字の配列を作成（es2015 ver)](https://qiita.com/sakymark/items/710f0b9a632c375fbc31)
を参考にさせていただきました。
0から2020までの数値を変数に入れるつもりでした。

“`
const arr = […Array((2020) + 1).keys()]
“`

#コード
– htmlの`