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

JavaScriptの引数の数チェックについて

#JavaScriptの引数の性質（備忘録）

JavaScriptでは呼び出し側の引数の数が呼び出し元と一致しなくてもエラーとならず、下記の結果となる。

“`javascript
console.log(message);
}

displayMessage(); //undefind
displayMessage(‘hoge’); //hoge
displayMessage(‘hoge’, ‘foo’);//hoge

“`

####参考文献
改定新版JavaScript本格入門　~モダンスタイルによる基礎から現場での応用まで　

ローグライクゲームを作ってみるその5 ダンジョンのサイズ

### 過去記事一覧

* [その1 タイトル画面](https://qiita.com/pizyumi/items/3526fddd4f18a462e1ae)
* [その2 ダンジョン・プレイヤーの生成と描画](https://qiita.com/pizyumi/items/2562a159f497a608615b)
* [その3 プレイヤーの移動](https://qiita.com/pizyumi/items/07447c9a1a52b0d9a228)
* [その4 ダンジョンのランダム生成](https://qiita.com/pizyumi/items/0e847f5798ba2ac7a61b)

現在のコードについては前回の記事の最後の項を参照してください。

### ダンジョンのサイズ

今までダンジョンのフロアのサイズは25マスx25マスで固定でした。

今回はより広いサイズのフロアを生成したり、描画したりできるようにしたいと思います。

ゲーム画面のサイズは変更しませんので、より広いサイズのフロアを生成すると必然的にゲーム画面には一度にフロアの一部しか表示できないとい

Object.assign()で深い部分もコピーしたい！

# やりたいこと

“`javascript
Const State = {
name: ‘Hanako’,
stay: {
Japan: {
Hiroshima: ‘実家’,
Karuizawa: ‘別荘’,
},
America: {
NewYork: ‘別荘’,
Arizona: ‘おじいちゃんち’
}
}
};
“`

これのKaruizawaを’実家２’にしたコピーが欲しい！
StateのstayのJapanのKaruizawaが書き換わるのはいやだ

**Object.assign()は浅いコピーのため、一回のコピーでご丁寧に入れ子の中までコピーはしてくれません。**

今の状態で、State2を定義して、Stateをコピーした後、Karuizawaの中身をみると、

“`javascript
Const State2 =

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

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

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

今回はサイドメニューを作成します。

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

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

# 2-2.main.html

“`html:main.html





Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~

##概要
Nuxt.jsは今最も**イケてるゥ!最高にCoooooool**なWEB開発フレームワークです。巷でNuxt.jsについての記事も増えていますね。
しかし、ネット上のNuxt.jsの記事では、Nuxt.jsを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxt.jsを触る人はVue.jsの経験があるという前提）なので当然と言えば当然なのですが。

本記事では、**これからWEB開発者を目指す人**を対象に、
**・Nuxt.jsを習得するには何が必要か？**
**・そのための勉強方法**
を紹介します。

##自己紹介
Nuxt.jsとFirebaseを用いたWEBアプリ開発を担当することになりました。
Pythonはある程度触ってきたものの（機械学習やスクレイピング等）、WEB開発は全くの未経験。Progateや入門書を触って、簡単なWEBサイトを公開した経験がある程度でした。

##失敗談「とりあえずコピペでNuxtアプリを作ってみたけど・・・・・・・?」
さて、Nuxt.jsは[公式ドキュメント](ht

列の中に高さの違う要素があった時の対処法

#はじめに
最近受けた案件で列ごとに高さや横幅が違う画像が動的に生成をされて、テキストの位置がずれて表示されてしまうというようなことがあった。下記のような感じです。

個人的には画像の大きさが違うなんてやめてくれ。。なんて思いましたが。
ですが便利なプラグインでjquery.heightLine.jsというものがあり対象の要素の高さを揃えてくれるらしい。
とりあえずやってみよう。

“`javascript:script.js
var list = $(“.block .box li .color”);
list.heightLine();
“`
![スクリーンショット 2019-11-26 1.09.58.png](https://qiita-image-store.s3.ap

テンプレート文字列について

テンプレート文字列、コードレビューで教えていただいたので、はじめて知ったのでメモ :pencil: （JavaScript初歩的なことをわかってなすぎる… 勉強になりました :pray: ）

### 変更前

– あまりテンプレート文字列のことを意識せず以下のようなコードを書いていた

“`html

詳細

“`

### 変更後

– テンプレート文字列使うならこんな感じで書いた方が良さそうとアドバイスしてもらった

“`html

詳細

“`

### 参考

[テンプレート文字列 \- JavaScript \| MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings)

プロパティ名がキーと一致しているときは省略して書ける

表題の件、コードレビューで教えていただいた :pray:

キー名と変数名が同じなら省略できる :pencil: （簡単なことかもだけどすぐ忘れそうなのでメモ）

### 修正前

“`
const data = await this.SampleRequest({ id: id })
“`

### 修正後

“`
const data = await this.SampleRequest({ id })
“`

### 参考

[あなたが知らないJavaScriptの便利すぎるショートハンド19選 \- WPJ](https://www.webprofessional.jp/shorthand-javascript-techniques/)

PHP の Error/Exception の分類方法やまとめ方を考えてみたときのメモ。

## LogicException と RuntimeException の各子クラスの関連

Logic | Runtime | 意味
:– | :– | :–
Domain | Range | 変数が、事前に定義された範囲から逸脱してる。
Out Of Range | Out Of Bounds | 無効なインデックス、キー。
Invalid Argument | Unexpected Value | 関数側か、関数の呼び出し側か。
Length | Overflow / Underflow | すでに長さが変だった / 操作したら長さが変になる。

## Domain と Range

単純に、Logic Exception か Runtime Exception か。

Domain は「事前に定義された、過不足なくすべて列挙されたドメインデータの一覧」に含まれない、という例外。

Range は「全て列挙するのは難しいのだけれど、事前に定義された、境界が明確なデータの範囲」から逸脱する、という例外。

正直、この2つについてはもっと根本的な解釈を間違えている可能性がある

勉強のアウトプット　～ブラウザのローカルストレージ基礎編～

# はじめに
はじめまして。
某金融系会社でシステムテスト、ホームページのリグレッションテストを主に実施しています。
Qiitaはずっと読んでいるばかりだったのですが、やはりどの記事でも
**勉強したらアウトプットが大切！**
と仰っていたので、初心者もいいところですが、アウトプットの場として使わせていただければと思います。
投稿するのは恐らく`JavaScript`と`UiPath`についてが多くなると思います。
よろしくおねがいします。
それでは。
~~Twitterは自分からは載せません……ゲームの話ばかりで恥ずかしい~~

#そもそもなんでローカルストレージを学んだのか？
知るきっかけは、システムテストをしている際に、
>ローカルストレージを利用して、ユーザ設定値を保存している

という機能でした。
なんとなく聞いたことあるけれども、そういえばきちんと理解したことはないな、と思い調べてみました。
また、`Cookie`や`Session`についても、きちんと理解したことはなかったので
これを期にちゃんと勉強しよう、と思った次第です。

#ローカルストレージとは
>ローカルストレ

画面遷移をしないでURLを変更する方法！

# 実現したかったこと

画面遷移をしないでリアクティブにUIを変更したかった！

## histroy.pushState() で出来た！

“`
history.pushState(null, null, ‘?search=東京都’);
“`

プライベートリポジトリをパスワードで限定公開するアプリを作った

GitHubのプライベートリポジトリを不特定多数に公開したい時ってありません？　私はあります、書類選考など。
不特定多数だから一人一人招待は無理だし、パスワード認証程度でいいんだけどなあと思いながら、
GitHubの設定でどうにかできないかと調べてみたんですが、ダメですね、なかったです。かなしいです。

クソみたいなリポジトリなんてどうせ誰も見ないんだからパブリックにしちゃえば？と思われるかもしれません。
パブリックはなんか嫌だし、私が作ったものはクソじゃないし、百歩譲ってクソだったとしても自分のクソを全世界に公開する趣味はないです。

なので作りました。他になさそうだったので。

http://35.233.244.144/
(クリックしても飛べない場合URLをコピーしてみてください)

[GitHubのリポジトリはこちら](https://github.com/simoyama1333/git_limited_access)

![ss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2

DOMの超基礎知識

#DOM
– Document Object Model
– 階層構造を持った文書のモデル
– WEBページを動的に書き換えるために必要
– DOMが作成されるタイミングはWEBページが読み込まれた後
– JavaScriptのプログラムではDOMにアクセスし、情報を読み取り、書き換えることで、HTMLにDOMの内容が反映される

#DOM作成後にJsプログラムを実行するには
次のような記述でDOM作成後に処理を実行できる

“`dom.js
$(function() {
//処理
});
“`
—
Qiitaで良い記事書ける人ってすごい。精進します。

Node.js でつくる WASMコンパイラー – Extra1：WASIを使ってWASMを動かす

# はじめに

Node.jsで小さなプログラミング言語を作ってみるシリーズを、「ミニコンパイラー」「ミニインタープリター」とやってきました。そして三部作(?)の最後として、 ミニNode.jsからWASMを生成する小さなコンパイラーに取り組んでいます。

– [Node.jsでつくるNode.js-WASMコンパイラ – もくじ](https://qiita.com/massie_g/items/c663095759a80c53c126)

# 今回の目的

前回で目標としていたNode.js-WASMコンパイラーの最低限の実装が終わりました。今回は生成したWASMをいろいろな環境で動かすべく WASI(WebAssembly System Interface)に対応させたいと思います。

## WASI とは

WASIはWebAssemblyをウェブ以外の場所（ブラウザやNode.js以外の環境）で動かせる様にする取り組みです。

– WebAssembly/WASI … https://github.com/WebAssembly/WASI
– [WASI の標準化: W

bind()の第2引数以降で渡す引数と、Functionの呼び出し時に渡す引数はどちらが優先されるのか

JavaScriptのFunctionにはbind()というFunctionをcallした際のthisを指定できるメソッドがありますが、第2引数以降はbindした関数に渡す引数を指定できます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

関数にbindするときに引数を渡した状態で、その関数を引数ありで呼び出したときにどんな挙動になるのか見てみたところ、bind時に渡した引数が先に渡され、呼び出し時に渡す引数があとに追加されるようでした。

“`js
function func(arg1, arg2) {
console.log(`arg1: ${arg1}`, `arg2: ${arg2}`);
}

func.bind(null, ‘bind’)(‘call’);
// => arg1: bind arg2: call
“`

DOMのonClickなどにFunctionを渡したときに引数として追加したいときにbindを使うとevent

JSのモジュールとbabelとwebpackとは何かまとめてみる（初心者向け）

初心者向けにモダンJavaScriptの開発で必要になる
CommonJSとECMAScriptでのモジュールの違い、babelとwebpackの知識に関してまとめておきます。

# CommonJSとECMAScript
JavaScriptの歴史的経緯にもなるのですが、
実はJavaScriptには
サーバサイドのNodeJS(CommonJS)とブラウザのJavaScript(ECMAScript)
の大まかに２つの言語仕様があります。[^1]

元々のJavaScriptの欠点としてJavaScript内でモジュール化されたJavaScriptファイルを外部参照するという言語機能がなかったことが起因しています。
(かつてはHTMLのscriptタグでグローバル参照するというやり方が従来だった）
モジュール機能が先に言語仕様として策定されたのがCommonJSでECMAScriptのモジュール機能は後発となります。
したがって、大まかな文法はほぼ一緒なもののモジュール機能の記述に関して、CommonJSとECMAScript間で大きな違いがあります。
なお、ECMAScriptに

JavaScript(Node.js)でエクセルデータ(CSV)からJSONファイルを出力する（都道府県データ）

# 概要
JavaScript(Node.js)を用いて、excelデータJSONに出力するまでの流れを説明する。

# 事前準備

ターミナル or コマンドプロンプト
nodeのインストール（https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09）
Excelファイル

Excelファイルは、総務省が掲載している、都道府県コード及び市区町村コード（令和元年5月1日現在）を使用する。
http://www.soumu.go.jp/denshijiti/code.html

# 手順

1. csvファイルを作る(prefectures.csv)
2. jsファイルを作る(prefectures.js)
3. jsと同じディレクトリにcsvファイルを入れる
4. csvファイルをコンソールで表示する
5. バイナリーデータを文字列に変換する
6. 文字列を配列に変換する
7. 配列をJSONに変換する
8. jsonファイルを出力する

データ変換の流れとしては

csv => バイナリーデータ => 文字列 => 配列 =>

Hamlの基本箇所についての復習④（ネスト）

#はじめに
飽きもせずHamlの基礎について書いていきます。
今回はクラスのネストについてです。
#実行
例えば、htmlで次の様に書かれているとします。

“`html

“`
`wrapper`という大きなクラスがあり、その中に`top`と`down`という小さなクラスが二つあります。
このように親要素・子要素があるhtmlファイルだと、ちょっとした書き間違えが起こります。例えば次のようなものです。

“`html

“`
これは`

`の閉じタグがない状態です。これだとCSSがちゃんと適用されないなどのエラーが起きます。
単純なミスですが、意外と気づきにくく、エラー解決まで時間を要することも少なくないです。

しかし、Hamlを使えばこの問題を多少なり解決することができます。
前述のコードをHamlで

人気の旅行APIをまとめてみた

旅行と観光は、世界最大かつ最も成長著しい産業の1つです。国連世界観光機関（UNWTO）によると、2016年には1950年の2,500万人から12億人もの人が外国に到着しました。専門家によると、この業界は今後もさらに成長すると予想されます。

この成長により、旅行会社はAPI（アプリケーション・プログラミング・インターフェイス）を公開し、開発者がAPIの機能をアプリケーションに統合できるようになりました。

この記事では、現在使用されている人気の旅行APIのリストを作成しました。このリストを作成するにあたり、次の基準に基づいてAPIをランク付けしました。

•**API機能：**これらのAPIの最も高度な機能のいくつかを詳しく調べました。
•**人気：**各プラットフォームの人気を確認しました。これは、Webサイトまたはアプリケーションに統合するのに最適なプラットフォームを決定するのに役立ちます。
•**使いやすさ：**各APIをアプリケーションに統合する容易さを評価しました。
•**価格：**各APIの使用コストを評価しました。

![0Travel.png](https://qiit

bindを複数回使用するとthisは最初にbindしたオブジェクトになる

JavaScriptのFunctionには`bind()`というFunctionをcallした際にthisを指定できるメソッドがあります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

`bind()`複数回呼び出したときにどんな挙動になるのか見てみたところ、最初に`bind()`に渡したオブジェクトがthisになるようです。

“`js
class First {};
class Second {};
function multipleBind() {
console.log(`this: ${this.constructor.name}`)
};

multipleBind.bind(new First()).bind(new Second())()
// => this: First
“`

ただ、`bind()`の第2引数以降は呼び出す関数に渡す引数を指定できますが、こちらは複数回bindを渡すとその分引数が追加されていくようです。