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

PageSpeedスコアを左右する「ロングタスク」を体感する

# PageSpeedスコアの「インタラクティブになるまでの時間」

PageSpeedスコアが計算される上で、最も重視される指標が**「インタラクティブになるまでの時間」(TTI)**です。

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

この**「インタラクティブになるまでの時間(操作可能になるタイミング)」**について、公式では以下のように説明されていますが、

> 「操作可能になるタイミング」とは、レイアウトが安定して、主要なウェブフォントが表示され、メインスレッドでユーザー入力を処理できる状態になるタイミングとして定義されます。
> https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive?hl=ja

もう少し詳しく調べてわかったことを以前、[インタラクティブになるまでの時間(TTI: Time To Inter

AngularでCloud Storage for Firebaseにファイルアップロード(キャッシュとか)

# 記事の目的
Firebase便利ですよね。
なかでも簡単にファイルアップロードは便利です。

こちらに手順を記載されている記事があります
https://qiita.com/daikiojm/items/1c5940d618b3b644439a

– downloadUrlが非推奨になっていること
– キャッシュの設定とか

の追記だけしておきます。

## 早速コードの箇所だけ

Material Designを利用していますが、使わなくても大丈夫です。

“`Html

ファイル選択

A-FRAME: 物理演算でボーリングっぽい動きを実現してみる５（ボールの回転への抵抗）

A-Frameをつかって物理演算ができるようにしてみます。
回転に対する抵抗をみていきます。角減衰と言うようです。

回転に対する抵抗が増えたらどうなるのか、ちょっとイメージが湧かないです。
ボールは転がっているので転がりにくくなるのか、、、それだとこのボーリングの例では線形減衰との区別がつかないです。
とりあえずやってみます。

例１）angularDamping=0.01
デフォルト値です。
[demo](https://k38.github.io/aframe/physics-system/ball_angular_001.html)

例２）angularDamping=1
抵抗を最大にしてみます。
![ang2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/

映画館の近くに住みたくなった時に便利なサイトを作る

映画館の近くに住みたい。

東京ならとりあえず渋谷か新宿あたりに住めば良さそうだけど、大阪や京都だったらどこだろうかと気になったので、映画館がたくさんある駅がわかるサイトを作りました。映画館の近くに住みたくなった時の参考にしていただけたら幸いです。

Google Mapsの[プレイス](https://cloud.google.com/maps-platform/places/?hl=ja)を初めて使ったので、そこら辺もまとめています。Maps関連のAPIは、[気前のいい無料枠](https://cloud.google.com/maps-platform/pricing/sheet/?hl=ja)が設定されていますが、調子に乗って使いすぎると危ないので注意が必要です。

[

google-home-notifierを使ってGoogleHomeに喋らせる

※こちらの記事は株式会社ギフトパッド「システム開発部技術委員会」の11月発表内容です

GoogleHomeは基本的にこちらから「OK!Google」と話しかけることをトリガーに何かしらの処理を行ってくれますが、こちらからの指示がなければただの置物です。
今回は「google-home-notifier」というnpmパッケージを使って、Slackで投稿した内容をGoogleHomeが発言してくれるようにします。

#### google-home-notifier
https://github.com/noelportugal/google-home-notifier

#### インストール
“`
npm install google-home-notifier
“`

#### 実装
「google-home-notifier」READMEのサンプルを参考に、通知用のjsを作成
とりあえず喋る言葉を固定にする

“` js
const googlehome = require(‘google-home-notifier’);
const language = ‘ja’;

g

【初心者向け】　プログラミング「独学1ヶ月」と「スクール入学3日」との比較

初投稿なので不備あれば気軽にご連絡いただければ幸いです。
この記事はプログラミング初心者で、**独学中の人、プログラミングスクールに通うか迷っている人**の参考になるかと思って書いてみました

#自己紹介
プロフにもありますが、今まで保険代理店で成果報酬型の営業職をしておりました。
手取も多く、残業も月5時間程度で人間関係も良好な職場だったのですが、

**「興味のある分野で、プロダクトを売り込むんじゃなくて創ってみたい！」**

という気持ちの変化で現在はとあるプログラミングスクールで勉強しています。
（宣伝目的ではないので名前は出していません）

#独学1ヶ月での成果
(独学は個人差が大きいので1つのサンプルとしてご覧ください)
8月に独学を開始して1週間かけて作ったものが　↓　になります

現状のレベル貼っておきます(恥さらし)
HTML.CSSはProgateレベル
JavaScriptとjQueryはprogate挫折して中学生向け書籍で勉強

１コマアニメをJavaScriptで実装

#1コマアニメとは
– 世の中には「１コマアニメーション」（ひとこまあにめーしょん。以下、１コマアニメ）という表現メディア？のジャンルが存在するらしい。

（１コマアニメを アニメGIFに変換した例　↓　）

– 要は、アプリ（ソフト）上で１枚の絵を描いた過程が記録され、再生できるというもの。
– そのメリットや可能性について、参考記事（[注１](#注１)）で詳しく述べられている。
– また、その記事によると、１コマアニメを実現するための無料ソフト（PEAS motch! / 9VAe）も配布されている。

#ソフト（アプリ）方式の問題点
– 無料ソフトとはいえ、当然ながらインストールが必要で、これがかなりのハードルとなる。
– インストールは手間でもあるし、スマホ等では容量の余裕も少ないことがある。
– 怪しいソフトはセキュリティの心配もある。

【jquery】画面スクロールボタンの実装からイベント発火の基本を復習する

#目的
jqueryを用いて画面をスクロールさせるボタンを実装します。
基礎の復習も兼ねてかなり初歩的な部分も調べつつまとめています。

#まずは完成形から

###HTMLにてボタンを配置
“`erb

“`
###jsファイルに処理を記述
“`js
$(function(){
$(“.scroll_btn”).on(“click”, function(){
$(“.contents”).animate({scrollTop: $(“.contents”)[0].scrollHeight}, 500, “swing”);
})
})
“`
#jsファイルそれぞれの記述について

###$(function(){…})

“`js
$(function(){
//処理したい内容
})
“`
この部分は、
「HTMLの読み込みが全て完了したら、以下の処

都道府県を地方ごとに配列を組みかえてみた

#はじめに
業務上でブラウザ状にちょっとした動きをつけるようなことはよくあるのですが最近珍しくjsonを使った非同期通信をやらせてもらえる機会があったので業務の内容とは別でjsonから取得したオブジェクト配列を地方ごとにまとめてみる処理をしてみました。
画面状には地域別で分けた各オブジェクトのタイトルを出力する仕様です。

“`html:area.html

北海道

初心者です。

書籍にあるcss,javascriptのサンプルコードを書いてみたのですが反映されません・・・
どうすればよいのでしょうか？？

ブラウザレンダリングの仕組み

# 概要
webサービスを公開するにあったて必ず使われることになるのがブラウザです。ブラウザがユーザーにwebページを表示する仕組みを理解することで、フロントエンド開発に役立てたり、ページ表示までのレスポンスの改善などに役立てていきたいと思い、今回ブラウザのレンダリングの仕組みの基本事項についてまとめました。

## レンダリングの流れ

ブラウザがWebページをレンダリングする仕組みは上のような一連の流れになっています。以下でその一つ一つの工程の内容をみていきます。

### レンダリングエンジンとJavaScriptエンジン
各工程をみる前に、ブラウザの構成要素をみていきます。
ブラウザにはレンダリングエンジンとJavaScriptエンジンという２つのエンジンが動作しています。

**レンダリングエンジン**
HTMLやCSSなど

WEB初心のプログラマーがReact+Firebase+Algoliaでクイズアプリを作成するまで

#自己紹介
今回がQiita初投稿となります。
普段はメーカーでC++を使った画像処理系のアプリ開発に携わってます。
もともとWEBには一切触れた事がなかったのですが、
世の中でReactやVueといったフレームワークが話題になった時から
徐々にWEB業界に興味を惹かれてきました。
そして本格的に勉強してみようと思い立ち、今回のアプリ制作に至りました。

#サービス紹介
[Mushiqui](https://mushiqui-ab6ad.web.app/?lng=jp)という虫食いクイズアプリを作成しました。

きっかけは社内の暗記試験で、解答を含む全文から手っ取り早く虫食い文章を作成するツールが欲しいなと思った経験からでした。
特定のタグで文字を囲うことで、手軽に虫食いクイズが作成できるようになります。
ブラウザ/モバ

Javascript で diff (内部仕様についての補足６)

10/14 に投稿した[Javascript で diff (通信なし、ローカルで完結)](https://qiita.com/stonee/items/e2d88f07d08171b2816f)の内部仕様についての補足、その６です。
[Javascript で diff (内部仕様についての補足)](https://qiita.com/stonee/items/8964e801f27cd9433e01)
[Javascript で diff (内部仕様についての補足２)](https://qiita.com/stonee/items/62aebae3a4ee07c76601)
[Javascript で diff (内部仕様についての補足３)](https://qiita.com/stonee/items/df1019d2f4877c342217)
[Javascript で diff (内部仕様についての補足４)](https://qiita.com/stonee/items/dea3fdbdbceb0c799362)
[Javascript で diff (内部仕様

Js 文字列の操作、エンコードとデコード

#JavaScript
##文字列の長さを調べる
“`qiita.js
“abc”.length
“`
##文字列の置換
“`qiita.js
//該当文字列が複数の場合、最初の文字列が置換される
“abcdeabcde”.replace(“abc”, “ABC”)
//すべての該当文字列を置換したい場合
“abcdeabcde”.split(“abc”).join(“ABC”)
“`
##エンコードとデコード
“`qiita.js
//エンコード
encodeURI(“あいうえお”)
encodeURIComponent(“あいうえお”)
//デコード
decodeURI(“%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A”)
decodeURIComponent(“%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A”)
“`

M5stackをModdableを使ってjavascriptで動かしてみる

[Link-1]:https://qiita.com/zasshyu6/items/35a1048a9781bdcfebb7
[Link-2]:https://qiita.com/meganetaaan/items/1069830ca6389968eda7
[Link-3]:https://github.com/Moddable-OpenSource/moddable
[Link-4]:https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/Moddable%20SDK%20-%20Getting%20Started.md

#はじめに
昨今、とてもはやっているそうな`javascript`を学んでみたかったのです。
何かできないかなぁと調べていたら`M5stack`が`Moddable` + `JavaScript`で動くという記事があったため、試してみようということで始めました。

調べて出てきた記事が以下です。
著者の`JavaScript`視点からの説明は勉強になりました。ありがとうござ

Cypress Command Retry

# Retryについて

「Not every command is retried 」とあったので調べてみた

### 結果
以下の結果から
概ねretry(or wait)されると思っていてよいのではないでしょうか

# Command

| API | Retry(Wait) | Link |
|:———–|:——|:—–|
| and|-|[link](https://docs.cypress.io/api/commands/and.htm)|
| as|.as() is a utility command.|[link](https://docs.cypress.io/api/commands/as.html#Assertions)|
| blur|〇|[link](https://docs.cypress.io/api/commands/blur.html#Assertions)|
| check|〇|[link](https://docs.cypress.io/api/commands/check.html#Assertions)

Cypressテストコード(Request関連)

## API
“`integration/sample_spec.js
describe(‘request test’, function() {
it(”, function() {
cy.server()
cy.route(‘GET’,’**/getUsers’).as(‘getUsers’)
cy.wait(‘@getUsers’)

cy.get(‘#results’).should(‘contain’, ‘user1’)
})
})
“`

## Stub
“`integration/sample_spec.js
describe(‘request test’, function() {
it(”, function() {
cy.server()
cy.route(‘GET’, ‘**/getUsers’,
{data: [
{id: ‘1’,name: ‘user1’},
{id: ‘2’,name: ‘user2’}
]}).as(‘getUsers’)

javascriptでurlに改行やスペースを入れて何かを叩く

### はまったこと
“`javascript
var profile='[なまえ] hoge\n[あぴーるぽいんと] 文字列連結がとくい。(“a”+”b”)’;
var url=”https://hogehoge.com/user&profile=”+profile;
“`
このままだと叩けないけど、こんな感じの文字列をurlに乗せて叩きたい

### かいけつ
`encodeURIComponent`使う

“`javascript
var url=”https://hogehoge.com/user&profile=”+encodeURIComponent(profile);
“`

[ここ](https://meyerweb.com/eric/tools/dencoder/)とか使っても良さそう

jsで作ったblobをphpに送信

“`javascript
blob => {
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append(‘audio’, blob, ‘input.wav’);

xhr.open(‘POST’, ‘/upload.php’, true);
xhr.send(formData);
}
“`

これだけ

“`javascript
xhr.setRequestHeader(‘Content-Type’, ‘multipart/form-data; charset=utf-8; boundary=’ + Math.random().toString().substr(2));
“`

これをつけるとbinaryにならず送信できない

Cypressテストコードまとめ

# Cypressリンク

公式Doc
https://docs.cypress.io/guides/overview/why-cypress.html

chromeプラグイン
[Cypress Scenario Recorder](https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb)

# Cypress Commands
## Visit a page

“`integration/sample_spec.js
describe(‘My First Test’, function() {
it(‘Visits the Kitchen Sink’, function() {
cy.visit(‘https://example.cypress.io’)
})
})
“`

## エレメント取得
“`integration/sample_spec.js
cy.contains(‘type’)
cy.get(‘.act