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

package.jsonに”engines”を設定すると「このバージョンのNode.jsでしか動かない」を表明できる

特定のバージョンのNode.jsでしか動かしてほしくないパッケージがある場合、package.jsonの`engines`フィールドに、Node.jsのバージョンを明記しておくと、`yarn install`や`npm install`したときに警告を表示できるようになる。

* 実行環境のバージョンを固定したいときに便利。

## 例: Node.js 12だけに限定したい場合

例えば、Node.js 12で実行してほしい場合、次のように`engines`フィールドをpackage.jsonに追加する:

“`package.json
{
“name”: “my-module”,
“version”: “1.0.0”,
“main”: “index.js”,
“license”: “MIT”,
“engines”: {
“node”: “12.x”
}
}
“`

この設定で、Node.js 13環境下で`yarn install`すると、エラーを起こすことができる:

Javascript初心者がcanvasでランダムあみだくじを作った結果

初心者の入門向け＆私的忘備録です
記事作成＆markdown形式は初めてなのでお見苦しい所、分かり辛い箇所等ありますが、お許しください。

##基本的なあみだ制作

まず最初に、あみだの縦棒の本数(x)を５、縦の長さ(y)を15としてみます。

>tree = 5;
>treeHeight = 15;

ブラウザをリロードするたびにあみだのルートが変わるランダム要素を付け加えるために、Math.randomを採用します。

>Math.floor(Math.random() * 2);

これで、0の場合縦棒のみ。1の場合縦棒＋横棒が描画されるようになります。

準備が整いました。描画していきます
流れとしてはまずは横一列に５本分描画してから、改行して次の列も描画するという流れを１５回繰り返します。
コードにすると下記のような感じですね。x

React Natitve + Expoでtodoアプリを作る

最近React Nativeでアプリを作っていて、そのときに勉強したことのメモが散らばっていたのでまとめていこうと思う。

とりあえず今回の記事ではTodoを簡単に作っていく。
このTodoにReact Elements, React Natvigation, Redux sagaを追加したやつの記事も書いていく予定。


今回のソースは以下にあげてある
https://github.com/megaya/react_native_expo_todo_redux/tree/feature/todo-v1

今回はデザインは度外視している。次回にReact Elementsを導入して整えるので気にしない方向で

## Expo

スムーススクロール 2020年版

#やりたいこと
– アンカーリンク（#から始まるリンク）をクリックすると、スクロールして移動する
– #を含むURLの場合は、遷移した先で該当箇所までスクロール移動

#できたコード
“`function.js
$(window).on(‘load’,function(){
var locUrl = location.href;
var setHash = locUrl.split(‘#’);
//現在のページURLに#が含まれる場合はスクロール移動
if(setHash[1]){
hashMove(“#”+setHash[1]);
}
//#pagetop
$(‘#pagetop a’).on(‘click’,function() {
var href = $(this).attr(“href”);
var clkUrl = href.split(‘#’);
hashMove(“#”+clkUrl[1]);
return false;
})

【Gradle】外部ライブラリの導入で詰まった話

## 背景と事象
[こちら](https://medium.com/@JacobASeverson/s3-maven-repositories-and-gradle-911c25cebeeb)の記事を参考にAWSのS3にプライベートなMavenリポジトリを作成しようとしていました。

その際に、AWSのクレデンシャル情報を取得するために

“`gradle
ext {
awsCredentials = new ProfileCredentialsProvider().credentials
}
“`
とProfileCredentialsProviderクラスを用いようとしたところ、

“`console
Could not compile build file ‘C:\hoge\build.gradle’.
> startup failed:
build file ‘C:\hoge\build.gradle’: 12: unable to resolve class ProfileCredentialsProvider
@ line 12, column 23

Vue.js公式チュートリアルをゆっくり読んでいく1

# 前置き
Vue.jsの勉強を始めました。[公式チュートリアル](https://jp.vuejs.org/v2/guide/index.html)の**基本的な使い方(インストール～コンポーネントの基本まで)**を読んで動かすところまではやったので、学んだことをまとめようと思ったのですが、チュートリアルの内容の再掲になるだけなので、チュートリアルの内容をもう少しゆっくり読んでいきたいと思います。

Vue.jsのバージョン：v2.6.11

# Vue.jsとは？
> Vue.js とは？
> Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するための[プログレッシブフレームワーク](#プログレッシブフレームワークとは)です。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポ

Virtual DOMでなく生のDocumentFragmentを与えてDOMを差分更新したいって話

[この記事は自サイトとのクロスポストです。](https://piro.sakura.ne.jp/latest/blosxom/webtech/javascript/2020-03-09_dom-updater.htm)

# 概要

FirefoxのアドオンやChromeの拡張機能向けに、名前空間をまたいでDOMに変更を差分適用したい場面で使える、Virtual DOMでないReal DOMで差分適用するライブラリをつくりました。

https://github.com/piroor/webextensions-lib-dom-updater

# どう使うの？

クライアント側でタブの情報を取得して、サーバー側でそれをレンダリングする、という場面であれば以下のようになります。

“`javascript:クライアント側（制御担当）
// IDからタブのオブジェクトを得る（WebExtensionsのAPI）
const tab = await browser.tabs.get(tabId);
// プロセスをまたいで、レンダリングして欲しい内容を送る
browser.runtim

Tabulatorで文字コードを指定してCSVダウンロード機能を実装する

# 前提条件
http://tabulator.info/ 　⇒ V4.5
https://github.com/polygonplanet/encoding.js

# 参考
https://gist.github.com/somy-jp/593f603c386b49840b52
https://github.com/polygonplanet/encoding.js
https://qiita.com/weal/items/3b3ddfb8157047119554

# 内容
Tabulatorにはダウンロード機能が存在するが
公式には文字コードを指定する方法が見当たらなかったので
備忘録として。

# CSVダウンロード機能
http://tabulator.info/docs/4.5/download#csv
ダウンロード機能はとても簡単。
ボタン押下時のイベントに以下のコードを書けば終わり。

“`javascript
table.download(“csv”, “data.csv”);
“`

# 実際に問題を再現
試しに実装しました。
![image.png](htt

JavaScriptで入力フォームに値を入れる

#経緯
テストをしていて、ひとつの画面で複数の入力フォームに同じ値を入れる作業があって
手でいちいち入力するのがめんどくさかったのでJSを使って一発で値を入れたい。

##方法
今回は下記のHTMLのようにidが設定されているinputタグに値を入れる方法を記す。

“`html:input_form.htmml

“`

HTMLでは同じidはclassと異なり、複数のタグに設定することは基本的にはあり得ません。
つまり、idを指定すればピンポイントでタグを指定することができるということですね。

下記のコードを実行することで値をテキストとして設定することができました。
実際に画面でコンソールを開いて実行すると簡単に理解することができますが、説明しておくと

・document …ページ全体
・getElementById(‘id名’) …id名で指定できるタグの情報
・.value …key(id)に紐づくvalue(値)

“`javascript:put_form_value.js
docume

妹が欲しかったのでbotで作った

# はじめに
数年前から妹ほしいなあとぼんやり思っていたので作りました。
もうなんでもいいからお兄ちゃんと呼ばれたかった。

#仕様もどき
完全に自己満足のためのものとはいえ、作って満足してポイするようなものになるのはつらいので、ある程度実用的なものになるようにします。

**1.毎朝その日の天気と運勢、ラッキーアイテムを通知する。雨が降りそうなら傘を持って行った方がいいと教えてくれる。**
**2.ちょっとした雑談ができる。**
**3.定期的にbot側から話しかけてくれる。**

このくらいなら筆者の素人スキルでも途中でエタることもなく、かつそこそこの完成度で作れるのではないでしょうか。
#実装方法

1. bot発話。毎朝時間を決めて、GASからWeatherHacks（livedoor提供の天気予報API）に天気情報をリクエストし、得られた情報を運勢、ラッキーアイテム（GASでランダムに決める）と合わせてslackbotから流す。もし取得した天気予報の文字列に「雨」という単語が含まれていれば、「傘を持って行った方が良い」と付け足す。

1. ユーザ発話。ユーザの発話をトリガーに

Reactのテストはスナップショットじゃなくてスクリーンショットで


Reactのテスト書いてますか？
スナップショットテストが一般的ですが、GitHubのPullRequestではどうも差分が分かりづらい。もしスクリーンショットを自動的に撮って差分を画像ファイルとして比較できたらなぁと思っていたところ良さそうなパッケージを見つけました。[react-screenshot-test](https://github.com/fwouts/react-screenshot-test)というパッケージなのですが、以下のように差分を画像ファイルとして確認できる素晴らしいツールです。


早速試してみます。まずはインストールから

“`
$ yarn ad

tabメニュー

クリックするとメインパートが黒くなりメニューが覆いかぶさるパターン

デモはこちら

See the Pen
tabメニュー by Eri Izu (@eri-iz

リクルートフロントエンドスピードハッカソンに行ってきた

# まとめ

+ リクルートのフロントエンドスピードハッカソンに行ってきた
+ Lighthouse&Chrome dev tool 便利すぎワロタ
+ 学生フロントエンドエンジニアがつよつよだった。しかもHRTを体現する人格者たち
+ nginx側の設定(gzip,http2,静的ファイルのホスティング)が勝負を分けたみたい
+ LTも面白い
+ フロントエンドも奥が深い…

詳細は以下.

https://dev-by-110416.netlify.com/blog_post/show/recruit_frontend_speedhackathon

不規則にエラーを返すWebAPIを使って、マイクロサービス間のリトライを実装しよう。


マイクロサービスアーキテクチャでは、サービス間の通信に失敗することがあります。ネットワークを介したリモートコールである以上、なんらかの異常が発生することは考慮に入れた上で設計をする必要があります。

本記事では REST API を使用した場合の API のリトライ方法について、いくつかのライブラリを使用して解説します。

## リトライする条件

サービス間の通信に失敗しても、全てリトライするというわけにはいけません。何度リトライをしても必ず失敗するエラーに対しては無駄にリトライをしないようにしましょう。
RESTful な API では、4xx 系のエラーはリトライ不要です。4xx 系エラーは主にバリデーションエラーや認証エラーなど、クライアント側に問題があるリクエストであるため何度リトライしてもエラーが返却されます。

以下に代表的な H

JavaScriptの配列のキーにマイナス値を使ってハマった話

#JavaScriptの配列にマイナス値をキーに使ってハマった話

lengthでキーの数を拾ってループさせているつもりなのに、
何か挙動がおかしくて、検証してみました。
マイナス値のキー値を使うと、lengthでキーの数は拾えないことがわかりました。
#サンプルコード

“`javascript
a=[];

a[1]=”one”;
alert(“1:”+a);
// 1:,one
alert(“length:”+a.length);
// lenght:2
a[-1]=”minus one”
alert(“-1:”+a[-1]);
// -1:minus one

alert(“a:”+a);
//a:,one キー「-1」が表示されない！
alert(“length:”+a.length);
//length:2　キー「-1」がlengthでカウントていない！

alert(“keys:”+Object.keys(a));
// keys:1,-1　キーとしては存在

“`

#まとめ
そもそも要素数とキーの数は一致しないこともわかりました。

ハンバーガーメニュー1（メインパートが左にずれる パターン）

クリックするとメインパートが左にずれ込むパターン

デモはこちら

See the Pen
PoqOxGE by Eri Izu (@eri-izu)

Vue.jsでSpotify APIを叩いてなうぷれを取得してみよう

# 概要
この記事はVue.jsでSpotify APIを叩いてみようという記事です。
Spotifyで再生中の曲情報を取得し、ブラウザの画面に表示するのがゴールです。


# Vue.jsの環境構築
JavaScriptフレームワークのVue.jsを使います。

まずVue.jsの環境を準備します。
手元で環境構築するのが面倒だと思う人は、ちょっと触ってみる程度なら[CodeSandbox](https://codesandbox.io/)等オンラインエディタを利用してもいいかもしれません。

## 前提環境
Node.jsがインストールされている前提です。まだインストールしていない場合は、インストールしてください。

– Node.js 12.16.1
– npm 6.9.0

## インストールと起動

Vue CLIをインストー

[API][YouTube][最終章]YouTubeAPIを使用したチャンネル情報検索機能

##完成品##
完成品が見えた方が創作意欲も上がると思うので先にネタバレします。Viewはほぼ整えていないのでご了承ください。

[](https://gyazo.com/a3aedc6fd1600d0a5dcc3a6a658f2a47)
検索ボックスにチャンネル名を入力すると、[チャンネル名][チャンネルID][登録者数][視聴回数][動画本数][チャンネル概要]などが取得可能です。
ヒカキンごめん… 🙁

##一気にいきます(一気に行くな)##
APIからチャンネルを取得する関数を記述していきます。

“`ruby:youtube.js
function getChannel(channel){
console.log(channel);
}

var defaultChannel = ‘techguyweb’;
getChannel(defaultChannel);
“`
第2章で変数を定義した際の’techguyw

[API][YouTube][第弍章]Googleアカウント認証

##HTLMの用意##
“`html:haml
%section
.container
.container-nest
%p.google-log Log in With Google
%button.btn.red#authorize-button
Log in
%button.btn.red#signout-button
Log Out
　　　 %br/
#content
.row
.col.s6
%form#channel-form
.input-field.col.s6
%input#channel-input{:placeholder => “Enter Channel Name”, :type => “text”}
%input.btn.grey.lighten-2#submits__btn{:type => “submit”,

[API][YouTube][序章]YouTubeAPIをアプリで使用する為の準備

##前置き##
YouTubeAPIを使用してクリエイターの情報の取得方法を解説していきます!!
と言いたいところですが、一記事に全て書くとなるとかなり冗長になるので、今回は第一弾としてYouTubeAPIを使用する為の前段階を解説していきます。
意外とすぐ最終章になりますので、自作アプリでYouTuberのチャンネル登録者数や視聴回数、最新の動画などを使いたい!!
という方は是非見ていってください。
最後に続編のリンクを貼っておきますので、お手柔らかによろしくお願い致します。

##APIキーの作成##

ではまず、[Google Cloud Platform](https://console.cloud.google.com/)にアクセスし新