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

郵便番号検索で住所自動入力ZipcloudAPIを利用

# 郵便番号検索で住所自動入力ZipcloudAPIを利用

## 目的
管理画面で郵便番号を入力すると該当する住所が自動でセットされる処理を実装する

画面イメージ：

## Laravelコード

“`
{{ Form::text(zip_code, array(‘id’ => zip_code, ‘onchange’ => ‘javascript:getAddName(this.value)’)) }}
{{ Form::select(addr_state_id, $option->getOption(‘state’), array(‘id’ => addr_state_id))}}
{{ Form::text(addr_cit

Nuxt.js + JavaScriptでエクスポネンシャルバックオフを実装する

## エクスポネンシャルバックオフとは？

アルゴリズムの一つです。
直訳すると「指数関数的後退」で、いわゆるリトライ処理の間隔を指数関数的に増加させる方式のことです。

リトライ間隔例：1秒、2秒、4秒、8秒・・・

[AWS でのエラー再試行とエクスポネンシャルバックオフ](https://docs.aws.amazon.com/ja_jp/general/latest/gr/api-retries.html)

## ユースケース

主にネットワークエラーに対しての再試行の方式として使用します。
一時的な負荷のエラーに関してはリトライで成功する可能性が高いですが、一般的な「ｎ秒後にリトライ」を実施する方式だとｎ秒ごとに同じ量の負荷がかかり続けることが懸念されます。
エクスポネンシャルバックオフ方式を使用して指数関数的にリトライ間隔を増加させることで、効率的に負荷分散を行えます。

## やること

– リトライボタンを押すたびに指数関数的にリトライ処理までの間隔を増加させる

## 本題

Nuxt.js + Vuetifyを使用して作っていきます。

###

【javascrpt】初心者でもよく理解できたやつ

##【メリット】
■　UXの向上
■　javascript理解度向上

##【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

##【実装】

###環境構築

■アプリケーションを作成

“`
$ rails new hoge

$ cd hoge

$ rails s -b 0.0.0.0
“`

■下記URLよりJquery.min.jsをダウンロード
　https://jquery.com/download/

■ダウンロード完了後、アプリケーション内assetsへ配置

##【よく使った記述】
※以下はjsファイルへ記述。htmlファイルへ直書きする場合はタグが必要。

###.css
※対象のCSSを変更。下記の場合は背景色が赤に

“`
$(“.hoge”).css({“background-color”:”red”});
“`

###.slideUp
※idでの指定は””内が「 . 」 ではなく 「 # 」 になります

ローカルにプレーンなメモアプリを構築

プログラミングをしている人には、普段あちこちググったことを
メモっておきたい、という日常があると思います。twitterを
メモ代わりにつぶやいたり、wikiにまとめたり。

しかし、ツイッターにとってつぶやきは過ぎゆく過去であり、
そのためのインタフェースで設計されています。
一方、wikiにまとめたらそれはもう技術資料であり、メモではない、
等々こういったジレンマにかられたりすると思います。

というわけで僕は以下のようなメモアプリをローカルに構築しました。


テキストエリアに入力し、「保存」ボタンを押すとDBに保存される
シンプルなメモです。自分はWebアプリエンジニアではないので、
画面例では素人ならではの紆余曲折が残っています。

#使っているアーキテクチャ
・HTML
・JavaScript
・mongodb
・nodej

【Rails】「Uglifier::Error: Unexpected character ‘`’」の解決方法

#開発環境

・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 事象

Capistranoでデプロイした際に下記エラーが発生

“`terminal:ターミナル
deploy:assets:precompile
　01 $HOME/.rbenv/bin/rbenv exec bundle exec rake assets:precompile
　01 rake aborted!
　01 Uglifier::Error: Unexpected character ‘`’
“`

# 原因

JavaScriptファイル内で記述していたテンプレートリテラルのバッククォート(`)が原因でした。

# 解決方法

`production.rb`の27行目をコメントアウトする。

“`ruby:production.rb
# config.assets.js_compressor = :uglifier
“`

【Rails】JavaScriptを特定のビューで読み込む方法

# 開発環境

・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)

# 実装

### 1.`application.js`を編集

`=`を削除する。
こうする事で、`assets/javascripts`内のjavascriptファイルが自動で読み込まれなくなる。

“`javascript:application.js
//変更前
//= require_tree

//変更前
// require_tree
“`
### 2.`environments`を編集

開発環境で反映させたい場合は`development.rb`、
本番環境で反映させたい場合は`production.rb`を編集する。

“`ruby:development.rb
Rails.application.configure d

【Rails】Geolocation APIを用いて位置情報を取得する方法

# 開発環境

・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)
・[Google Map表示](https://qiita.com/matsubishi5/items/196fa1941da2152b6d5d)

# `Geolocation API`を有効化

下記記事の「Geocoding APIを有効化」と同様の手順で、`Geolocation API`を有効化して下さい。

[Geolocation APIを用いて緯度経度を算出する方法](https://qiita.com/matsubishi5/items/1b784dbbe5f1c336ac70)

# 実装

“`slim:~.html.slim
#map style=’height: 500px; width: 500px;’

– goog

JavaScriptでスノーノイズ(砂嵐)

デジタル放送になってこれを目にする機会も少なくなりましたが、Canvas APIとWeb Audio APIを使って何か作りたかったのでとりあえず簡単そうなところからこれを題材に選びました。

[こちらから実行できます](https://akebi.jp/temp/snownoise.html)
ブラウザがWeb Audio APIに対応していれば、画面クリックでホワイトノイズも鳴ります。
音量にはご注意下さい。

~~~html:snownoise.html