f@ctor

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

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

モダンJavaScript基本構文をまとめ（前半）

# モダンJavaScript基本構文をまとめ（前半）

講座で出た構文をcodesandboxで試したので、その内容のまとめ。

## 変数宣言

### constとletでの変数宣言

今まで使われていたvarを使った変数宣言は、再宣言や再代入が可能だったため、意図せず変数を書き換えてしまいバグの温床となることがあった。

そこで新たに**const**と**let**という変数宣言のコードが追加された。

– letを用いた場合・・・（１）
– 再宣言は不可だが、再代入は可能
– 書き換える必要がある処理の際にはletを利用する
– constを用いた場合・・・（２）
– 再宣言、再代入ともに不可
– そのため現在はほとんどconstで宣言をする
– 配列やオブジェクトのプロパティを変更することは可能・・・（3）

確かにconstだけで大体良さそう。。。

“`jsx
/**
* 変数宣言　varの場合、再宣言可能、再代入可能
*/
var food = “soba”;
console.log(food); //soba

var

元記事を表示

[Javascript] Array.reduceを使って一次元配列をｎ個ずつに分割して新しい二次元配列を返す

##はじめに
一次元配列を指定の要素数ごとに分割し、二次元配列にする必要があったため、そのロジックに関する小ネタです。即時関数、アロー関数式、通常関数（関数宣言）の３タイプのご紹介です。

##ロジック
“`Javascript:sample.js
const originalArr = [1,2,3,4,5,6,7,8,9,10,11,12,13];
const num = 3; // 分割単位

// 即時関数
const chunkedArr = ((arr, size) => arr.reduce((previous, _, i) => i % size ? previous : […previous, arr.slice(i, i + size)], []))(originalArr, num);
// -> [[1,2,3],[4,5,6],[7,8,9],[10,11,12],[13]]

// アロー関数式
const hoge = (arr, size) => arr.reduce((previous, _, i) => i % size ? p

元記事を表示

【JavaScript】関数とオブジェクト⑩　prototype

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/1758ba807241ab4f4a43

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.プロトタイプとは

* コンストラクター関数と一緒に使用する
* オブジェクトに存在する特別なプロパティのこと
* インスタンス化した際にprototypeの参照が__proto__にコピーされる

####例1

““`javascript
function Person(name, age) {
this.name = name;
this.age = age;
}

// 以下にコンストラクター関数のメソッドを追加し無名関数を代入
Person.prototype.hello = function(){
// Personのthis.nam

元記事を表示

JavaScriptの命名規則早見表（と記法）

JavaScriptを書く時に、命名規則について「あれどうだったっけ」となった時に参考になれば幸いです。
※ 業務であれば、チームなどによってルールが決まっていることもありますので、この限りではありません。

# Javascriptの命名規則

|記法|記法名|例|
|—|—|—|
|コンポーネント名|アッパーキャメルケース|UserForm|
|変数名|ローワーキャメルケース|sampleFunction|
|定数名|スネークケース|API_URL|
|メソッド名|ローワーキャメルケース|addNumber|
|プロパティ名|ローワーキャメルケース|userName|
|クラス名|アッパーキャメルケース|MyCar|

## おまけ： 記法について

|記法|説明|例|
|—|—|—|
|アッパーキャメルケース|先頭と言葉の区切りは大文字、それ以外は小文字|UpperCamelCase|
|ローワーキャメルケース|先頭は小文字、言葉の区切りは大文字、それ以外は小文字|lowerCamelCase|
|スネークケース|すべて大文字で、単語ごとにアンダースコアで

元記事を表示

FullCalender.js Timeline Viewで日付境界線を書き換える

# はじめに
最近、なんちゃってグループウェアみたいなものを作ることがあり、
そんな中初めて、FullCalenderを使ってみようといろいろ試しています。

今回は、Timeline Viewで複数の日付を表示した際に、日付のが変わる位置の線を変更したという内容です。
もっといい方法があるよという人はぜひ教えてください。

本記事は、以下の記事がほぼそのままの内容ですが、こちらの記事ではCSS時間をべた書きしてしまっています。
ユーザーで設定を変更したり変数化した際、CSSを書き換えるのが難しいためJS側で設定できるようにしたものです。
[How can I show separation between days in a FullCalendar ResourceTimeline?](https://stackoverflow.com/questions/60668660/how-can-i-show-separation-between-days-in-a-fullcalendar-resourcetimeline)

## 注意
商用利用の場合Timeline Viewは有料

元記事を表示

Bootstrap4.0.0-alpha.6 のModal is transitioningを解消したい

#問題

Bootstrap4.0.0-alpha.6において、公式リファレンスのモーダルを実装し、モーダルの開閉を繰り返すと、`Uncaught Error: Modal is transitioning`というエラーが発生する。

##該当のコード
[公式リファレンスのモーダル](https://getbootstrap.jp/docs/4.2/components/modal/)

“`html

元記事を表示

p5.js の 3D描画におけるカメラの位置変更を軽く試してみる（3つの異なるやり方にて）【その1】

p5.js の `createCanvas()` や `createGraphics()` で、以下の `WEBGL` を選択した場合の描画に関し、カメラの位置変更を行った場合の話に関する記事です。

●reference | WEBGL
　https://p5js.org/reference/#/p5/WEBGL

試した内容は以下のツイートにある通りで、詳細はこの後に説明をしていきます。

元記事を表示

ml5.js の Handpose でカメラ画像のサイズを変えたら描画がズレたので検証・対処してみる（PoseNet、Facemesh との比較も）

タイトルの通りの内容です。
（仕様を勘違いしている、とかあるかな…）

[ml5.js の Handpose](https://learn.ml5js.org/#/reference/handpose) の公式サンプルの中で、[「p5.js Web Editor ＋ Webカメラ」](https://editor.p5js.org/ml5/sketches/Handpose_Webcam)のサンプルの組み合わせを試した際、カメラ画像のサイズ変更を行ったら描画がズレるということが起こったので検証などをしてみました。

以下の画像は、サンプルをそのまま動かした時のものです。
カメラ画像の横x縦の大きさは 640 x 480 です。
![デフォルトの設定.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fe90b803-bb83-9a3d-fae9-f0b96d84d3bc.jpeg)

以下の画像は、ビデオの横x縦の大きさを 480 x 360 にして、キャンバス上への描画時のサイズもそれを

元記事を表示

あなたの知っているJavaScriptはもう古い(書き方編 -その3- )

## おさらい
その１，その２で新しいJavaScriptの書き方について学んできました。
今回は最終回となるその３です。

https://qiita.com/k-tetsuhiro/items/9900665f200f0ca77e96

https://qiita.com/k-tetsuhiro/items/4e9e299f4f18f87ff8dc

## オブジェクトの省略方法
**オブジェクトのプロパティ名と設定する変数が同じ**場合、省略することができます。

“`sample.js

const name = “タロウ”;
const age = 20;

// userオブジェクト
const userObject = {
name: name.
age: age,
}

userObject // { name: “タロウ”, age: 20 }のようなオブジェクトになる

// こんな感じでかけばプロパティ名を省略できる
// userオブジェクト
const user = {
name,
age,
}

userObject //

元記事を表示

React + JavaScriptでまるばつゲーム(三目並べ)を作ってみた

業務で念願のReact案件に携わることになったのですが、
Reactの知識ゼロのため一週間言語学習の時間に充てていました。
その中で、実際に何かを作ってみようということになり、まるばつゲームを作ったので復習も兼ねてまとめます。

# 必須仕様

– ３×３のマス目を表示させ、クリックしたマス目上に◯もしくは×を表示させる。
– “◯の番です。”と”×の番です。”を交互に表示させる。
– リセットボタンを押下すると、始めからスタートできるようにする。

一旦ここまでの実装で、という話になりました。

# 追加仕様
– 勝敗判定をする。
– 既に◯か×が表示されている箇所を2回以上クリックしても変更できないようにする。

上記2つが自分で実装したいと思った機能です。

# 参考にしたものについて
まず前提知識の習得として、以下の教材を使用しました。

– [モダンJavaScriptの基礎から始める挫折しないためのReact入門](https://www.udemy.com/course/modern_javascipt_react_beginner/)
– [モダンJavaScrip

元記事を表示

あなたの知っているJavaScriptはもう古い(書き方編 -その2- )

## 前回のおさらい
前回はJavaScriptの新しい書き方の基礎を学んでみました。
今回はさらに突っ込んだ新しい書き方を学んで行きます。

https://qiita.com/k-tetsuhiro/items/9900665f200f0ca77e96

## 分割代入
昔の書き方では**objectに対して要素をとり方出す**ときに、こんなやり方をしていたと思います。

“`sample.js
var personObject = {
name: “タロウ”,
age: 20,
};

// 私の名前はタロウです。年齢は20歳です。
var message = `私の名前は${personObject.name}です。年齢は${personObject.age}歳です`;
“`
この書き方だと毎回`personObject`を書かないといけないので効率がとても悪いです。
そこで、分割代入を使用します。

“`sample.js
const personObject = {
name: “タロウ”,
age: 20,
};

// 分割代入

元記事を表示

【JavaScript】関数とオブジェクト⑨　コンストラクター関数

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/5e2a32592870be7b3436

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.コンストラクター関数

* コンストラクター関数とは新しく**オブジェクトを作成する**ための雛形となる関数のこと。
* new演算子を使用する。

““`js
const b = new A();
““`

* newでオブジェクトを作成すること(new A())を**インスタンス化**という
* newで作成したオブジェクト(b)のことを**インスタンス**という

###例1

インスタンス化

“`js
// 関数を定義
// 普通の関数と区別するために大文字で定義する
function Person(name,age){
// 格納したいプロパティを定

元記事を表示

【初学者~中級者向け】JavaScriptのsplitについて②

前回に続きJavaScriptのsplitについて
ちょっと踏み込んだとこまで解説していきます。
##目次
①**第二引数**について
②**正規表現**との組み合わせ

について解説していきます。

##①第二引数について
前回、split( )は**引数で指定した区切り文字で文字列を分割し配列にする**というとこまで紹介しました。怪しい方は[前回](https://qiita.com/yasu-hoshi/items/f3853e05aed48f96c0f7)をぜひチェックしてみてください

split( )は**第二引数**で
**配列に取り出す個数を指定することが出来ます**

**split (‘ – ‘ , 3 )**　 ⇒ **　「–」で区切って3つ取り出す**
**split (‘【Vue.js】算出プロパティのgetterとsetter

#はじめに
こんにちは！
今回は【Vue.js】getterとsetterについてアウトプットしていきます！

#getterとsetter
・cpmputed（プロパティ）・・・getter,setterが必要
・methods（メソッド）・・・getterのみ必要

getter=**dataの値を取り出すのメソッド**
setter=**dataの値に代入するためのメソッド**

#書き方・解説
今回は税抜価格、税込価格の計算を例に解説していきます。

“`HTML:HTML

base price :

tax included prie :

“`

“`Vue.js
data: {
basePrice: 100
},
computed: {
taxIncludedPrice: {
get: function() {

【学習記録⑨】カスタムディレクティブを用いて独自のDOM操作を作る！

#はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はカスタムディレクティブを用いて特定の処理を使いまわす方法について記載していこうと思います。

##カスタムディレクティブ
ディレクティブとは`v-if`や`v-for`などのようにDOM操作に関する属性を指しますが、`カスタムディレクティブ`を用いると独自のDOM操作を定義することが可能です。

https://v3.ja.vuejs.org/guide/custom-directive.html

以下では`v-colorRed`というカスタムディレクティブを作成しています。
`v-if`や`v-for`と同じように属性として設定し、その内容が`script`タグの`directives`プロパティに書かれているという感じですね。

“`vue:test.vue