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

useEffectでsetTimeoutの繰り返しを使う場合はuseEffectに任せて再帰呼び出しはしない

例えば現在の時刻をリアルタイムに表示させたい場合、カスタムフック `useWatch` を作って、そこから更新され続ける `time` を受け取りたい。

“`tsx
const App: React.FC = () => {
const time = useWatch(1000);
return {dayjs(time).format(‘HH:mm’)}
};
“`

## 結論

“`ts:use-watch.ts
import { useEffect, useState } from ‘react’;

export default function useWatch(interval: number) {
const [time, updateTime] = useState(Date.now());

useEffect(() => {
const timeoutId: number = setTimeout(() => updateTime(Date.now()), interval);
return () => {
c

Firestore.Timestamp に触れたくないあなたのための黒魔術

# Firestore.Timestamp って、いらなくね？

ちゃんと使いこなせばメリットもあるんだろうなぁと思いつつ・・・
少なくとも小規模なプロジェクトでは、Timestamp型が存在するせいで

– Firestore から読んだ、時刻フィールドを toDate() で Date型にもどす
– Document の interface と、 REST をまたぐ interface を分ける

みたいな対応が必要になるわけです。いちいちめんどいんすこれ。
Date 型で十分な状況もあるんです。

## 問題の例
“`ts
interface User {
name: string;
updatedAt: Date;
}

const write: User = {
name: “taro”,
updatedAt: Date.now(),
};
await firestore
.collection(“users”)
.doc(write.name)
.set(write);

const read: User =
await firestor

サーバーレスなWebアプリを、Dockerコンテナ上に移植する

## 概要
以前Qiitaで公開した、[Vue.jsとAWSでつくるシングルページの家計簿アプリ](https://qiita.com/KMim/items/f3975e308d07df4b359f)を、Dockerコンテナ上に移植しました。そこで、その過程をここに軽くまとめておきます。

[GitHubのリポジトリは、こちらです。](https://github.com/KMimura/AccountingApp)`docker-compose`コマンドが使えるサーバーにコードをデプロイすれば、使えるようになると思います。

“`bash:インストールのコマンド
# コードをGitHubから取得
git clone https://github.com/KMimura/AccountingApp
# 取得されたフォルダに移動
cd AccountingApp
# docker-composeの立ち上げ
docker-compose up -d
“`

## 元のサーバーレスのアプリ

同アプリは、元々サーバーレスな感じでデプロイしてありました。
![tmp.png](https:

JavaScript: thisと格闘する /Reactでthisの壁にぶつかったら読む記事

## React触っていて突如現れる謎のキーワード: *this*

フロントエンジニアの皆さん,Reactは使っていますか?
Reactの勉強を初めてチュートリアルを見ていてthisの壁にぶつかったことはありませんか?
私はJavaScriptを触るのがReactで初めてだったので,基礎的な文法しか知らない状態で挑んでしまったがためにこのthisという存在に恐怖してしまいました.
[コンポーネントに関数を渡す-React](https://ja.reactjs.org/docs/faq-functions.html#why-is-binding-necessary-at-all)
↑ちょうどこの記事を読んでいて｢thisわからん. JSわからん｣となってしまいました.
ですが日々JSやpythonなどでオブジェクト指向プログラミングをしているうちになんとなくthisの存在を認められ､理解できるようになってきました｡特にpythonではクラスを定義したときにメソッドの第一引数にJSの *this* にあたる *self* を強制的に書かされるので, pythonを勉強していたおかげでt

Linux環境におけるNode.jsのためのyarn導入から利用

#はじめに
投稿者の備忘録としての活用が主です。
Webの作成において役に立つNode.jsのパッケージマネージャーとして
yarnを導入しました。([Node.jsの導入はこちらから][nodejs])
(Pythonでいうところのpip的な感じ)
yarnを使って様々なライブラリなどを自分のプログラミングに活用していけます。

#環境
`wsl(Windows Subsystem for Linux)`にインストールします。

“`
Editor: VSCode
Shell: bash version 4.4.20
Ubuntu: 18.04.4 LTS
node: v10.14.2
“`

#目次
1. **yarnの導入**[ >>](#1yarnの導入)
2. **yarnについて**[ >>](#2yarnについて)
3. **npmパッケージ作成**[ >>](#3npmパッケージの作成)
4. **作成したパッケージの利用**[ >>](#4作成したパッケージの利用)

#1.yarnの導入
`wsl`のコンソールを開き、

“`bash:wsl
$ curl

GatsbyでScssファイルを作成して読み込む方法

GatsbyでSCSSを書いたり、Bootstrap4のような外部ファイルを読み込む方法。

## GatsbyでSCSSを読み込むには

### Gatsbyの設定
まずは必要なモジュールをインストール。

“`
npm install –save node-sass gatsby-plugin-sass
“`

次に`gatsby-config.js`の`plugin`設定を追加。この設定を行うとコンパイルできるようになる。

プラグイン設定で圧縮形式などオプション設定も可能。
https://www.gatsbyjs.org/packages/gatsby-plugin-sass/

“`js
module.exports = {
…
plugins: [
{
resolve: `gatsby-plugin-sass`,
options: {
outputStyle: ‘compressed’, // nested, expanded, compact, compressed,
},
},

インクリメンタルサーチを噛み砕く

#近況報告
やあ。テックキャンプのリモートワーク化がはじまって四週間目に突入しました。我がチームはついに最終課題をパスし間も無く就職活動に入ります。そこで大きな壁，**履歴書の自己開示**。わたしが一番苦手とする場所です。「わたしはプログラミングでご飯食べていくってきめたの！」って叫んで内定決まればいいのに笑

さて，今日の記事は個人アプリにインクリメンタルサーチを実装のついでの忘備録です。実況感覚で書いていきます。

# インクリメンタルサーチ
##なにそれ
　英語でincremental search，直訳は増加検索ですね。通常の検索は検索ボタンを押すとページが更新されて検索結果が出てきますが，この検索は一文字入れるごとに非同期通信で検索結果がぽんぽん出てきます。youtubeやGoogleとか検索の予測がでますね。あれです。~~文字を打つごとに予測される結果が減るからデクリメンタルサーチでもいいんじゃね。~~ちなみに，予測の変換に履歴が出てくるのはcookieがかかわるので少々異なります。

**非同期通信**・・・ユーザーの望むタイミングとは別で行われる通信です。**通信自体は

Linux環境におけるNode.jsの導入から利用

#はじめに
投稿者の備忘録としての活用が主です。
Webの作成において役に立つNode.jsを導入します。

#環境
`wsl(Windows Subsystem for Linux)`にインストールします。

“`
Editor: VSCode
Shell: bash version 4.4.20
Ubuntu: 18.04.4 LTS
“`
#目次
1. nvmの導入[ >>](#1nvmの導入)
2. Node.jsの導入[ >>](#2nodejsの導入)
3. REPLを使ってみる[ >>](#3replを使ってみる)
4. ファイルを実行してみる[ >>](4ファイルを実行してみる)

#1.nvmの導入
Node.jsのバージョンを管理するためにまず`nvm`を導入します。
現在利用しているNode.jsのバージョンの把握
別バージョンへの切り替えなどを行えます。

“`bash:wsl
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
“`

Prebid勉強メモ

### $$PREBID_GLOBAL$$

– アダプターはPREBID_GLOBAL変数を使用できない。代わりに、必要な関数をロードして直接呼び出す必要があります。

Kinx ライブラリ – Binary

# Binary

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。言語はライブラリが命。ということでライブラリの使い方編。

今回は Binary です。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

バイナリ（Binary）は配列（Array）に似ているが、保持できる値が 0x00 ～ 0xFF までのバイト列である点が異なる。内部実装的にも単純にバイトの Vect

[JQuery]ページ内リンク（スクロール）の実装

# ページ内リンクへのスクロールの実装
ページ内リンクへのスクロール機能を作ってみたので復習として記録しておきます。
HPの作成などで縦に長くなって来るとスクロールでページ内の移動が出来るととても便利です。

↑こんなやつです。
こちらはヘッダーの各項目がaタグになっていてhref属性にidを指定することにより対応するidのコンテンツに移動することができるようになっています。

# 実装方法
では早速実装方法について見ていきます。
先ずはヘッダー部分ですが、上で述べているようにaタグのhref属性に各項目のidを指定しています。

“`index.html

Agar.ioのAntiBOTがエグすぎるまとめ

Agar.ioは超有名なゲームなので知っている方もいると思います。


今回のお話はアプリ版ではなくブラウザ版のアガリオが対象です
https://agar.io/

現在は残念ながら過疎化が進んでしまいましたが、全盛期は本当に大人気でした（海外では）

人気なゲームゆえに、やはりチート（ボット）を作る人たちがいました。

2015年から始まったゲームですが、つい昨年までずっと「`ボットを作る→運営がBOT対策→Bot対策を突破できる新しいBotを作る`」が繰り返されてきました。

**なので現在のAgar.ioのAntiBotはかなりエグイものになっていますｗ**

私もAgar.ioを解析して独自のクライアントを作ったり、Botも作ったことがあるので、Agar.ioのBot対策がどんなものかをご紹介したいと思います。

#はじめに

Agar.ioのAnt

yarnのcacheでハマった

めったに起こらないエラーだと思うがyarnのキャッシュでハマった。同じ地雷を踏む人がいないとも限らないので書いておく。

ローカルで開発していたjavascriptのライブラリを

`yarn add javascriptのライブラリのパス`

でreactに追加して開発をしていたらyarn addの際に以下のエラーが出るようになった。

“`
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] ? Resolving packages…
[2/4] ? Fetching

セマンティックバージョニングを正規表現で評価する

###公式リンク↓↓
[セマンティックバージョニング2.0.0](https://semver.org/)(最後の方に載ってます)

###見るのが面倒な人向け↓↓

“`javascript
const regex = new RegExp(/^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/);
if(regex.test(hogehoge)){
console.log(“OK”)
}
“`

1分でわかるBootstrap4の書き方

Bootstrap4を実際に書き始めるまでの基礎をまとめました。

“`html:CDN