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

chrome拡張機能で抽選機を作った

突然ですが私は極度の優柔不断です。
今日どのゲームするかを決めるのにも迷ってしまいます。
ということで前々から触ってみたかったchrome拡張機能で抽選王的なものを作りました。
~~と言っても今回は拡張機能APIを使う部分が無くてほぼ生のhtmlとjsだけ~~

# 出来たもの
https://github.com/engabesi/RandomPicker

# やること
– chrome拡張機能セットアップ
– popup作成

# セットアップ

“`:構成予定
RandomPicker/
├─ css/
│ └─ bulma.min.css
├─ html/
│ └─ popup.html
├─ icons/
│ ├─ icon16.png
│ ├─ icon48.png
│ └─ icon128.png
├─

【永久保存版】「||」とか「&&」ってなんやねん

# 結論
[論理演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators)と言います。
どうぞよろしくお願いします。
## 前提知識
– 論理演算子は左から右という順番で評価をする
– 論理演算子が返す値は**基本的には**真偽値(true or false)です。
– ただ、真偽値以外も**返すことができます**。
– それは後程説明します。

## 解説
### 「||」
– any1　||　any2の**どちらかがtrueであればtrueを返す。**
– any1がfalseの場合any2を見て、any2もfalseだった場合初めてfalseを返し、trueであればtrueを返す。
– つまり、どちらもfalseでなければfalseを返さない。

“`js
a1 = true || true // true
a2 = true || false // true
a3 = false || true // true
a4 = fa

LocalファイルにJavascriptを使って書き込みする方法（承認必要）

# はじめに
LocalファイルにJavascriptを使って書き込みする方法をまとめました。
ただし、セキュリティ上必ず承認が必要となってきます。そのセキュリティを回避する方法は今回説明しません。

#### 関連リンク
関連リンクを下記に載せておくので、必要であれば参考にしてください。。

* Local上にて複数のHTMLコンテンツのデータを共有する方法（Store.js）
* https://qiita.com/syukan3/items/c20ed695c1d676799a5a
* Local環境のXMLファイルからJavascriptを使って情報を取得する方法
* https://qiita.com/syukan3/items/71c63cdccb6976e52f3d
* Local環境でのCookie / WebStorage 挙動
* https://qiita.com/syukan3/items/dd907b7cd3ed86025546

# やりたいこと
ブラウザにてHTMLファイル（HTML:write_to_local_file.html

気づいたこと日記(1日目)

1# 配列の長さぶん処理をするときには
ForIn ではなく ForEach を使おう！
　`
fruits.forEach(function(item, index, array) {
console.log(item, index);
});
// りんご 0
// バナナ 1
　`
→indexも実は使える…
`
　for(let i in fruits){
console.log(fruits[i],i);
// りんご 0
// バナナ 1
/*
一見こっちの方が簡単にすませられそうだが、
*/
console.log(typeof i ,i+1);
// string,NaN
// string,NaN
/*
Indexが文字列なので計算できなかったり…
*/
`
}

なので、forinを使う

VueコンポーネントのfunctionをES6スタイルで書く

# はじめに
Vueでは関数定義をES6のアロー関数（Arrow Function）を使わずにES5以前からの書き方のfunction式（function expression）を使う方法が[推奨されています](https://jp.vuejs.org/v2/api/#methods)。

>メソッド(例 plus: () => this.a++) を定義するためにアロー関数を使用すべきではないことに注意してください。
アロー関数は、this が期待する Vue インスタンスではなく、this.a が undefined になるため、親コンテキストに束縛できないことが理由です。

“`javascript
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++ // this = VueComponent
}
}
})
vm.plus()
vm.a // 2
“`

例えばmethods内部でfunctionを定義した場合、thi

Vue.js のディレクティブの記述を膨らませないために

# 概要
本記事では、Vue.jsのディレクティブって便利だけどなんかかさばって可読性が・・という方に
改善する方法を**v-bind**を例にして紹介していきます。

## 元のコード
aタグに対して2つのv-bindが設定されています。
2つくらいなら・・と思うかもしれませんがこれが膨張していくと恐ろしいことになります。

“`html:index.html

リンク

“`

“`js:index.js
new Vue({
el: ‘#app’,
data: {
url: ‘https://sample.com’,
number: 23
}
})
“`

## 改善
ひとつのオブジェクトにまとめることができます。
画面上の表示はなにも変わりません。

“`html:index.html

リンク

“`

“`

Vue.jsでイベントオブジェクトを取得する

# 概要
本記事では、Vueのディレクティブである **v-on** を使ってイベントオブジェクトを取得する方法を紹介します。

## イベントオブジェクトとは
イベントオブジェクトは、イベントハンドラーおよびイベントリスナーにおいて実行される関数の**引数**として受け取ることのできるオブジェクトです。 そのイベントオブジェクトから、**発生したイベントに関わる様々な情報（プロパティ）**を知ることができ、またそのイベントを制御するメソッドを活用することができます。
詳しくは下記記事を参考にしてください。
https://phpjavascriptroom.com/?t=js&p=event_object

## 実際のコード
sampleTextというidを持たせたp要素の上にマウスを乗せた時、そのマウスの位置を取得し
その下のresultというidを持たせたp要素に表示させるという流れ。

“`html:index.html

ここにマウスを載せる

[Node.js]モジュール定義について整理（exports-require / export-import）

## はじめに
あるファイルに定義した関数等を別のファイルで使いたいときにどうするか。

Node.jsでは二つのやり方がある。

1. exportsで公開してrequireで読み込む（CommonJS）
2. exportで公開してimportで読み込む(ES2015)

**常に使えるのは1の方法。Babelを使うなら2の方法でも可能。**
どちらを選んでもメリット・デメリットがあるわけではない（と思う）ので、お好きなほうで。

個人的には、常に使える1の方法がいいような気がしている。

## 使用例
### exportsで公開してrequireで読み込む（CommonJS）
#### 一つの関数だけをエクスポート
“`javascript:module.js
// 関数を定義
const f = () => {
console.log(‘Hello!’)
}

// 関数を公開
module.exports = f
“`

“`javascript:client.js
const f = require(‘./module’)
f() // Hello!
`

JavaScriptの多次元ハッシュ（連想配列）を一括でURIエンコードする

## 一括処理したいこと
HTTP通信において、次のような多次元のハッシュ（連想配列）を送信する場合、

“`js:sampleHash.js
let hash = {
text: “こんにちは”,
user: {
name: “山田太郎”,
email: “taro@yamada.com”,
}
};
“`

サーバへのリクエストは、次のようにURIエンコードして送信することになります。

“`:URIエンコード(UTF-8)
text=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF&user[name]=%E5%B1%B1%E7%94%B0%E5%A4%AA%E9%83%8E&user[email]=taro%40yamada.com
“`

この処理を、関数を使って一括でURIエンコードすることがこの記事の目的です。

## データ加工のイメージ

多次元配列をURIエンコードで送信する場合のルールは次のような感じです。

– ネストしている要素は１つずつ独立させる
– 下の階層のキーは、`[ ]`

javascript入門

javascriptを勉強した内容をまとめます

# ブラウザで使う場合

### htmlのscriptタグ内に書く

“`html:index.html









“`

### jsファイルに書いておいてscriptタグでインポートする

以下はindex.htmlと同じディレクトリにtest.jsを置いた場合です

“`html:index.html

```

しかし
#イベントリスナーが消えない。
「