f@ctor

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

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

【javascript】テンプレートリテラルとアロー関数を用いた、シンプルな引数有りメッセージ呼出ファンクションの実装検討

# 背景

Nuxt.js(node.js)にて開発する時、まずメッセージの体系化を行いたい。引数にも対応可能なのが望ましい。

* 引数含むメッセージファンクション
* 呼び出し側

上記２要素で完結しつつ、１メッセージに付き１行～２行ぐらいでシンプルにならないかと考えた。

# 成果
一応できた。

## メッセージ側

“`
// アロー関数を用いて記述、実行。
var messages = {
example1: (…args:string[]) => escape(`const${args[0]}${args[1]}${args[2]}`) ,
example2: (…args:string[]) => escape(`テ${args[0]}ス${args[1]}ト`)
}

// XSS対策のエスケープ
function escape(str:string){
str = str.replace(/&/g, ‘&’);
str = str.replace(/

元記事を表示

RGBの補色を返す関数を書いた

書き捨てのコードなので、適当に参考にしてください。
実装はTypeScriptですが、同じノリで他の言語もできると思ってます。

“`
wikipedia
補色同士の色の組み合わせは、互いの色を引き立て合う相乗効果があり、これは「補色調和」といわれる。
しかし、純色など、明度が同じ補色同士を組合せた場合は、ハレーションを引き起こして、目がチカチカしてしまう
“`

“`javascript
// FFFFFF, 00FF1E などの文字列を受け取り、その補色を設定して返却する
getComplementaryColor(rgbStr: string): string {
const R = rgbStr.substr(0, 2).toLowerCase()
const G = rgbStr.substr(2, 2).toLowerCase()
const B = rgbStr.substr(4, 2).toLowerCase()

const r = (’00’ + (255 – parseInt(R, 16)).toString(16)).sl

元記事を表示

TypeScriptの関数で最低限押さえておきたいポイント

## この記事について
TypeScriptの関数で最低限知っておきたいポイントを駆け足でまとめてみました。各種深掘りはしないので予めご了承ください。

## レストパラメーター

型安全な可変長引数を引数として受け取る場合に使用します。

> Rest parameters are treated as a boundless number of optional parameters. When passing arguments for a rest parameter, you can use as many as you want; you can even pass none. The compiler will build an array of the arguments passed in with the name given after the ellipsis (…), allowing you to use it in your function.

参考文献：「[Rest Parameters](https://www.typescriptlang.

元記事を表示

[jQuery]ランキングしたものをslickで表現する

# はじめに
本記事では、slickを用いた記述をいたします。
`slick`はjQueryベースのスライダーを作成するための`プラグイン`です。

# コード
いろんなサイトやYouTubeの動画を参考にしましたが、
`CDN`を使用するのが一番良いなという結論に至っています。
（ファイル保存とか色々グダってトラウマ）

“`erb


省略


<%= yield %>

以前[DHHのブログ](https://w

元記事を表示

Akashic Engineマルチプレイゲームにおける通信遅延を考慮したアニメーション同期

[Akashic Engine](https://akashic-games.github.io/) でマルチプレイゲームを作る際、通信遅延を考慮した他プレイヤーアクションのアニメーションタイミングの調整テクニックを紹介します。

# はじめに

マルチプレイゲームの場合、他プレイヤーのアクションはサーバを介して通知されるため、時間が遅れて自マシンに届きます。そのため、音ゲーなどのアニメーションのタイミングが重要なゲームだと、他プレイヤーの行動が遅れて反映されるような望ましくない形で表示されてしまいます。そこで、通信ラグを計測してアニメーションを調整することで、全プレーヤが同じ内容の画面を見ているようにします。

# 作りたい動作

飲み会などで最後に行う一本締めのワイワイ感をマルチプレイゲームにしたいと思い、幹事のかけ声にタイミングを合わせて「一本」するゲームを作ろうと思いました。仕様は以下の通りです。

* ゲーム開始時、プレイヤーが「一本」すべき時刻をプログラム内部で決める
* 上記時刻に合わせて幹事を模したキャラクターがかけ声をかける
* プレイヤーが幹事のタイミングに合わせて

元記事を表示

Redux最低限（2021年8月）

もう今後はRecoilかな。。。とは思いますが、Reduxも他人のソース見たりするときに必要なので書いておきます。
Recoil版は[こちら](https://qiita.com/zaburo/items/e28be44f6b98e36b38c7)。

## やりたいこと

* hook利用下でのRedux利用
* react-router-domを利用したページ遷移での値の維持確認
* データの永続化

下記のような感じ。

![スクリーンショット 2021-08-31 19.58.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/62c7ebe7-aaf7-bce7-0137-08cd1a012148.png "スクリーンショット 2021-08-31 19.58.35.png")

## 準備

まず準備。

### 作業場の確保とライブラリのインストール

```bash
npx create-react-app redux-test
cd redux-test

npm in

元記事を表示

キータ始めました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958919/135751ba-2fc4-9fe5-a2d3-0eb68fb60280.png)

#制作物やコードをメモ

プログラミングを勉強し始めて一か月くらいたつのですが、キータを始めてみることにしました。
わからないコードがあった時などキータはよく使っていたので、自分でも制作物やコードをメモしておこうかなと思います。

元記事を表示

赤外線リモコン温湿度センサ部品の取付け

##作成のきっかけ
毎朝TVの音声映像で目覚まし時計かわりに起床したいと、ラズパイ赤外線リモコンを作ることにした。
参照した記事は、
1. [ 格安スマートリモコンの作り方 ](https://qiita.com/takjg/items/e6b8af53421be54b62c9)
2. [ Raspberry Pi zero W + IR - something tech.](https://blog.web-apps.tech/raspberry-pi-zero-w-ir/)
この2つの記事を見て出来そうな気がして取り掛かる。
部品の入手は、記事の通りに [秋月電子通商](http://akizukidenshi.com/) で購入した。追加したものは、手元にあった2つ
(1) 高輝度LED(ELEKIT LK-5RD 5個入) 購入当時 200円
(2) 高精度気圧センサーモジュール(BME280) 購入当時 660円x4
も載っけた。

老眼で手元が見にくいし不器用なのでユニバーサル基板ハンダ付けに自信なかったが、ミスっても何度でも作ればとチャレンジすることした。

記事の通りに

元記事を表示

Javascriptにおける ”this” とは？

# はじめに
Reactやコンポーネント思考を利用するには必須といっていいほどの__"this"__について何となくでいつも使ってましたが、今回しらべるふと意味を調べられずにはいられなくなったので備忘録として残したいと思います。
*内容に不備や言葉足らずなところがあるかと思いますがご了承ください。

## thisとは？
__"this"__ってなんだ？
みんな大好きWeblio辞書で調べてみました。
> 主な意味：
>この、ここの、こちらの、こういう、(たった)今の、現在の、今…、当…、ある(一人の)
>__(空間的，時間的，心理的に話し手の近くにある対象を指す)__
>引用 : https://ejje.weblio.jp/content/this

ほぉ～・・・だよね。って思いましたがカッコ内にある内容がJavascriptととしての"this"の意味合いと
マッチしており（注：個人的主観）おおおおおおっ！となりました！！

### Javascriptとしての"this"
では早速本編に入っていきます。

下のコードを見てください。
特に何の変哲もない一般的なオブジェクト宣言と

元記事を表示

Nuxt.js入門 Vol.1 ～天気予報取得アプリNuxt化編～

こんにちは！
LIFULLエンジニアの吉永です。
直近業務でここ一か月間はNuxtにてSPAを開発してましたので、業務で得た知見を忘れないうちにアウトプットしたいと思います！
※やっぱり業務でやるのが一番身に付きますね・・・[7:2:1の法則](https://note.com/haru_tat/n/nb5aedc589746)を改めて実感しました

## 本記事の概要

[Vue.js入門 Vol.1 ～jQueryとの対比編～](https://qiita.com/YoshinagaYuta/items/278a0d6223952ecc7e29)
[Vue.js入門 Vol.2 ～jQueryとの対比編～](https://qiita.com/YoshinagaYuta/items/471fc5cb0cadc8910334)
[Vue.js入門 Vol.3 ～基礎まとめで簡易家計簿を作る編～](https://qiita.com/YoshinagaYuta/items/675e2538fa163f12cd49)
[Vue.js入門 Vol.4 ～外部API呼び出し編～](https

元記事を表示

Vuexを触ってみる

開発版ビルドでとりあえず中身を覗いてみます。[参照元](https://vuex.vuejs.org/ja/)

```
$ git clone https://github.com/vuejs/vuex.git node_modules/vuex

$ npm install

$ npm run build
```
エディタを再起動して、

```
$ cd VUEX/

$ npm run dev
```

[ブラウザで、確認！](http://localhost:8080/)
![スクリーンショット 2021-08-31 16.28.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/8c324466-a7ea-f400-2a27-fcdd6b6e1b7e.png)
##・Counter 内実装
```app.js
import Vue from 'vue'
import Counter from './Counter.vue'
import store from './stor

元記事を表示

ウェブサイト作成用備忘録・１７号：three.jsとHTMLの連動に挑戦【コピペでプレビュー】

今回は１５号の発展版として、
__three.jsで表示した3DグラフィックをHTML側で作成した操作パネルで動かしてみる__
に挑戦してみました。

https://qiita.com/suzzzki/items/201fd67bd6455261f0c0

__【コピペでプレビュー】__

```HTML