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

[JavaScript]クリックした要素の取得

クリックした要素を取得したくて、格闘したので、備忘録。
調べたら案外簡単に出てきました。

###構文
“`
event.target.innerHTML
“`

“`event.html

イベント１

イベント２

イベント３

“`
“`event.js
function getText() {
var eventText = event.target.innerHTML;
alert(eventText);
}
“`

これで問題なく動くのですが、エディタ

[TypeScript]文字列リテラルをテンプレートリテラルで分解し、型再帰で階層内の型を抽出する

# 必要なバージョン

今回の内容を実行するにはTypeScriptの4.1.2以降が必要です
型の変換等に関する定石は[こちら](https://ttis.croud.jp/?uuid=fb922d6a-f1d1-4899-b963-e7e2a4519e39)を見てください

# 実現する内容

“`ts
const value = { aaa: { bbb: { ccc: ‘Test’, ddd: 100 } } }

const ccc = getTreeValue(value, ‘aaa/bbb/ccc’) //型は自動的にstring
console.log(ccc) //Test
const ddd = getTreeValue(value, ‘aaa/bbb/ddd’) //型は自動的にnumber
console.log(ddd) //100
“`

オブジェクトからスラッシュ区切りでデータを取り出し型推論させます。
この処理を行う方法は以降の内容を確認してください。

# 文字列リテラルを分解し、再帰的に型を取り出す処理

“`ts
type PickTree

【Node.js】npm proxyの使い方

#プログラミング勉強日記
2021年3月1日

#proxyとは
　proxyは、npm configコマンドで使用できる代理(プロキシ)サーバー設定のこと。
　開発中にインターネットでアクセスの制限をされた場合など、セキュリティの問題によってアクセス制限された環境でプロキシサーバーを経由した開発を行うことがある。

#使い方
　npmでプロキシサーバーの設定をするためには、npm configコマンドでproxyを使用する。npm config set proxyと入力することで、npm config機能の一部であるproxyを利用できる。

“`
$ npm config set proxy http://: “`

“`:proxyを解除する方法
$ npm -g config delete proxy
“`

“`:proxy設定の確認
$ npm -g config list
“`

#参考文献
[プロキシサーバーを使う際に役立つ！npm proxyの使い方【初心者向け】](https://techacademy.j

MDwiki：レイアウトを自由に変更する

# はじめに

MDwikiはmarkdownで書かれたテキストをお手軽にwebページ化することができる、お手軽なCMSである。

基本的にMdwikiは必要最小限のコンテンツを最小限の手間で公開にもっていくためのインスタントなシステムである。内輪向けのウェブサーバで、随時更新されていくマニュアルやレポートを共有するといった使い方に向いている。Markdownを加筆修正するだけなので、日々の更新作業にかかる手間と時間を大いに軽減できて便利だ。半面、複雑に凝ったサイト作成には向かない。

とはいえ、ある程度使い込んでくると、ページ全体の色調とかフォントとか、少しは自分好みに変更したいと思うのが人情だろう。そこで、この記事ではMdwikiページの「見栄え」を自由にカスタマイズするためのクイックハックを提示する。

# mdwiki-debug.htmlの改造
[MDwiki](http://dynalon.github.io/mdwiki/#!index.md)のパッケージにはいくつかのhtmlファイルが含まれている。普通はmdwiki.htmlを公開用に利用するだろうが、ここでは中身が

[js] 文字列への変換にnew String()を使うのはよくない

こんなコードを見かけた

“`js
console.log(‘price = ‘ + new String(price));
“`

数値から文字列の変換に`new String`を用いている。

実はこのnew Stringが返すのはstringではなく`stringっぽい何か`なのだ！

“`js
const s = ‘100’;
const s2 = new String(100);
console.log(typeof s); // string
console.log(typeof s2); // object
“`

実は`new String`が返すのはstringのボックス型なのだ。似たような振る舞いをするが決してstringではない！

=== undefined よりも == null を使おう

以下のコードを見てくれ

“`js
const data = await fetchData( … );
if (data.flag === undefined) {
…
}
“`

`=== undefined` を使っているがそれは意図して使っているのか？

`== null` と `=== undefined`には以下のような違いがある

### `== null`

null もしくは undefined と一致

### `=== undefined`
undefinedと一致

つまりnullはOK！undefinedはダメ！という状況でしか使わないのだ！
いつ紛れ込むかわからないnullのことを考えると `== null`を使うのが吉だ！

[js] 指定したPromiseが解決されるまでローディング表示

## 概要


Promiseを渡すとそれが解決されるまでローディング表示をする関数を実装する。

### ローディング関数の仕組み

1. 最初にローディング表示する
2. 渡されたPromiseが解決されたらローディング表示を解除する

### Promiseの解決を検知する方法

渡されたPromiseに対してthenメソッドを呼び出すことでPromiseが解決されたことを検知できる。

“`js
promise.then(() => console.log(‘解決された’))
“`

### 実装

“`js
function loading(promise) {
let i = 0;
const interval = setInterval(() => {
showLoading(((++i) % 3) + 1);

【JavaScript】 海外Teck系YouTuberを真似てみた！(part 4) Blog App | React JS

#１，はじめに
この記事は、海外Teck系YouTuberの動画を参考に、同じプロジェクトを作成してみたものになります！
簡単にですが、動画を通して学べた技術や知識をまとめました！

今回の完成品は、下記に載せています:bangbang:

#２，学んだこと
Reactに必要な、RouterやHookについて学ぶことができました！
JSONサーバーのビルド方法や、Fetchを使ってサーバーと接続する方法も知れました！

#３，参考動画

#４，完成:tada:

【jQuery】好きな画像をボタンにする

# 好きな画像をボタンにする

Webサイトでボタンを作りたいとき、まず思い浮かべるのは「buttonタグ」や「inputタグ（type=”button”）」で作る方法だと思います。
ですが他にも、**好きな画像をボタンのように扱う**こともできるので、今回はその方法をご紹介します。
けっこう簡単です。

題材として、ボタンを押すとブドウの画像が出てくるサイトを作ります。

# 用意するもの

* 押す前のボタン画像
* 押した後のボタン画像
* ブドウの画像
* htmlファイル
* cssファイル
* jsファイル

ボタン画像は以下をダウンロードして使っていただいても構いません。

押す前ボタン
![button_neutral.png](https://qiita-image-store.s3.ap-northeast-1.amazona

社内でビブリオバトルを開催してみた ! (みんなでワイワイ本紹介をやるなら必見 !)

# はじめに
こんにちは！
KDDI アジャイル開発センターの小板橋です.
本記事では, 先週お昼休みに開催した**ビブリオバトルについてとその内容, 魅力などなど**お届けしたいと思います.

# 本記事は, こんな方におすすめ
* **チームやロールをこえて, 社内で「本」という共通の話題を作りたい方**
* **様々な本を知る機会が欲しい方**
* **新しいオンラインビデオ通話を試してみたい方**
* **みんなでワイワイするイベントをやってみたい方**

# ビブリオバトルとは
さて, みなさんはビブリオバトルを知っていますでしょうか !
**ビブリオバトル**とは, 自分の好きな本をプレゼンし「**一番読みたくなった本** = **チャンプ本**」を競う**白熱のバトル**です.

# 開催にあたって
さて, お

一覧表示での進捗率ゲージの作成

# はじめに
オリジナルアプリでクラウドファンディングサイトを作成した際に、
jQueryを使って進捗率ゲージを作成したので紹介します。
前回、詳細画面での作成方法を紹介しましたが
今回は一覧表示画面での作成方法です。

[](https://gyazo.com/9d48b4ecd07f0773ae0f8649277a7115)

詳細画面での作成はこちら→
https://qiita.com/takiguchiharuna1221/items/df517f2a9e4b74299328#comment-bd0d8efa2c7c3dc7651e
※こちらではlinear-gradientを使った別の方法も投稿していただいています。

初学者なのでより良い方法が他にもあるかもしれませんが、どなたかの参考になれば嬉しいです。

# 環境
・Rails 6.0.0
・Ruby 2.6.5
・jQuery

# 作成手順
【view】

“`

Svelteについて

Svelteとは

SvelteとはJSの最新フレームワークで、近年JSのfrontendフレームワークの中でも興味や満足度がNo.1のフレームワークです(詳しくはこちらをご覧ください)。

Svelteの何がすごいのか？

速い・簡単・軽い

この３つになります。このように言われている理由は公式サイトで述べられている以下の特徴によります。

１. コード記述量が少ない

この意味は以下の２通りの意味が有ります。

コード記述量が少ない<

Alpine.jsでライフゲームを作ってみた

突然ですが、[PETALスタック](https://thinkingelixir.com/petal-stack-in-elixir/)というのをご存知でしょうか？
少し前にElxir界隈ですこし話題になっていたのですが、

**P**hoenix
**E**lixir
**T**ailwind
**A**lpine.js
**L**iveView

の略みたいです。

この中でフロントエンド担当のAlpine.jsについては、 State of JavaScriptでも
話題にあがっており、気になっていたので少し触ってみました :sparkles:

## Alpine.js

https://github.com/alpinejs/alpine

>ベスト5の新顔はAlpine.jsで、これはLaravel LiveWireの作者によって作られたミニマルなリアクティブフレームワークです。
Vue.jsとAngularの両方から、カスタムHTMLディレクティブや双方向バインディングといったアイデアを拝借しています。
HTMLに古き良きscriptタグを追加するだけで簡単に使うことが

ラズパイでラジコン作るぞ

## 書いてること

ラズパイでラジコンを作ったので、その方法をここに残します。
専用アプリ不要で手持ちのスマホがコントローラーになります。

完成品はこちら ↓

サーボモータをラズパイで制御して、Webサイト経由で操作するのできた！ pic.twitter.com/7USpyYXTpx

— suo-takefumi (@zsipparu) February 28, 2021

## 構成図

全体の構成図

【Chart.js × Laravel】Controllerで返されたデータをJavaScriptで操作するには

Controllerで返された値をJavascriptで操作する方法、Javascriptでchart.jsを使って複数のチャートで動的なデータを表示する方法があまり見当たらなかったのでこちらで紹介。

通常Controllerで返された値(配列)は“`@foreach“`を使ってbladeで表示できる。

“`php:test.blade.php

// as $key => $valueの場合、
@foreach($array_datas as $key => $value)

keyは{{ $key }}で、valueは{{ $value }}だよ

@endforeach

// as $dataの場合、
@foreach($array_datas as $data)

それぞれのデータは{{ $data }}として表示されたよ。

@endforeach

“`
bla

【JavaScript】配列を非破壊的に扱うために必要だった知識

# TL;DR
文字列・数値・真偽値の配列なら`arr.slice()`でコピーして操作
プロパティがネストしないオブジェクトなら`arr.map(e => ({…e}))`でコピーして操作
(二次元配列なら`arr.map(e => […e])`)
プロパティがネストするオブジェクトならライブラリを探す

# 何故非破壊的に扱いたいのか
JavaScriptの`Array`のメソッドには破壊的メソッドと非破壊的メソッドが混在している。
`reverse`だとか、`shift`だとかの破壊的なメソッドが関数に紛れ込んでいると副作用を生じさせてしまう。

“`javascript
const fn = arr => arr.reverse().map(e => e + 1)

const arr = [1, 2, 3]
const arr2 = fn(arr)

console.log(arr2) //=> [4, 3, 2]
console.log(arr) //=> [3, 2, 1] 見かけ上arrには何もしていないはずなのに！
“`

全部非破壊的に扱わせてくれと思っ

[CSS+Javascript] CMYの減法混色をmix-blend-modeを使ってシミュレートするためのベースロジック

##はじめに
[以前に書いた記事](https://qiita.com/STSHISHO/items/3611b16186ddeff958e8)の続きに当たります。あるWEBアプリケーションのデモ開発を行った後、UIの一部、表題内容の処理部分をパーツとして分解し、[JSFiddle](https://jsfiddle.net/STSHISHO/j5apfr94/)と[CodePen](https://codepen.io/STSHISHO/pen/BaQdELW)で公開しましたので、本記事はその詳細という位置づけとなります。

##目的
Ｃ、Ｍ、Ｙ、それぞれのカラーブロックを重ね、実際に混色した際の色をシミュレートします。ベースロジックのデモのため、それぞれの色成分初期値は濃度１００％とし、濃度の調整はスライダーにより、３色同比率で増減させます。

つまり、結果的には単に見た目が黒から白への濃度変化するものになるのですが、その表現方法の構築が本記事でのメインとなります。[^1]

以下が今回の完成形です。

配列っぽいデータであれば必ず使えるforEach関数をつくろう！

# あらすじ
JavaScriptの`forEach`関数にはいくつか使いにくい部分があると思います！

1. *HTMLCollection*のような「配列のようだけど配列じゃない」データにたいして使えない。
2. *key*と*value*どちらも参照したい場合、第一引数が*value*、第二引数が*key*となるように指定しなければいけなくて、微妙に直感的じゃない。
3. PHPのforeachと比べると、書き順が違うので、どちらも使う職場では混乱する。

※ PHPのforeach: `foreach( $配列 as $キー => $値 ){ …`
※ JavaScriptのforEach: `配列.forEach( (値, キー) => { …`

上記のような問題点を解決するため、オリジナルのforeach関数を作ってみました!

参考記事: [JavaScriptのループはどれが一番高速なのか
](https://qiita.com/keroxp/items/67804391a8d65eb32cb8)
参考記事: [文字列を数値に変換する方法と処理速度](htt

TypeGraphQLでN+1問題を解決した話

## はじめに
GraphQLをサービスで使い始めて、N+1問題にぶち当たったのでその解決策を紹介する。

## プロジェクト構成
* Node.js
* TypeScript
* Express
* GraphQL(Apollo, TypeGraphQL)

## 実際何が起こったか
DBにはとあるレコードが入っており、それぞれに`userid`を保持している。
`userid`からユーザー名やメアドなどのユーザー情報を取り出すには、別の内部APIに問い合わせる必要がある。

GraphQLのスキーマはこのように定義している。

“`graphql:schema.gql
type Query {
record(id: Int!): Record
records(name: String): [Record!]!
}

type Record {
id: Int!
name: String!
user: User
userid: Int!
}

type User {
userid: Int!
username: String!
}
“`

レコード

Chart.jsのレーダーチャートのpointlabelにonClickイベントをつける

# さっくり知りたい人のための要約
– Chart.jsにはpointLabelへのonClickはデフォルトで用意されていない
– 自作する場合は、``にonClickイベントをつけて座標計算する必要がある
– マウスのクリックイベントから座標を取得して、canvas内のpointLabelの座標内か判断する必要がある
– pointLabelの座標も自力で計算する必要がある
– [実行結果](#完成図) | [ソース]((https://github.com/NakashimaNozomi/chartjs-label-on-click)) | [私なりの解説](#3-クリックされたらクリックされた箇所がpointlabelかを座標計算して判定)

# はじめに
– __pointLabel__ってどこのこと？
→レーダーチャートのチャート外に表示されてる文字の部分（ここ:point_down_tone5:のこと）
![スクリーンショット 2020-07-11 13.15.38.png](https://qiita-image-sto