JavaScript関連のことを調べてみた2019年12月02日

超シンプルなページでPageSpeedスコア0点を意図的にとる方法

PageSpeedスコアの採点ロジックを逆手にとって、**わざと0点をとってみる**デモンストレーションというかお遊びです。

逆説的にPageSpeed Insightsの採点ロジックを検証します。

PageSpeed Insightsの点数はどのように計算されているか。100点をとるための条件
https://qiita.com/miyanaga/items/d38124cdd64a1999fed9

# まずは超シンプルなページ(100点)

`h1`要素ひとつのシンプルなページを用意します。

“`html

[webpack]ts-loaderでJavaScriptをトランスコンパイルする(babel-loader不要)

# [webpack]ts-loaderでJavaScriptをトランスコンパイルする(babel-loader不要)

[こちら](https://ttis.croud.jp/?uuid=0d5848eb-d9e8-4dd2-ba12-dae3dd861ee1)にも同じ記事を書いています

## ts-loaderはJavaScriptをトランスコンパイル出来るのか？

　ts-loaderはTypeScriptをトランスコンパイルするというのが、固定観念になっていないだろうか？しかしTypeScriptのパッケージに付属するtscではJavaScriptをコンパイル出来る。ならばts-loaderでも同様のことが出来て当然なはずだ。特にTypeScript3.7系統になってからは、JavaScriptのトランスコンパイル関する制約がかなり緩和された。ならば試してみるのが早い。

## 環境構築

### パッケージのインストール

適当なディレクトリを作り、以下のコマンドを使ってパッケージを放り込む
コンパイルはTypeScriptにやらせるので、babel類はもちろんインストール

AKashic Engineで作成されたゲームのビジュアルテストをするためのツール【概要・使い方編】

この記事は、[Akashic Engine Advent Calendar 2019](https://qiita.com/advent-calendar/2019/akashic-engine)の2日目の記事です。

# TL; DR
(すごい今更で説明するまででもないかもですが、、)[Akashic Engine](https://akashic-games.github.io/) を利用することでブラウザで動作するゲームを作成することができ、
Akashic Sandbox (`akashic-sandbox`) や akashic-cli の serve コマンドで動作確認することもできます。
ただ、Akashic Engineには現状では結合テストが用意されていないので、期待通りの表示になっているかを確認する結合テスト(**ビジュアルテスト**)を作成してみました。
これを用いることによってフレーム単位で期待通りの表示になっているかを確認することができるので、シーン遷移の確認だけでなくゲーム中のアニメーションが期待通りの動作をしているかも確認することができます。

# 作った

VAOとインターリーブ配列とインスタンシング ～WebGL 2.0 バージョン～

さて、この記事を書き始めたのは 2019年12月2日の1時あたりでしょうか。

まだまだ、WebGL のアドベントカレンダーがスカスカであると知り、なぜにと思いよく見ると Three.js に分散がしたがゆえの過疎化が起きている状態でした。哀しみ。

日頃から WebGL やるなら Three.js 使えばよいと思うよ。と皆に進めておきながら自分は基本的にライブラリなしで書いており、Three.js はあまりわからない始末。いつしか何故かネイティブ愛のような謎の感情も湧いてきている気さえする。それ故に書かなくては、書かなくては、と心の奥底から囁く声にいざなわれて、気づけばキーを叩き初めていたのです。

とうことで、表題のとおり WebGL 2.0 で VAOとインターリーブ配列とインスタンシングをすることについて書いていきます。言い訳ですが、急遽書き始めたので既にあったデモをもとに雑に書いていきます。あしからず。

それぞれについてはお馴染みの以下のサイトをみると分かりやすいです。

– [VAO について](https://wgld.org/d/webgl2/w006.html)
–

エンジニアなら知っておくべき教養、フレームワーク解剖学【Express編】

このエントリは、[GMSアドベントカレンダー2日目](https://qiita.com/advent-calendar/2019/global-mobility-service)のものです。
昨日は、[Hiroshi Oda](https://qiita.com/hi1280)さんの[AWSでドキュメントサイトを最速で公開する方法。自動デプロイもあるよ！](https://qiita.com/hi1280/private/2182a52a24a0783ded97)でした。

Node.jsで最も使われているフレームワーク「Express」。職場ではExpressを用いて開発しているのですが、自分にとってExpress内部が完全にブラックボックス化していました。こりゃまずい。ということで、Expressをソースコードから理解してみた際のまとめ記事です。

Expressは最小限で柔軟なアプリケーションフレームワークと言われていることもあり、他のフレームワークと比べてフレームワークの内部挙動を把握しやすいと思います。そのため、Expressを知らない、Node.jsを知らないという方でも

バグを引き起こしかねないJavaScriptの仕様

## はじめに

はじめまして。advent calendar初参戦の中村です！
ZealsにはRailsエンジニアとしてJoinしましたが、3ヶ月ほど前からReactをメインに書いています。
Reactの勉強と並行して一ヶ月ほどJavaScriptの勉強も行いました。
その際に『気をつけないとバグに繋がるな〜』と思った仕様について書いていこうと思います！！

## +演算子
JavaScriptには数値の足し算と文字列連結の**『+』**があります。
以下のコードがどのような挙動になるか是非一度考えてみてください！

“`javascript

➀console.log(3 + 4 + ‘5’);
➁console.log(‘3′ + 4 + 5);
“`

結果は

“`javascript
➀ ’75’
➁ ‘345’
“`

となります。

## なぜか
JavaScriptの**『+』**はこのように処理されます。

– JavaScriptの処理は被演算子のデータ型から『+』が加算なのか、文字列連結なのかを判断する。
– 加算と文字列連結はいずれも左から右に評価さ

JavaScriptのリファクタリングツール「jscodeshift」の使い方

# はじめに
JavaScriptのコードを一括で変換したり修正したい場合、正規表現などを使い置換しますか？
シンプルなケースであればそれでも問題ないですが、複雑な変換であればASTベースでコードを自在に変換できる**「[jscodeshift](https://github.com/facebook/jscodeshift)」**が便利です。

`jscodeshift`を利用すると、以下のようなことができます。

## 例) `function`で書かれた関数をアロー関数に一括で変換

`target/arrow-function/index.js`

“`js
const fn = function() {
console.log(“foo”);
}.bind(this);

[1, 2, 3].map(function(v) {
return v * v;
});

Promise.resolve()
.then(function() {
console.log(“foo”);
})
.then(function() {
return 1;

Node.jsでローカルファイルを軽やかに操作するスクリプト集

# はじめに

こんにちは、たか（[@HighHawk5](https://twitter.com/HighHawk5)）です。

最近、50GBのアクセスログファイルを解析する機会があったのですが、データサイズが大きすぎて普通のファイルシステムでは途中で処理が落ちてしまうんですね。
そこで**Node.js**の非同期処理（ストリーム）を採用したところ、なんの問題もなく思うような処理をサクサクと行うことができたので、Node.jsのファイルシステムを使ってローカルファイルを操作できるスクリプト集を作りました。
ローカルファイルを一括で修正したり、解析したり、スクリプトを組み合わせて色々なファイル操作に活用してみてください。

**今回つくったスクリプトはすべてGitHubに上げておきましたので、ダウンロードしてすぐお使いになれます。**

“`bash
nodeFileSystem
├── changeLines.js
├── deleteFiles.js
├── grepFiles.js
├── listUpFiles.js
├── modules
│   └── fsCusto

jExcel Spreadsheetを使ってみる

[jExcel Spreadsheet](https://bossanova.uk/jexcel/v3/)を試したので投稿します。


Data GridのライブラリでExcel風編集ができるものとして、Handsontableが有名ですが、商用利用の場合は有償になりました。jExcel SpreadsheetはMITライセンスなので、無償で利用する場合はHandsontableの代替手段として使えるのではないかと思います。

#1. 利用方法

## (1). ダウンロード

[Git HUB](https://github.com/paulhodel/jexcel)からファイルをダウンロードして適切な場所に配置します。

## (2). 配置例

任意ですが、私は以下のような感じで配置します。

“`
static
css
je

10秒ごとにアラートする、ボタンで開始、停止するには

“`html

10秒毎にアラート

Start
Stop


“`
“`javascript