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

私がアロー関数を一部でしか使わない理由

ES6から導入されたアロー関数、便利ですよね。
簡潔だし理解しやすいので、通常の関数よりも好んで使っている、という人は多いように感じます。

一方で、それじゃあ通常の関数の方はもうお役御免なのかというと、個人的にはそうは思っていません。
むしろ、**アロー関数でも通常の関数でもどちらでも選べる場合に関しては、基本的に通常の方を使うのが好ましいと考えています。**

## 通常の関数を使いたい理由

アロー関数と通常の関数、両者どちらも使える状況 (注*) では、あえてどちらかを選ぶべきかを考える際、通常の関数に関して、私は下記の点を意識するようにしています。

1. 呼び出し元よりも下の行で宣言できる
2. `function` という記述が先頭にある分、パッと見だと通常の関数の方が関数だと理解しやすい

まずひとつ目に関してですが、通常の関数はこのように書くことが出来ます。

“`js
sayThanksTo(“Mike”);

function sayThanksTo(name) {
return `Thanks ${name}`;
}
“`

一方で、アロー関数で同じこと

TypeScript 4.0で推したい追加機能ピックアップ

## はじめに
先日（8/20）TypeScript 4.0 がリリースされました。
メジャーアップデートとしては約2年ぶりとなります。

Announcing TypeScript 4.0

個人的に推したい機能がいくつかあったので紹介します。?

※ちなみに、TypeScript3.0のリリースは2018/7/30です。

Announcing TypeScript 3.0

## TypeScript 4.0で追加された機能

### Labeled Tuple Elements
配列内の要素にラベル付けをすることができるようになりました。
今までは配列を引数とする関数を定義する場合は、

“`typescript
function foo(…args: [string, number]): void {
// something
}
“`

のように型定義しかできなかった

【JavaScript】オブジェクトについて

#1.配列要素の挿入、削除
配列に要素を挿入したり、要素を削除する方法を見ていきます。

“`js

const alphabet = [a, b, c, d, e];

// 先頭に要素を追加したい場合 => unshift
alphabet.unshift(追加したい要素);

// 先頭の要素を削除したい場合 => shift
alphabet.shift(); // 削除は１つずつしかできないので（）の中は空白

// 末尾に要素を追加したい場合 => push
alphabet.push(追加したい要素);

// 末尾の要素を削除したい場合 => pop
alphabet.pop(削除したい要素); // 削除は１つずつしかできないので（）の中は空白

// 追加と削除を同時に行う場合 => splice
alphabet.splice(変化が開始する位置[index], 削除数, 追加したい要素);

alphabet.splice(１, ２, f, g);
出力結果は　[a, f, g, d, e] になる
// b,cを削除してf,gが挿入された
“`

#2

v-forの中で要素毎に真偽値を適用させて表示のオンオフを切り替える方法

[前回](https://qiita.com/sukeo-sukeo/items/92db381816589d7eb9d9)axiosでQiitaの自分の投稿記事を取得できました。今回はその取得した記事の中で３日以内に投稿された記事に対してのみ「New!」を付ける方法を書いてみます。
## 付けたい要素
v-forで渡ってくるitem.newBadgeの真偽値で表示を切り替える。
今回Bootstrapのバッジクラスの付いたDOMを適用させたいと思います。

“`html
New!
“`

## ３日前を判定する
axiosで取得したデータのupdate_atプロパティに更新日が入ってますので、それをDateオブジェクトに変換し、今日の日付と引き算して３日前の記事を割り出します。
methods:に処理を記述していきます。

“`js
qiitaContentsProcessing: function() {
const today = n

JavaScriptのオートコンプリートライブラリautoComplete.jsを使ってみる

## autoComplete.jsとは

レファレンスによると、以下の特徴があります。

* Vanilla.js
* 他のライブラリを必要としない
* シンプルで簡単
* 軽い
* 速い
* 汎用性が高い
* カスタマイズ性が高い

> 公式レファレンス
>
> https://tarekraafat.github.io/autoComplete.js/#/?id=api-configuration

## ハンズオン

### 1. 環境構築

autoComplete.jsでは直接DOMを触るのでReactを使う恩恵はありませんが、環境構築が楽なので`create-react-app`で動かしてみましょう。Yarnの環境が整っていない方は、Yarnのインストールもしておいてください。

“`sh
$ yarn create react-app autocomplete-react
$ yarn add @tarekraafat/autocomplete.js
“`

### 2. CSSの読み込み

`public/index.html`のheadに以下を追加します。

姿勢推定AIを使った『恋ダンス練習システム』でステイホームを乗り切ろう

##作ったもの
今更ですが、
「恋ダンス」を練習するシステムを作りました。

「恋ダンス練習システム」のウェブアプリを公開しました。みなさんも練習できますので是非　⇒ https://t.co/iEnEhs7d8q
作り方はこちら　⇒　https://t.co/z5WwErezg7#恋ダンス JavaScriptで数値の0埋め

###sliceを使う

““js
var hoge = (“000” + 3).slice(-3);
console.log(hoge);
// 003

var hogeHoge = (“000” + 123).slice(-3);
console.log(hogeHoge);
// 123

// 関数にしてみる
var zeroPadding = (val, length) => {
// ここで引数の妥当性チェックを行う方が良いのかもしれないが今回は割愛している
var parts = “”;
for (var i = 1; i <= length; i++) { parts += "0"; } return (parts + val).slice(-length); }; // 呼び出し console.log(zeroPadding(15, 3)); // 015 console.log(zeroPadding(150, 3)); // 150 ````

元記事を表示

ララベルで文字数カウントする

###ララベルでの文字数カウント
ワードなどであるかもしれませんが文字を入力したときに文字数が何文字なのかが出てくることがあると思います
今回は文字を入力しているときに今何文字なのかがわかるようにしたいと思います！

“`app.blade.php

“`
まず共通となるapp.blade.phpに記述します

“`form.blade.php

PHPでJavaScriptのアラートを表示させる

#プログラミングの勉強日記
2020年8月26日
PHPでAlertを表示させる方法を学んだので、まとめる。

#アラートとは
　Webサイト側からメッセージが表示させる機能のこと。JSで書くことができる。このメッセージはユーザに対しての警告文。アラートを簡単に実装できるのがJSのalertになる。

#JSのalertを表示させる方法
　JSでは以下のように簡単なプログラムでアラートを表示できる。

“`js
alert(‘表示させたい文字列もしくは値’);
“`

　HTMLでは以下のように書くことでalertを表示できる。

“`html:html



…





“`

#PHPでJSのalertを表示させる方法
　JSはPHPとは異なる言語ではあるが、PHPからJSの操作をすることができる。具体的には、

2020Tinder自動化・最強コード/JavaScript

どうも、最近彼女に振られたぞえです。
振られたので、新たな女性を追い求めtinderの自動フリックのコードを最新版にしました。

みなさんtinderの自動化はご存知ですか？

2020年度版/Tinderのフリックを自動で行う方法【アプリ不要】

ご存知の場合、以下に最新版のソースコードを作成したので是非使ってください。

日本で現状最強で、広告飛ばせる。途中で止まらないといった違いがあります。
適当なので誰かリファクタしてくれてもありがたいです！

“`
count = setInterval(
function(){
var buttons = document.getElementsByClassName(“button Lts($ls-s) Z(0) CenterAlign Mx(a) Cur(p) Tt(u) Bdrs(50%) P(0) Fw($semibold) focus-button-style Bxsh($bxsh-btn) Expand D(b) Bgc(#fff) Trstf(e) Trsdu($normal) Wc($transform)

ブラウザで録音しwav形式ファイルをダウンロード

[ブラウザで録音してwavで保存](https://qiita.com/optimisuke/items/f1434d4a46afd667adc6) の丸パクリです。

勉強のためにソースコードを読みながら整形しました。

“`html

Download
Stop

ref: ブラウザで録音してwavで保存 – Qiita

```

thisとbind-apply-callの基本

thisとbind-apply-callをよくわかっていなかったので
自分なりに解釈

#this

```javascript
const person = {
name: '次郎',
hello: function () {
console.log(`こんにちは${this.name}`)
}
}

person.hello()//こんにちは次郎
```
オブジェクトのメソッドとして呼んだ場合「__this__」はそのオブジェクトを指す。

####上記のメソッドを定数にいれて関数として実行した場合

```javascript
const ref = person.hello
ref()//こんにちは
```
この時、メソッド内の「__this__」はグローバルオブジェクト(window)を指すことになる。

#bind
####thisを束縛できる。

```javascript
const ref = person.hello.bind(person)//ここでオブジェクトを指定
ref()//こんにちは次郎

function fn0() {

JavaScriptの関数を使って両替機を作ってみた

```javascript