f@ctor

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

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

JavaScript の変数は全て巻き上げられる

# 概要

“`javascript
const f = () => console.log(a, b, c)

let a = 1
const b = 2
class c {}

f() // 1 2 class c {}
“`

# 巻き上げ

英語 : Hoisting

**JavaScript** において、変数がスコープの先頭で宣言されたように扱われる挙動を指す用語です。
実用的 (？) な例としては `function` で宣言した関数を前方から呼び出すものがあります。

“`javascript
f() // Hello

function f () { console.log(‘Hello’) }
“`

# 本題

巻き上げの対象は宣言、つまり識別子 (変数) の存在だけで初期化 (代入) は反映されません。
`var` を前方から参照しても `undefined` が取得されるだけです。

意図的に利用するものでもないので `let`、`const` や `class` では巻き上げられた識別子を参照するとエラーが発生するようになっています。

`

元記事を表示

色々な関数の書き方 【JavaScipt】

###どれも結果は同じなのに、関数の記法は実に色々。
###混乱していた所、とても良い教材と巡り合った。 以下、ざっと一覧。

“`javascript

//関数宣言
function double(x) {
return x * 2;
};

//関数式
const double = function (x) {
return x * 2;
};

//アロー関数 function 省略
const double = (x) => {
return x * 2;
};

//アロー関数 引数が1つのときは()省略
const double = x => {
return x * 2;
};

//アロー関数 {}省略
const double = x => x * 2;

“`

###アレンジ–引数が2つver.

“`javascript
//＝＝＝＝＝＝＝三角形の面積＝＝＝＝＝＝＝＝＝＝＝＝＝//

元記事を表示

Vue.js公式の導入をReactで

Vue.js公式サイトの「はじめに」部分をReactで書くとどうなるのか、試しにやってみました。
https://jp.vuejs.org/v2/guide/

# はじめに

私はHTMLとjQueryを学んだ後、VueとReactを見比べてReactを勉強することに決めました。
概念をヒイヒイ理解したあと、書けるところは書ける程度には成長しました。

そこでReactと比較しながら再びVue.jsを見ると、「昔Vue.jsで訳が分からなかったここはReactのこれなのか！」という発見がありました。このような経緯で暇潰しに比較してみました。

前書きはこのくらいにして、Vue公式の該当ページのように導入と解説を適宜交えて書いていきます。
そして個人的な感想も少し入れます。

ちなみにVueの#app, #app2,…#app7は、
ReactでApp1, App2,…App7 というコンポーネント名にしました。
（Appは初期表示のコンポーネント名と被るので）

# Reactを試すには

create-react-app（以下CRAと略記）がお手軽です。(注)

“`
n

元記事を表示

Ajaxのデバッグにログを使うのはもうやめよう！これからは開発者ツールで楽々デバッグ

## 面倒なAjaxのサーバーサイドのデバッグ
Ajax通信の際のサーバーサイドのデバッグはログに吐くテクニックを使う人が多いですが、ブラウザとログを行き来するのは億劫に感じませんか？

“`php:よくあるデバッグ
error_log(print_r($result, true), 3, ‘/var/log/debug_log’);
“`

## 開発者ツールでデバッグが楽になる

そんなときはChromeの開発者ツールからリクエストの結果を確認すると捗ります。
Networkタブから該当のAjax通信を選択してPreviewを見るだけ。

(1)Networkを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206138/bba5e142-43c0-359b-1035-f43dec38306f.png)

(2)該当リクエストを選択して、Previewタブを表示する
![image.png](https://qiita-image-store.s3.ap-northea

元記事を表示

機械学習したグーとパーで操作するFlappy Bird (フラッピーバード）っぽいゲームを作ったよ

##作ったもの

グーとパーで操作するフラッピーバードっぽいゲームを作りました。
握力のトレーニングにもなるかも。

なお、ゲーム部分は完全オリジナルではなくGitHubで見つけた[フラッピーバードっぽいゲーム](https://github.com/CodingTrain/website/tree/master/CodingChallenges/CC_031_FlappyBird/P5)を下地にしました。