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

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

変数をコピーした時の値 vs 参照

まだまだ完璧に理解しているとは言えないのですが、
フォルダの例えですっきりしたのでシェアします。

## 値渡しと参照渡し
ひとつの変数から他の変数に中身をコピーしたい場合、
ざっくり言うとStringとObjectで挙動が変わってしまう。

– string … コピー元が変わらない
– object … コピー元も書きかわってしまう

## Stringの場合
Stringはプリミティブ型。メソッドを持たないデータ型。

“`
let name1 = ‘tom’;
let name2 = ‘tom’;
console.log(name1, name2): // tom tom

name1 = ‘bob’; //ここでname1を書き換える
console.log(name1, name2): // bob tom

name2 = name1; //name1(今はbob)をname2つに入れる。name1のコピーを作ってname2という名前にする
console.log(name1, name2): // bob bob
“`

stringは中にvalueしかな

元記事を表示

Uncaught TypeError: Cannot read property ‘hoge’ of undefined

### ‘〇〇’ of Undefined

よく出くわすエラーなのですが、〇〇がundefinedで〇〇がおかしい!と私は早とちりしがちなので、
このエラーがどういう意味なのかということを残しておこうと思います。

### マリオで見てみよう

こういうobjectがあるとします。

“`
const mario = {
job: ‘plumbing’,
relationship: {
brother: ‘Luige’
}
};
“`

`mario.hobby`だと、そんなプロパティはないので、`undefined`になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126769/1afc2eaa-fa30-a2f4-5143-634390ce09b4.png)
ここまでは想像がつきますね。

### cannot read property ‘fire’ of undefined

で、どんなふうに呼び

元記事を表示

React-Grid-LayoutでサクッとDrag & Dropできるコンポーネントを作る

React-Grid-Layoutを使用して、Drag & Dropで移動でき、サイズの変更も可能なコンポーネントの実装を試してみます。
完成形は以下のようになります。

![react-grid-test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503026/9809d4f0-254b-4489-e64c-c8a06ee3c8fe.gif)

#React-Grid-Layoutって?
React-Grid-Layout(以下RGL)はReact用のグリッドレイアウトです(まんま)。
上の画像のように、D&Dでコンポーネントの移動ができるようになります。
また、RGLのインストールにはreact-resizableというパッケージも含まれており、コンポーネントのサイズの変更も可能になります。

多分GitHubのREADME見れば実装するのも簡単だと思いますが、
React初めて一週間くらいなので、練習がてらまとめておきたいと思います。

####GitHub
https://github.

元記事を表示

JavaScriptHack Hackフォルダ オブジェクト指向編/Dom編

#JavaScript Hackとは
##前提
弱いなりにサバイバルしていくためのもの。きちんと学ぶことも必要だが
英語のようにお客さんに単語を並べて乗り切られ、残念な結果は避けたい。
経験としてDomとFormを押さえればいけるのではないかという見込みで
Hackを行っていく。オブジェクト指向は今回はさわりだけしか取り上げないことにする。

##概要
なぜJavaScriptをやるか?
→ 今でも使ってるところは使っている。
→ 裏ニーズとしておしゃれなフレームワークを学ぶためにもやっておいたほうがいい。

##JavaScriptHack Hackフォルダ オブジェクト指向編
###コンテンツ
オブジェクト指向を学ぶ。
シラバスを作成する。

###オブジェクト指向を学ぶ。
Progate JavaScript Ⅳ
https://prog-8.com/languages/es6
###シラバスを作成する。
・オブジェクト
・クラス
・継承

##JavaScriptHack Hackフォルダ Dom編

###コンテンツ
Domを学ぶ。
ゲームを作成する。
シラバスを作成する。

元記事を表示

【JavaScript】ネコ泣いちゃったゲーム作ってみた(遊び)

##ネコ泣いちゃったゲーム
MDNサイトの学習に沿って、オリジナルの簡単な動作物を作成しました。

※MDNサイト↓
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript

##HTML

“`

ネコの鳴き声





“`

##JavaScript
“`