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

【typescript】2種類の値の片方がもう一方の型を決定する型を作る【Discriminated unions】

## 何がしたかった

２種類のフォームがあるとします。

その二つは収集する情報が違うので入力された値を保持するオブジェクトには別の型が付いています。

“`ts
//名前と年齢を収集するフォーム
type FormValuesA = {
name :string,
age: number
}

//名前とメールアドレスを収集するフォーム
type FormValuesB = {
name :string,
email: string
}
“`

具体的には今回この2種類のフォームのどちらでも受け入れて、
条件分岐でそれぞれ定義したvuexのstateに保存する関数が書きたいと思ってこんな感じの関数を書きました。

“`ts
type FormType = “formA” | “formB”
type FormValues = FormValuesA | FormValuesB

type FormObj = {
formType : FormType,
formValues: FormValues
}

const setFor

素のJavaScriptでローカルのXMLを読み込んで、新規のXMLを書き出す話

大本はRide with GPSからダウンロードした.gpxをGarminのOregonやeTrexで読める.gpxに変換するというお話です。

詳しい解説、実際に必要な箇所をユーザーが編集して動かせるサンプル…… そもそも何故こんなことをすることになったかの経緯はTicketnoteに書いてあります。よかったらあわせてどうぞ。
https://ticketnote.dev/ticket/DUpAHv85tU3vuFNuKE3v

—

Qiitaなので手短に。
HTMLとJavaScriptだけでローカルのXML（今回は.gpx）を読み込んで、読み込んだ内容から新規のXMLを書き出すというサンプルです。

【JavaScript】スコープの学習の振り返り①

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

#目的

* スコープについての理解を深める

#本題
###1.スコープとは

**実行中のコードから値と式が参照できる範囲のこと**
→５種類ある

###グローバルスコープとスクリプトスコープ

“`javascript
// 変数をそれぞれ定義
// スクリプトスコープ
let a = 0;
// グローバルスコープ
var b = 0;
function c(){}
// railsのbyebugみたいなやつ
debugger;
“`

ここでデベロッパーツールを使うと処理がdebuggerの部分で止まっています。

Sourcesをクリックした際に、右側のWindowでScriptと書かれた欄とGlobalと書かれた欄があります。

* letやconstで宣言されるとScriptの欄で表示される。
* varやfunction()はWindowオブ

Intersection Observer

##Intersection Observerを使ってみた。

“`javascript:javascript
const targetEle = document.querySelector(“.targetEle”);
const cb = function (entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(“inview”)
} else {
entry.target.classList.remove(“inview”)
}
})
}
const io = new IntersectionObserver(cb, options);
io.observe(targetEle)

“`

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

参考

https://qiita.com/tatsuyankm

自由入力検索エンジンでありきたりな方法だと「&」が使えない件

#趣向
検索エンジンのような機能をReact(JavaScript)で作成する時に
例えば「React&JavaScript」と検索すると、検索対象が「React」
となってしまい「&JavaScript」が消えてしまう事例があった。

他の大手検索エンジンさんはどうなってるんだ〜とふらっと
PCでGoogle先生を使用してみたらなんとGoogle先生も「&」以降の文字が消えてしまっていた！！！（2021年10月3日現在）
YahooやYoutube、モバイルでのGoogle検索は問題なしでした。

#既存の事例
location.searchでURLのパラメーターの部分を取得
例.https://www.google.com/search?q=1&rlz=10
だったら?q=1&rlz=10の部分が取得される処理です。

ここで各パラメータの値を取得したいため
標準ライブラリであるqueryString.parse(location.search)を使用。
「&」でうまく区切って、keyに対してvalueををオブジェクト形式で返してくれる
便利なライブラリだったのですがここでは「&

これからReact始めたい人のための今日だけでできるTODO#14 form

## 機能ごとにコンポーネントに分けて実装
– カウンター
– inputに入力された値を表示する

2つの機能を別コンポーネントとして定義して実装していきます。
ディレクトリ構成は下記のようなにしています。
※一部割愛。`create-react-app`をして開発環境を整えた場合は　srcディレクトリ内を編集すればOKです。

– pablic
– src
– App.js
– Counter.js
– Hello.js
– index.js

`index.js`は基本的に編集しなくてもいいと思いますが、僕が作成した時の記述を以下の通りです。
`css`は利用していませんが、形式的に読み込んでいます。

“`js:index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;

ReactDOM.render(

関数型プログラミングのすゝめ

## TL;DR

– コードがシンプルになる
– テストが楽チン
– 副作用がない
– モダンJSは関数型推し
– “`map“`、“`filter“`、“`reduce“`さえ覚えとけば大体イケる

## きっかけ

React書いてて改めて気になったので。。

## 体系的なコト

関数型プログラミングは宣言型プログラミングの一種らしいです。

– 命令型プログラミング
– 「どうやって」（**how**）に着目する
– 昔のC言語みたいな
– 宣言型プログラミング
– 「何をするか」（**what**）に着目する
– 最近だとScalaとか

### ex) 書いてみる

– 命令型プログラミング

“`javascript
/** 単語を全てハイフンで繋ぐ */
const str = “I have a pen”
let convStr = “”

for (let i = 0; i < str.length; i++) { if (str[i] === " ") convStr += "-" else co

HTMLとJavaScriptで表を作る

最初にスタイルを整えていきます

“`
body {
font-size: 22px;
background: #808080;
}

table {
border-collapse: collapse;
border-collapse: separate;
border-spacing: 2px 2px;
}

th {
background: #FFA500;
padding: 3px 12px;
}

td {
text-align: right;
background: white;
}
“`

次にjavascriptの部分

まず一番上の列を作る

“`
document.write(‘

‘);

document.write(‘

‘);
for(var i=1; i <= 9; i++) { document.write(' ‘, i ,’

‘);
}

document.write(‘

‘);
“`

次に二列目以降を作る。

“`
for(var y=1; y <= 9;

Javascriptでinputのテキスト変更後に処理

過去に書いたウィンドウリサイズのパロディ
オートコンプリートとかでつかえるかもな、、と勝手に思っています

“` HTML:入力項目のHTML

“`

“` Javascript
// 変更が止まった後、指定時間(ミリ秒)後処理を行う
const term = 500;
// タイマーの受取変数
let timer = 0;
// 変更時に処理した内容を退避
let testValue = “”;

window.addEventListener(“load”, function () {

const testText = document.getElementById(“test”);
// テキストに入力されているときの処理
testText.addEventListener(“input”, function () {
// 内容が変わっているときは、タイマーをリセットする
clearTimeout(timer);

// 指定時間後、一

プログラミング教育に JavaScript を使いたい

##この記事の趣旨

大学等で１〜２年生にプログラミングがよく教えられていますが、そこで教える言語として JavaScript はどうでしょうか？という話です。なにか高度な技術的話題が含まれているわけではありません。でももし、他の言語は知っているけど JavaScript は使ったことがないという方がおられたら、入門の役に立つかも？

##動機

大学の学部生（１〜２年）向けにプログラミングを教える授業がよく設定されていますが、どの言語を教えるのか？どんな環境を使うのか？というのは、ちょっと悩ましいところがあります。古くは（または現在も？）Ｃ言語がよく教えられているけど、そろそろ Python にしましょうよ、とか。いや、うち（教員）は Python は使ってなくて教えられない、とか、演習室の計算機には環境が入ってませんよとか、だれがアップデートするんですかとか、そういう周辺的要素もありがちです。また、最近はオンライン授業が増えてたり、対面授業でも BYOD (bring your own device) が進んだりしてますが、そのときに学生の PC に環境を用意させるのはわりと面倒で

Windows PCにReact開発用の環境作成

Reactの勉強のためWindows PCに環境作成する。
※2021/10/3時点で作成中。勉強都度更新予定。

# Chocolateyのインストール
ライブラリのバージョン管理。MacのHomebrewのようなもの。
– [公式サイト](https://chocolatey.org/)
– [インストール方法](https://chocolatey.org/install)
【注】インストールでPowershellを使用するが、管理者権限で起動すること。

# Nodistのインストール
上でインストールしたChocolateyを使ってNode.jsのバージョン管理をインストールする。
– [公式サイト](https://github.com/nullivex/nodist)
【注】インストールでPowershell等を使用するが、管理者権限で起動すること。

“`bash
$ choco install nodist
“`

# Node.jsのインストール
Node.jsをインストールする。バージョンは記事作成時の最新版 16.10.0。

“`bash
# バ

Denoでお試しMBTilesサーバーを書いた

## TL;DR

https://github.com/Kanahiro/deno-mbtiles-server-sample

“`TypeScript
import { listenAndServe } from ‘https://deno.land/std@0.109.0/http/server.ts’;
import { DB } from ‘https://deno.land/x/sqlite@v3.1.1/mod.ts’;
import { expandGlob } from ‘https://deno.land/std@0.109.0/fs/expand_glob.ts’;
import { gunzip } from ‘https://deno.land/x/compress@v0.4.1/mod.ts’;

// make connections to .MBTiles files in ‘./tiles’
const connections: { [key: string]: DB } = {};
for await (const mbtiles of expa

Modalで削除機能の実装の仕方（Laravel）

プログラミング初心者です。

##やりたいこと
LaravelでModalを使って削除機能を実装する際に、JavaScriptを使ってのデータの受け渡しに苦戦したので記録します。

##1 Modalを表示させるための削除ボタン

“`Blade.php
title }}” data-url=”{{ route(‘delete.sample’,[‘id’ => $sample->id]) }}” > 削除

“`
– “`data-*“`でModalやJSにデータを渡せます。
– 今回は“`data-title“`と“`data-url“`の値を渡します。（titleやurlは自分で命名できます）
– “`data-target“`は必ずModalのidと一緒で、頭に「#」をつけます。
　

##2 Modal実装

“`Blade.php

TypeScript + Reactの構成でアプリを作成をしました【2】【管理画面】

## Material UIとは

公式サイト：[Material UI]
(https://mui.com/)
Google の Material デザインをベースに開発された、UI コンポーネントライブラリ。
お手軽に Material デザインを取り入れらるに加え、コンポーネントの種類が豊富に用意されている為、それらを組み合わせるだけでも見栄えの良いものを作れる。1からコンポーネントを作ったり、デザインを考えるのが難しいとか、それらに工数をあまりかけたくないなどの場合にもおすすめ。

##Reactアプリを作成

###1. Create React App
#####Create React Appで新しいReactアプリを作成する。

“`
npx create-react-app <プロジェクト名> –typescript
“`

###2. ディレクトリ構成
#####コンポーネントの分け方はAtomic Designを参考。

“`
src/
├ components/
│　└ atoms/ # 原子（個々のパーツ）
│　└ molecule

使える便利な配列操作!

“`ts
const func = () => {
//targetのnameプロパティに一致したarrはidとセットの配列にする

const arr = [“佐藤”, “鈴木”,”山田”];

const target = [
{
id: 0,
name: “佐藤”
},
{
id: 1,
name: “田中”
},
{
id: 2,
name: “鈴木”
}
];

const result = arr.map((ele) => {
let targetId = “”;
target.forEach((obj) => {
if (obj.name === ele) {
targetId = obj.id;
}
});
return targetId === “” ? { name: ele } : { id: targetId, name: ele };
});

Web上で再生する動画の速度変更

##はじめに
昨今、Web上で動画を視聴する機会が増えているのではないでしょうか。

Web上の動画では「速度調節ボタン」が設定されていない場合もあります。

今回は、そんな時に役立つ記事を記載しました。

##方法
ブラウザはGoogle Chromeを使っていることが前提です。

再生したい動画ページにて右クリックします。
「検証」を押すと下図のような画面が表示されます。

左上にあるボタンをクリックします。
![スクリーンショット 2021-10-02 17.34.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/51141200-a4fc-054d-64e7-e57c13f37a5b.pn

これからReact始めたい人のための今日だけでできるTODO#13 form チェックボックス

## チェックボックスの作成

### 今回使う関数たち
|関数|挙動|
| — | — |
|includes|特定の要素が配列に含まれているかどうかを`true`または`false`で返します
|includes|特定の要素が配列に含まれているかどうかを`true`または`false`で返します
|filter|与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成する

関数ではないですが[スプレット構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)を使って配列を展開していく記法も使っていきます。

“`js
[…checkedValues, e.target.value]
“`

### 実装イメージ
【JavaScript】mozillaのJavaScriptチュートリアルをやってみる①

##前提
* HTML
* CSS

を軽く知ってるくらいで大丈夫だと思います。

チュートリアルを見てなんじゃこりゃ？となった人向けに、なるべく簡単に書いてみました。

##参考ページ

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript

##JavaScriptを体験してみる

1、まず`

`タグで文字を表示させます。

“`html:.html

Player 1: Chris

“`

2、CSSで文字を装飾をします。
装飾についてはあまり気にしなくて大丈夫です。

“`html:.html