JavaScript Arrow Function

This tutorial help to understand arrow function of EcmaScript 6.The arrow function is an anonymous function, that does not have function and return keyword.

The declaration of a classic function expressions in js, that required to define method name followed by function keyword, the function optional to return the value.

JavaScript Arrow Function

JSやTSにおける日付処理

日付処理いつも忘れちゃうからまとめる

“`typescript
const today = new Date(); // 変数が呼ばれた時の日時がDate型で取得できる
const year = today.getFullYear(); // 2019とかを取得できる
const month = today.getMonth(); // 月は0~11の値で管理されているというトラップ
const date = today.getDate(); // 日付は普通に1~の数字で管理されている
const day = today.getDay(); // 曜日は0~6の数字で管理されている 0が日曜で6が土曜
const tomorrow = new Date(today.setDate(today.getDate() + 1));
const nextMonth = new Date(today.setMonth(today.getMonth() + 1));
const nextYear = new Date(today.setFullYear(today.getFullYear()

【jQuery】右クリックしたら他のサイトへ飛ばす

右クリック禁止！というサイトがありますが、もういっそ右クリック禁止の約束を破ったら帰ってもらったらいいんじゃないかと思って、右クリックしてしまったら別のサイトに飛んでもらうjQueryを作ってみました。
デモページ

デモページは以下から。右クリックすると別ページの飛ぶので注意。

##右クリックしたら他のサイトへ飛ばすのデモページ
デモページ

##JavaScript

デフォルトだと、みんな大好きyahoo.jpに飛びます。optionのurlを指定し、飛ばしたいサイトのurlを入れておけばそちらのサイトに飛ぶようになります。

“`javascript
(function($){
$.fn.rightClickEscape = function(options){
var defaults = {
url : ‘http://www.yahoo.jp/’
};
var settin

Firebase の初期化に必要な config 情報に appId がいつの間にか追加されていた

## 経緯

`firebase.initializeapp()` に必要な config の確認を行おうとしたところ、
確認の仕方が以前と少し変わっていました。

結果としては「[ウェブアプリ用の設定スニペットを入手する](https://support.google.com/firebase/answer/7015592?hl=ja)」のドキュメントに沿う形で、
「アプリを追加」という項目から「ウェブアプリにfirebaseを追加」という手順を進めると config 情報が確認できたのですが、もう既に firebase で ウェブアプリを公開していたので「アプリを追加」しなければならない意味がよくわかりませんでした。

また表示された config 情報には `appId` という項目が増えていました。
現在 `appId` 無しの config で `firebase.initializeapp()` して問題なく動いているので、
そこもまた謎なので調べてみました。

“`js:FirebaseConfig
const config = {
apiKey: “xxxxx

Vue.js + Quasarで爆速プロトタイピング（２）〜Toolbar編〜

# 1.概要
Vue.js + Quasar Frameworkでプロトタイプ作成を行うことがあったので、メモがてら記録しておきます。

前回の記事 -> [Vue.js + Quasarで爆速プロトタイピング（１）〜Hello World編〜](https://qiita.com/tsumasakky/items/ff8ec248ba45311fc4fc)

今回はヘッダーナビゲーションを作成します。

# 2.コーディング
## 2-1.フォルダ構成

/vue-sample
　├ css/
　│　└ style.css
　├ pages/
　│　└ main.html
　└ app.js

# 2-2.main.html

“`html:main.html




JavaScript(ES6)で二次元配列から連想配列への変換を行う

ちょっと調べるのに時間がかかったのでメモ。

“`javascript
var array = [[“foo”, 1], [“bar”, 2]];
var obj = new Object;

for (i = 0; array[i]; i++) {
var k = array[i][0];
var v = array[i][1];
obj[k] = v;
}
“`

こんな感じの古い処理を新しく書き直すことがあった。

stackoverflowにも同じような質問があって、以下の回答が一番参考になった。
(他の回答も勉強になった)

https://stackoverflow.com/questions/4215737/convert-array-to-object#comment70292559_4215753

“`javascript
const array = [[“foo”, 1], [“bar”, 2]];
const obj = array.reduce((obj, e) => {
Object.assign(obj, {[e[0]]: e[1]

【React】sftpでuploadしてもwebpack-dev-serverで監視させる方法

# webpackはsftp監視しない問題
sftpでuploadしたものはwebpackは監視しないらしい。
reactでdevelop server立てている場合は自動更新をしなくなってしまう。

## いつ使うか
vagrant等でディレクトリをマウントしている場合も同様に更新しなくなってしまう。
しかしwatchOptionsを変更することで定期更新をすることになる。

## 更新箇所
Reactの場合は次のファイルを更新すればOK。
`node_modules > react-scripts > config > webpackDevServer.config.js`

“`javascript
watchOptions: {
ignored: ignoredFiles(paths.appSrc),
poll: 500, //←ここを追加
},
“`

Google Apps の API を使用せずに数値表記の列番号をアルファベットによる列番号へ変換する方法

Google スプレッドシートにおける「数値列番号→アルファベット列番号」変換についてのメモ書き。

数値表記の列番号をアルファベットによる列番号に変換する方法として、 Excel と同じくセルの座標から行番号を取り除く方法がある ( list1.gas ) 。
しかしこの方法は API を使用するため、大量に変換を行う場合にボトルネックになってしまう。

“`js:list1.gas
function convertAlphabetColumnToNumeric(num) {
var sheet = SpreadsheetApp.getActiveSheet();
var result = sheet.getRange(1, num).getA1Notation().replace(/\d/,”);

return result;
}
“`

したがって、 API を使用せずにこれらの変換処理を行えることが望ましい。

『[数値と、Excel の列番号風のアルファベット表記の相互変換 in JavaScript – penultの日記](https://penu

ヒット領域のDisplayObject.suppressCrossDomainErrors対応

## 画像のクロスドメインエラー
Animaiteで作成した成果物をCodePenで共有するときに、別ドメインからの画像の読み込みは問題なく表示できていたのですが、画像をよみこんだオブジェクトで衝突判定する場合にエラーが出ました。
**”An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.”**

##エラーの原因

エラーを起こしていたのは、オブジェクトにon()でクリックイベントを付与していた箇所。クリックしてもイベントが発生しません。原因を調べていたところ、createjs.Bitmap()で画像を読み込んで生成したボタンにHitイベントを発火させる時、CreateJSの仕様でドメインが違う場合、エラーが出るように設定してありました。

“`

/**
* Suppresses errors generated when using features like h

rails javascript/jqueryの実装　実践編

実際に実装方法を書いて行きます。

# コントローラー(respond_to)
Railsのコントローラーで利用できる respond_to というメソッドは
「リクエストがHTMLそれともJSONのレスポンス求めているのか」を条件に条件分岐してくれます。

　HTMLを返す場合は、該当するビューを呼びその中でデータを生成していましたが
　JSONを返す場合はRubyのハッシュをrenderメソッドの引数として渡すだけでJSONに変換されます。

“`ruby:controller
respond_to do |format|
format.html { render … } # この中はHTMLリクエストの場合に呼ばれる
format.json { render … } # この中はJSONリクエストの場合に呼ばれる
end

# 例
respond_to do |format|
@comment = Comment.create(comment_params)
format.html { redirect_to :root }
format.

rails javascript/jqueryの実装　単語編

railsの使い方の次の段階で
javascriptとjqueryの実装を書いて行きます。

# Ajax(非同期通信)
Ajax（エイジャックス）と呼ばれます。
非同期通信は英語で”Asynchronous JavaScript + XML”と表現され、略された呼び方です。

リクエスト後にレスポンスが帰ってきた際、ブラウザが再読み込みされること無く通信が行われる通信方法です。

## 非同期通信の実装ポイント

### ①　非同期通信ではJavaScriptを利用してリクエストを行う
　　　　リクエストに対してのレスポンスはJSON形式で返してほしい旨をリクエストに含めます。
### ②　コントローラでJSON形式のデータを用意するよう準備
　　　　リクエストにJSON形式で返してほしい旨の情報が含まれているため
　　　　コントローラのアクションに明記する必要があります。
### ③　レスポンスするためのJSON形式のデータを準備

　　　　viewsディレクトリの中にファイルを作っておく必要があります。

　　　　同期通信では
　　　　○○.html.erbという形式でHTMLの

JavaScriptとCSSアニメーションでタイピング風表示を行う

# こんなやつ
[](https://gyazo.com/a01843cc10d7f1cb9e7910e7b10b604d)
# ~~結論~~
~~[iTyped.js](https://github.com/luisvinicius167/ityped)を使う。~~

# 一文字ずつ表示させる処理
“`html:HTML

“`
“`JavaScript:JavaScript
const typing = (element, sentence) => {
[…sentence].forEach((character, index) => {
setTimeout(() => {
document.querySelector(element).textContent += character;
}, 100 * ++index);
});
}

typ

GIS×BigQuery　〜2地点間の距離を算出〜

#BigQueryである2地点間の距離を求める方法

###①BigQueryの地理関数[ST_GEOGPOINT](https://cloud.google.com/bigquery/docs/reference/standard-sql/geography_functions?hl=ja#st_geogpoint)と[ST_DISTANCE](https://cloud.google.com/bigquery/docs/reference/standard-sql/geography_functions?hl=ja#st_distance)で求める
※完全な球体として表面上の距離を計算している

###②JavaScriptのユーザー定義関数（UDF）で求める
https://cloud.google.com/bigquery/docs/reference/standard-sql/user-defined-functions?hl=ja#javascript-udf-structure

早速、任意の位置情報を2列用意して実践してみた

“`sql
CREATE TEMP F

javascript 再入門 1

# 初めに
この記事は、javascriptを始めようと思った人が躓きやすいポイントを整理してお話したいと思います。

# 関数
関数定義は基本的に下に出てくる例のとおりです。

javascriptでは、関数は値という扱いになっています。
なので、変数や定数への割り当てを行えます。

“`javascript
const cubic = function (a) {return a**3};
“`
そして、関数を別の関数の引数に渡すことも出来ます。

“`javascript
const myFunc = function (f) {return f(5)};
myFunc(cubic);
“`
さらには、関数の返り値に関数を返すようにも出来ます。

“`javascript
const answerFunc = function (a) {
return function (f) {
return f(a);
}
}
“`

## 今どきの関数の書き方
### オブジェクトのメソッドとして実装する場合

“`javascript
const myPro

Slack の WYSIWYG を無効にしたい

Slack のテキスト入力欄に WYSIWYG エディタが実装され、Markdown のまま編集したい派は悲鳴を上げている人が多数。
苦情もたくさん来ているみたいなので、そのうち無効にできるようなオプションが付きそうですが。

## Aa ボタンがあるじゃん。ちがう、そうじゃない

※ 入力欄よこにある `Aa` というボタンを押すと、スタイルを適用するボタンなどは非表示になるけど、プレーンテキストが表示されるようになるわけではなくて、スタイルが適用されたままのテキストが表示されてしまう。これを無効にしたいという話。

## やり方

環境変数でデバッグオプションを有効にした上で、`open` コマンドで Slack.app を開く。

【Vue.js】コンポーネントの書き方

# コンポーネント
## 基本

componentの引数は、
第一引数にテンプレート名、
第二引数にtemplate(HTML)
を指定する

“`javascript:
// その場でHTMLを生成する場合
Vue.component(“template名”, {template: “挿入されるHTML構造”})
components: “template名”, {template: “挿入されるHTML構造”}

// vueファイル(template)を読み込んで使う場合
// 読み込んだファイルがtemplateに相当するので、templateオプションは必要ない
Vue.component(“別に指定したいtemplate名”, “読み込んだもの”)
compoonents: “別に指定したいtemplate名”, “読み込んだもの”
“`

## グローバルコンポーネントとして設定する

### その場でHTMLを生成する場合

“`javascript:
Vue.component(“Home”, {template: “

home

“})
“`

_.isEmptyの返却値まとめ

### _.isEmptyの返却値まとめ

### 検証
– lodashの `isEmpty` 関数に何を入れると何が返却されるかをまとめました。
– 足りてないと思った方は追記してください。

### 検証version
– lodash.js/4.17.15 [https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js]

### 検証結果

“`js
_.isEmpty(n)
“`

| 引数(n) | 戻り値 |
|—|—|
| なし | true |
| undefined | true |
| null | true |
| ” | true |
| “” | true |
| “ | true |
| 0 | true |
| 1 | true |
| false | true |
| true | true |
| [] | true |
| [1] | false |
| [,] | false |
| {} | true |
| {a:{}} | false |

Immutable.Recordを使うクラスの継承

Immutable.Recordを使う複数のデータモデルクラスに全く同じデータ構造や処理ロジックを持つ場合、DRY原則により、クラスを継承する必要がある。

### モデルクラスの定義

“`javascript
export default class Hoge extends Immutable.Record({
item1: null,
item2: 99,
}) {
fuga() {
}
fuga2() {
// console.log(this.item2);
}
}
“`

### モデルクラスの継承

– デフォルト値には、親子のデフォルト定義を両方とも入れる
– 子クラスに親クラスと違う処理ロジックのみを記載する

“`javascript
export default class Hoge2 extends Hoge {
fuga2() {
// console.log(‘hello, immutable.js’);
}
}
“`

**ここがポイント：**`Hoge2クラスを定義する時に、デフォルトObject

複雑な戻るボタンをJavaScriptで実装した

#概要
ブラウザの「もどる」と同じ機能の戻るボタンを作るのは簡単だが、条件によって状態を分岐させるのが割と面倒だった。条件としては、サイト内の回遊は問題なく行えるけど、他のサイトから遷移してきたときは戻さないようにした。

|条件|処理|
|:—————–|:——————|
|同じサイトからの遷移|戻るボタン表示|
|SNSなど異なるサイトからの遷移|戻るボタン非表示|
|どこから来たか不明な場合|戻るボタン非表示|
|同じサイトから「別タブ」で見る|戻るボタン表示＆遷移先を指定|

#リファラを調べる
リファラとはどこから来たのかという情報。JavaScriptでは以下のように取得する。

“`javascript:referrer.js
const ref = document.referrer;
“`
– 綴りはrが2つ続く「referrer」が正しい。HTTP選定時にスペルミスがあり、一部は「referer」になってるらしい。（[wikipedia](https://ja.wikipedia.org/wiki/HTTP%E3%8

閏年判定付き 生年月日フォーム をつくってみた

# 1. はじめに

個人的に、何らかサイトの会員登録画面で生年月日を入力するとき、
存在しない月日（例えば 9月31日、2月30日、4月31日 など) が選択できてしまうことが 割とよくあります。

システム的にも、ユーザー的にも、存在しない月日は入力できない方が良いはずです。

さらに、閏年は2月29日までありますし、
今回は、その点も含めて 存在しない年月日を入力できないように セレクトボックスの選択肢を制御する方法を調べてみました。

# 2. 準備

作成にあたって、以下のツールを準備します。

– テキストエディター
– ブラウザ （ここではChromeを使用）

また、ライブラリーに jQueryを使用します。
jQueryのサイトからファイルの読み込み方を確認します。

– jQuery　
https://code.jquery.com/

# 3. 作成

作成した生年月日フォームのhtml・jsファイルの全体像とブラウザ画面を示します。

## 3-1. コーディング

以下に作成した html(main.html) と javascript(form.js)