JavaScript関連のことを調べてみた2022年07月05日

学び直しのJS ~ スプレッド構文・分割代入編 ~

学び直しシリーズ第三弾！
今回はスプレッド構文と分割代入編です！

## スプレッド構文
スプレッド構文は**配列**や**オブジェクト**の要素を分解してくれる構文です。
スプレッド構文を配列とオブジェクトに使って例を紹介します。

### 配列
“`javascript
const array1 = [“cat”, “dog”];

// array1のコピー(参照ではない)
const array2 = […array1];

// 要素を追加して新しい配列を生成
const array3 = […array1, “mouse”];

// 配列を結合して新しい配列を生成
const array4 = […array1, …array2];
“`

### オブジェクト
“`javascript
const user = {
name: “Mike”,
age: 18
};

// userのコピー(参照ではない)
const copyUser = { …user };

// プロパティを追加した新しいオブジェクトの生成
const newUs

動画の編集とレンダリング、Webブラウザでできます【JavaScript / Web Audio API / ffmpegで実装したサービスの紹介】

# Double TONE
Double TONEというブラウザ上で動作する動画編集サービスを作っています。本業はエンジニアではないため諸先輩方にご紹介するのは痴がましいですが、デザインも実装も一人で進めているこのサービスの紹介と、どのようにWebブラウザで動画編集を実現させているかを紹介しようと思います。

まだまだなサービスではありますが、今後もどんどんいろんな機能だったり使い勝手の向上をしてきますので、ぜひご意見を頂戴できれば幸いです。

Double TONEはサーバーサイド含めてすべてをJavaScriptで構成しています。UI制御はだいぶレガシーな作り(なんと`jQuery`ベース)で、レンダリング部分は`Web Audio API`と`ffmpeg`で作り上げています。コードの一部はこの記事の後半に載せています。

学び直しのJS ~ アロー関数編 ~

学び直しシリーズ第二弾！
今回はアロー関数です。

ES6をちゃんと勉強せずVueの勉強をはじめてしまったせいで、`import`や`() => {}`の意味がわからなくて挫折したことがあります。
VueやReactなどのモダンな技術に触れようとする心意気は非常に大事だと思うのですが、同じような経験をしてほしくないのでこの記事でざっくりとイメージを掴んでもらえたらなと思います！

## アロー関数
解説に入る前にまずは従来の方法と見比べてみます。

“`javascript
// 従来の書き方
function square(x, y) {
return x * y;
}

// アロー関数
const square = (x, y) => {
return x * y;
};
“`

### 特徴１
アロー関数は **無名関数(匿名関数)** と同じように、関数を定義した段階では関数名が定まっていません。

### 特徴2
アロー関数の処理が１行の場合は`{}`と`return`を省略することができます。
“`javascript
// アロー関数
const squa

【初心者向け】今すぐ使えるJavascript クリーンコード簡単TIP

この記事では、文法自体よりもコード作成中によく出会う状況にごとにペストプラクティスをまとめています。

## if文関連
個人的な意見ですが、if文の周りで迷う時は大体ロジック自体を見直すことでリファクタリングができました。
不要なif文を使ってないか、いらないロジックを追加してないか、などを検討します。

### 条件文が長い時
条件文自体を定数に入れ、コードを読みやすくします。
“`jsx
// bad
const a = ‘dog’
if (a === ‘dog’ || a === ‘cat’ || a === ‘fish’ ) {
doSomething()
}

// better
const isPet = a === ‘dog’ || a === ‘cat’ || a === ‘fish’)

if (isPet){
doSomething()
}

“`
### if分文が多い、二重、三重if文を使っている時
不要なif文を使っていないか再確認します。
“`jsx
// bad
function canDrin

レスポンシブデザインに欠かせないデバイス判定について

## はじめに

– レスポンシブデザインに欠かせないデバイス判定を行う方法をメモしていきます。

## 画面幅による切り替え

### window.matchMedia

“`javascript
if (window.matchMedia(“(max-width: 768px)”).matches) {
// ここにビューポート768px以下の挙動を記述
} else {
// ここにビューポート769px以上の挙動を記述
}
“`

– ビューポートを基に判定し、考え方としてはcssのメディアクエリと同じです。
– `matchMedia`は`MediaQueryList`オブジェクトを返し、オブジェクトが持っている`matches`プロパティは渡した引数に対して`boolean`の値を返します。
– 上記のコードの場合、引数に渡した`max-width: 768px`に対してビューポートが768px以下だったら`matches`プロパティから`true`が返ってきます。

### window.innweWidth

“`javascript
if (windo

slickの使い方(スライダー)

# 初心者による初心者のためのslick講座

## slickとは
レスポンシブ対応しているスライダー用のjQueryプラグイン。
タッチイベント・スワイプなどにも対応しているjQueryの定番プラグインです。
上のように画像を切り替えておしゃれな雰囲気を出したかっ他ので勉強。
読み込み方がややこしくて、ドキュメントも英語のため初心者用に解説します。

## slickの使い方
### slickの読み込み
使う方法は、必要なファイルをDLして読み込むか、CDNを使って読み込む必要があります。
今回は、CDNを使って読み込む方法を解説します。

**1.まず、slickのサイトに飛びます。**
https://kenwheeler.github.io/slick/

以下の画面に遷移します。
![スクリーンショット 2022-07-04

[jQuery][DataTable]結合したセルにてSortを行う

# 概要
以下の投稿で課題としていた結合したセルにてソートが正常に動作しなくなる件について、
これまたdatatableの仕様に苦しんだので解決方法を記載します。

https://qiita.com/nagataichiko2249/items/4c6ffe319190c1bb198f

# 目次

1. [問題事象](#Chapter1)
1. [原因](#Chapter2)
1. [解決方法](#Chapter3)
1. [終わり](#Chapter4)

# 問題事象
以下のような表をdatatableを使用して作成した際、
datatableが行なってくれるソート処理が、rowGroupを使用しない場合と使用した場合で異なる仕様となる。
・rowGroupに指定したcolumnは先頭項目でのみソートが可能。
・rowGroupに指定していないcolumnはrowGroupにて結合された項目内でのソートとなる。

![image.png](https://

JSで読んだSMFをファミコン風音源でとりあえず鳴らす

これの続きです

https://qiita.com/McbeEringi/items/8bc80a03f97c018066dd

# 実時間変換
まず各イベントのデルタタイムを実時間に変換する
基本的に
`60000000/分解能/テンポ*デルタタイム積算`
テンポは途中で変更が入る
個人的に悩んだのは例えばノートオンからノートオフまでの間に別トラックでテンポ変更が入った場合のテンポの扱い
自明といえば自明だがもともとmidiはリアルタイムで動くものなのでノートオンからテンポ変更までとテンポ変更からノートオフまで別のテンポで計算する必要がある気がした
実装としては一度すべてのトラックでデルタタイム(相対的なtick)から絶対的なtickに変換してトラックを結合してソートしてから相対的なtickに戻してテンポを考慮して積算していくような感じ
できたものがこれ
“`js
//let w=smfin(blob);
//トラックを結合して絶対時間に変換
const smfuni=w=>w.tracks
.flatMap((x,trk)=>x.reduce((a,y)=>(y={…y,

[jQuery]DataTableでセルを結合する

# 概要
jQueryのDataTablesライブラリを使用し、セルを結合した以下のようなテーブルを作成する際、
ライブラリの仕様によって苦しんだので解決方法を記載します。

jQueryのDataTablesライブラリの概要については以下が分かりやすかったです。
https://qiita.com/nissuk/items/7ac59af5de427c0585c5

# 目次

1. [問題事象](#Chapter1)
1. [原因](#Chapter2)
1. [解決方法](#Chapter3)
1. [課題](#Chapter4)
1. [終わり](#Chapter5)

# 問題事象
セルを結合したTableにDa

Cloud Functions for Firebaseでリクエストbodyが消失する問題でハマった。

# Cloud Functions for Firebaseでリクエストbodyが消失する問題でハマった。

Cloud Functions for Firebaseでリクエストbodyが消失する問題でハマったので、同じ轍を踏む人がいない様に共有。

## 結論

クライアント側のContent-typeが重複して定義されていた。

`Content-Type: application/json,application/json`

## 現象

Cloud Functions for Firebaseでリクエストbodyが消失した。
消失したとは、functions.https.Requestのbodyプロパティが空のオブジェクトになっている。

## 状況

* JSONをInputとして受け付けるAPIをCloud Functions for Firebase上で運用していた。
* 内部のサービスから突然リクエストbodyが空のリクエストが来る(起きたり起きなかったりする。)
* クライアント側のコードを見ても確実にリクエストbodyは付与している。
* Cloud Functi

[javascript][python][php]デフォルト(オプション)引数

仕事で身に付けた技術や仕事以外で身に付けた知識を、自分用の備忘録として投稿していきたいと思います。

# 今日の内容
会社で先輩方にしていただいた、Vue.jsで書いたコードのフィードバックで、javascriptのデフォルト引数を使ったので、備忘録として残します。

# 使うことになったきっかけ
空配列を初期値とした変数が、なぜか`Undefined`になってしまっていて、どこで`Undefined`が入ってしまっているのかわからなかったので応急処置として使いました。
(はじめは、`if`分岐で`Undefined`が入っていたときの処理を書いていました。デフォルト引数を使うことで、ネストが減りました)

# 使い方
至ってシンプル。引数に続けて`=デフォルト値`を書くだけ。引数が未定義だったとき、デフォルト値が引数にセットされる。
~~~ javascript:sample_undefined.js
//引数が未定義
function sum(x=0, y=0, z=0){
return x + y + z;
}

sum(); //0
~~~
~~~ javascript:s

FIDを改善するためにサードパーティ製のコードを遅延読み込み

## はじめに
SEO対策としてCoreWebVitalの改善をするためにPageSpeedInsightやlighthouseで調査していると、JavaScriptの削減を提案されることがある。
サードパーティ製のスクリプトを使用しており、削減できなかったので遅延読み込みで対応してみた。

## Youtubeを遅延読み込み
今回は [lazysizes](https://github.com/aFarkas/lazysizes) を使用して、[Youtube Iframe API](https://developers.google.com/youtube/iframe_api_reference?hl=ja) のリクエストを遅延読み込みする。
具体的には、lazysizesがlazybeforeunveilイベントを発火するので、これを受け取ったらYoutubeIframeAPIにリクエストを送り、指定したidのdivタグをyoutubeの埋め込みiframeタグに変換する。

“`html


…