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

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