f@ctor

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

JavaScript関連のことを調べてみた2021年05月13日
目次

配列の要素を追加・削除して遊んでみた！【備忘録】

こんにちは！
今日は、配列を使って遊んでみました。
配列の処理には、色々ありますが、今回は、「要素の追加・削除」です！

# 要素を追加する
まずは、要素を追加してみましょう。
要素を追加するのに、「配列の末尾に追加する方法」と「配列の先頭に追加する方法」の2つがあります。

## 1. 末尾に追加してみた！
ますは、末尾に追加する方法です。push()メソッドを使います。
push()メソッドの書き方は以下です。

“` JavaScript
元の配列.push(追加したい要素);
“`

“` JavaScript
let array1 = [“わらびもち”, “大福”, “みたらし団子”];
let array1_2 = array1.push(“柏餅”);
console.log(array1);
// [“わらびもち”, “大福”, “みたらし団子”, “柏餅”]
console.log(array1_2);
// 4
“`
元の配列(上の例ではarray1)の末尾には、要素が追加され、要素が追加され

元記事を表示

【JavaScript】3分のカウントダウンタイマーを作成せよ。具体的な要件は以下に示す。

１・カウントは03:00からスタートする
２・スタートボタンを押すと1秒ずつカウントが進む
３・カウントが00:00になったら「Time UP!」と表示する
４・ストップボタンを押すとカウントが止まる
５・リセットボタンを押すとカウントが03:00に戻り、カウントが止まる
６・スタートを二度押しても1秒ずつカウントが進むこと。

“`javascript




カウントダウンタイマー
```

型定義する場合

```vue

```

# computed

元記事を表示

【Vue.js 勉強メモ】$emitメソッドの正体　コンポーネント(子→親)の間のデータ受け渡しでやってる事

## はじめに
仕事で使う事になったので1からVue.jsについて学んだ。
ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。

## $emitメソッドの正体　コンポーネント(子→親)の間のデータ受け渡しでやってる事
カスタムイベントを定義・発火させることができるメソッド[^1]。
このメソッドを応用して、コンポーネント間（子→親）のデータの受け渡しを行う事ができる。
![ezgif.com-gif-maker (5).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/39fc1f53-a2c7-33da-9d35-fc4417b1f743.gif)
[^5]: ソースコード全体を見たい場合は[ここ](https://github.com/yuta-katayama-23/intro-vuecli/tree/bd97b33e82ad94f76b4734f5001168f662b808cd)
動画のソースコードは以下[^5]。

```vue:parent-compone

元記事を表示

functionガチアンチでもfunctionを使わなければならない状況、どう打破すべきか？

アロー関数は最高だ。
私たちの人生を豊かに彩ってくれる。
ところが、泣く泣くfunctionを使う状況がある。
#例
```js
(function f(){
console.log(1234);
setTimeout(f,500);
})();
```
即時関数を再帰的に呼び出したいとき、functionを使ってこのように書けば名前空間を汚さずに表現できる。
しかし、私はfunctionガチアンチなのでfunctionは絶対に使いたくない。
functionを使わず、名前空間も汚さず同様の処理を表現するにはどうすればいいのか？
#解決策
```js
(f=>f(f))(f=>{
console.log(1234);
setTimeout(()=>f(f),500);
});
```
こうすればよい。
これで忌々しきfunctionの脅威は消え去った。
#まとめ
いやどう見てもfunctionの方が簡潔だろ

元記事を表示

2次元アクションゲームにおける摩擦を実装する(pixi.js)

物が動くと面白い。
その速度が変化すればより面白い。
等速直線運動だけでは面白くない。
動き始めたものにはそのうち止まってほしい。
つまり、摩擦を実装したい。

画像の表示にはpixi.jsを利用する。

```js:scsript.js
//Aliases
let Application = PIXI.Application,
loader = PIXI.loader,
resources = PIXI.loader.resources,
id = loader.resources,
Sprite = PIXI.Sprite;

//アプリケーション宣言
const width = 500;
const height = 600;

let app= new Application({
width:width,
height:height,
antialias: true,
transparent: false,
resolution: 1,
autoResize: true,
bac

元記事を表示

JavaScriptでサブクラス可能なFunctionクラスを作る

JavaScript に於いて，関数は特殊なオブジェクトのため，普通にサブクラスすることはできません．そこで，普通に関数を作成して，その関数に対して必要な定義を行うこととなります．ここで，工夫して定義を行うと，普通のサブクラス可能な関数コンストラクタを定義することができることを発見いたしました．以下にそのコードを示します．

## コード

なお，このコードは Apache 2.0 ライセンスで利用可能なものとします．

```javascript
{
let _;
const ExtensibleFunction = function ExtensibleFunction(){return _(new.target)};
Reflect.setPrototypeOf(ExtensibleFunction, Function);
ExtensibleFunction.CALL = Symbol('[[Call]]');
ExtensibleFunction.CONSTRUCT = Symbol('[[Construct]]');
Exte

元記事を表示

個人的におすすめしたいプログラムの技術サイト

プログラムを学ぶとき、良質なサイトを探すのにかなりの時間を浪費した。
他の人にはそうなってほしくないので、今まで役立ったサイトを公開する。
なお、強くオススメしたいサイト順に並ばせる。
随時更新予定。

# JavaScript
> （Webで動きを付けたいときに使う有名なアレ）

・JavaSciptチートシート　（まとまっていてわかりやすい）
　https://jsprimer.net/cheatsheet/

・JavaScriptの業務スキルレベル　判別表（この記事はだいぶ古いが今でも有用）
　https://language-and-engineering.hatenablog.jp/entry/20100111/p1

・MDNエラーリファレンス
　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors

・Excel VBAプログラマーのためのGoogle Apps Script入門
　https://www.atmarkit.co.jp/ait/series/5004/

・Java

元記事を表示

Googleアナリティクスでクリック数を計測

# Over view
- GoogleAnalytics（GA）でリンクごとのクリック数を計測したい
- LPなんかのサイト分析の時にリンクごとのクリック数を計測する時とかに便利
- onclickタグを１つ導入するだけで簡単に設定できます

# Code
```html:index.html

Hello,world!
```
- 'event' => そのまま記述しましょう。
- 'c

元記事を表示

[Rails6.0 + jQuery + Bootstrap] d-flexが有効だと style="display: none;" が効かない。

#課題
Bootstrapのd-flexが有効な場合 $element.fadeOut() が効かなかった。
![スクリーンショット 2021-05-12 10.56.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239796/c851751b-b3b1-9b00-e02b-2acdd5f7db0f.png)
**子要素の列が消えてくれない。

#原因
どうやらこいつだ。
![スクリーンショット 2021-05-12 10.59.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239796/42c74ae6-a6ff-805a-c912-ed36cbc6ea05.png)

#結論
d-flex を外すと効いた。

```js:jquery
$element.removeClass('d-flex')
$element.fadeOut(300)
```

元記事を表示

Vue.jsで動的に要素変更

配列に動的に値を追加して描画できなかったので、Obejctにしなさいよという教訓から書きます:tea:
間違い等ありましたら、ご指摘していただけると幸いです。

# リアクティビティ

>Vue は、配列における次の変更は検知できません:
>インデックスと一緒にアイテムを直接セットする場合、例えば vm.items[indexOfItem] = newValue
>配列の長さを変更する場合、例えば vm.items.length = newLength

https://jp.vuejs.org/v2/guide/reactivity.html#%E5%A4%89%E6%9B%B4%E6%A4%9C%E5%87%BA%E3%81%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85

上記の内容に引っかかって配列にひたすらpushして悩んでいました。(ちゃんとドキュメント読もうね...)
またリアクティブプロパティの宣言も行っておらず、カオスな状況でしたので原因の発見に遅れました。

```vue:Paramedit.vue