【Javascript】console.log()用のfunctionを作成すべき

完全メモ用

Javascriptを何十何百行と書く場合、ご存知の通り役に立つのがconsole.log()。
ただ毎回書くのが超（個人的には）めんどくさい。
特にゲームを作っていて()内が複数ある場合。

そんな時に役立ったのが以下のようなfunction。

もちろんこの通りに書く必要はないし、何ならこんなのもあり。

カードゲームを作成しており、デッキ・プレーヤー手札・ディーラー手札が常

【JavaScript】日付型（Date 型）と文字列型の相互変換についてのまとめ

以下、JavaScript における「日付型から文字列型への変換」および「文字列型から日付型への変換」についてまとめておきます。

[1. Date オブジェクトの生成（前置き）](#1-date-オブジェクトの生成前置き)
[2. 日付型から文字列型に変換する](#2-日付型から文字列型に変換する)
[3. 文字列型から日付型に変換する](#3-文字列型から日付型に変換する)

## 1. Date オブジェクトの生成（前置き）

2022年5月5日6時35分20.333秒を指定して Date オブジェクトを生成する場合は、次のように指定します。

“`sample.ts
// 2022年5月5日6時35分20.333秒を設定
const date = new Date(2022, 5 – 1, 5, 6, 35, 20, 333);

// 格納されている値は9時間前の日時
console.log(date); // 2022-05-04T21:35:20.333Z (注)協定世界時で出力される
“`

**月は 0 〜 11 の数値で指定する**
月の指定は `0` が起点と

expressでCRUDのコードを写経していたときに「TypeError: Cannot destructure property ‘username’ of ‘req.body’ as it is undefined.」で一日ハマっていた件

# expressの「TypeError: Cannot destructure property ‘username’ of ‘req.body’ as it is undefined.」というエラーについて

# 結論（どうすればよいか）
“`javascript
app.use(express.json());
“`
を　`index.js`　に追加しろ

ちなみに、
“`javascript
app.use(express.json);
“`
ではない
なぜかは知らん

# エラー内容
TypeError: Cannot destructure property ‘username’ of ‘req.body’ as it is undefined.

# ソース
※もう直しているので再現はしません
github
https://github.com/2f0833e717/node-docker

## 実際のコンソール出力内容
“`bash
> node-docker@1.0.0 dev
> nodemon -L index.js

[nodemon] 2.0

Vue.jsインスタンスのライフサイクルフックについて。

未完成。メモ書き
“`
const vm = new Vue({
el: ‘#app’,
data() {
return {
message: ‘こんにちは’
}
},
beforeCreate() {
console.log(‘Vueインスタンス作成前’)
},
created() {
console.log(‘Vueインスタンス作成後’)
},
beforeMount() {
console.log(‘マウント前’)
},
mounted() {
console.log(‘マウント後’)
},
beforeUpdate() {
console.log(‘再描画前’)
},
updated() {
console.log(‘再描画後’)
},
beforeDestroy() {
console.log(‘Vueインスタンス削除前’)
},
destroyed() {
console.log(‘Vueインスタンス削除後’

JSでECサイトが開発できるのなら、オープンソースコミュニティに入りたいと思った話

なんとなく思った話です。
現在、vue.jsに向けて勉強中
2022年5月5日　Vue Storefrontについて知る。

DOMってなんぞや?

DOMってよく聞きますが全然理解していなかったので、今回はDOMについて書いていこうと思います。

# DOMとは
Document Object Modelの略で、WebAPIの一種。
HTMLの要素をJavascriptのオブジェクトとして操作する為の仕組みの事。

とりあえずは「DOMというものがあるからHTMLとJavascriptが使えるんだなぁ」という認識でも良いかも。

## DOMツリー
Javascriptのコードを実行する前にHTML構造からDocumentオブジェクトを頂点としたツリー構造に変換される。その構造のことをDOMツリーというらしい。

よく見かけるdocument.getElementByIdや、document.querySelectorなどで使われるdocumentはDOMツリーの頂点であるdocumentオブジェクトから来ている。

# 感想
名前く

Invalid JSON Keys cannot be empty or contain $#[]./【Firebase Realtime Database】

**無効なJSON キーを空にすることはできません。また、キーに $#[]./ を含めることはできません**と表示されたため備忘録

`$#[]./`をエンコードすることで保存できた

### JavaScript

“`javascript
const encodeKey = s => s.replace(/[\.\$\[\]#\/%]/g, c => ‘%’ + c.charCodeAt(0).toString(16).toUpperCase())
const decodeKey = s => s.replace(/%(2E|24|5B|5D|23|2F|25)/g, decodeURIComponent)

const obj = {‘.$[]#/’: ‘hoge’}
saveAsJSON(Object.fromEntries(Objec

選択した画像を表示&JsでLaravelに画像データを送る方法(自分用メモ)

## やりたいこと
・画像を選択しlaravel側に画像データを保存する

## ステップ１(formの設定)
画像選択をできるようにするためinputタグのtypeを`type=”file”`にする。
そうすることで、選択されたファイルはフォーム投稿を使用してサーバーにアップロードしたり、 JavaScript コードと File API を使用して操作したりすることができる。
`multiple` = 複数のファイルを一度に選択することができる
`accept ` = ファイル入力欄が受け付けるファイル型を定義できる
↓詳しくはこちら
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/file

また、ファイルアップロードをする場合はformタグに`enctype=”multipart/form-data”`を指定する必要がある。
`enctype=”multipart/form-data”`を指定しない場合、添付ファイルの情報を送信できないため、サーバー側では添付ファイルを扱えない。….多分。

“`

【JavaScript】React Hooks＋TypeScript周りをやってみた感想

#### TypeScriptに入門＋React周りに再入門の巻ですよ

　変化の大きいフロントエンド周辺。後発のVue.jsも日本では人気ですし、日本では商業本がReactよりVue.jsの方が手厚く出ているという面白い状況になっています。
　その一方、ダウンロード数でみると世界レベルで圧倒的に強いのはReact。世界レベルで使われているようなサービス、Facebookにインスタ、ネトフリなどなども軒並みReact。はてなブログもReactが使われていますね。

　さて僕は2017-2018年頃からフロントエンド方面も入門を始めました。半分仕事で調べた結果をフレームワークの比較記事にしたらはてブで突然バズってびっくりしたりしました。

https://iwasiman.hatenablog.com/entry/2018/04/23/200000

https://iwasiman.hatenablog.com/entry/2018/04/16/200000

https://iwasiman.hatenablog.com/entry/20210823-frontend-fr

varを使わない理由

varを使わない理由の主な理由はバグを生みやすいからです。
以下具体例を見てみましょう。

# 同名での宣言ができてしまう
以下のように同名で定義した場合変数が上書きされます。

“`javascript

var a = 1;
var a = 22;
console.log(a); // 22

“`

この時、特にエラーなども吐き出さず上書きされ動きます。
システムが大きくなってくるとバグの原因となりやすい仕様です。
システム全体の全ての変数を把握して
所々で上書き処理するというのは人間に優しくないですよね？

# ブラウザの変数を上書きできてしまう
ブラウザはWebAPIというあらかじめ定義された変数を使用しています。

例としてouterHeightを見てみます。
以下のソースをコンソールに入力すると
ウィンドウ全体（削除ボタンなども含む）の縦幅が返ってきます。

“`javascript

console.log(outerHeight)

“`

試しに縦幅を変えてもう一度打ってみましょう。

“`javascript

console.log(outerHeig

Leap Motion の JavaScriptライブラリ（leap.js）のプラグイン「leap-plugins.js」を試す： Hand Entry のお試し（p5.js Web Editor上で）

以下の記事で書いた JavaScript で Leap Motion を扱う話の続きの記事です。
この記事では、ライブラリの「leap.js」と合わせて、プラグインを使ってみるというのをやっていきます。

●バニラな JavaScript や p5.js で Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用） – Qiita
　https://qiita.com/youtoy/items/efc4da1feee26186f565

## leap.js について
Leap Motion用の JavaScriptライブラリを使った話は、冒頭で掲載した記事を書いた時より前に書いた、以下の記事で扱ったことがありました。

●【p5.js 2021（2つ目）】 Leap Motion（leap.js）を p5.js Web Editor上（JavaScript）で扱う – Qiita
　https://qiita.com/youtoy/items/3fa599ed872dfe7ab1da

この記事では詳細は割愛しますが、以下に公式のリポジトリと

Markdownエディタ Webアプリを作成する

# 書籍

バニラな JavaScript や p5.js で Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用）

最近だと、昨年末に以下の記事を書いたりして扱った「Leap Motion」の話題です。

●【p5.js 2021（2つ目）】 Leap Motion（leap.js）を p5.js Web Editor上（JavaScript）で扱う – Qiita
　https://qiita.com/youtoy/items/3fa599ed872dfe7ab1da

↓ Leap Motion はこちら

そして上記の記事と同じで、JavaScript で扱う話です。しかし、今回の内容が上記の記事と違っている点は公式ライブラリ「leap.js」を利用せずに情報を取得する部分です。

## Leap Motion の情報を WebSocket で取得するための接続先
冒頭の記事でも少し触れていた部分があったのですが、PC向けの Leap Motion用

saveAsJSONL.js【JSON Lines】

“`javascript
function saveAsJSONL(data, name=new Date().toLocaleString(‘sv’).replace(‘ ‘,’T’).replaceAll(‘:’,’_’)+’.jsonl’) {
const a = document.createElement(‘a’)
a.download = name
a.href = URL.createObjectURL(new Blob([data.map(JSON.stringify).join(‘\n’)], {type: ‘application/jsonlines+json’}))
a.click()
}
“`
### JavaScriptのデータを保存する
Usage
“`javascript
saveAsJSONL([‘pen’, ‘pineapple’, ‘apple’, ‘pen’])

// ファイル名を指定
saveAsJSONL([‘pen’, ‘pineapple’, ‘apple’, ‘pen’], ‘hoge.jsonl’)
“`

!

Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【ソースコード編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連）

以下の記事で書いていた仕組みについて、「【概要編】」では　ソースコードに関する部分に触れていなかったため、この記事ではその辺りの話を書いていきます。

●#Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【概要編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連、 #toio でも利用可） – Qiita
　https://qiita.com/youtoy/items/db6d34a9985eb182042f

## 動作している様子の再掲
「【概要編】」の記事でも掲載していた、この記事で扱う仕組みが動いている時の様子の動画です。

公式版 #Scratch （https://t.co/0fqczChNyX）で作成したプロジェクトと、公式の #toioDo で作成したプロジェクトの間をつないでシンクロさせる（ちょっと遅延が発生しますが…）、
という少し変わった試作をやってみました。

思いつきで作ってみたネタです。#toio pic.twitter.com/guFrSSHScO

— you (@youtoy) May 3, 2022

構成の話などは、「[【概要編】の記事](https://qiita.com/youtoy/items/db6d34a9985eb182042f)」をご参照ください。　

## 準備手順
この後に、いくつかのプログラムのソースコード等が出てくるのですが、それらをどのような順番で動作させていく

【ajax】”CORSポリシーによってブロックされています” によりデータが取得できない

# １．実現したいこと

jQuery + Ajax で YouTube Data APIを使用し、特定のキーワードで検索を行い、動画のサムネイル、タイトル、URLを取得したい。
そのためにボタンを押した際、下記コードでサーバーにリクエストを送信した。

“`javascript:main.js
$button.on(“click”, function () {
let url = “https://www.googleapis.com/youtube/v3/search”;
url += “?key=” + KEY;
url += “&part=snippet”;
url += “&type=video”;
url += “&q=%20筋トレ%20ジム” + $(this).data(“parts”);
url += “&maxResults=6”;
$.ajax({
url: url,
type: “GET”,
dataType: “json”,
})
.done(fu

Python の input( ) と同様の挙動を JavaScript, Node.js で再現する

私と同じ悩みを持つ方のために、共有させていただきます。
以下のQAにてご指導頂いた内容ですので、経緯等は以下のページを参照ください。

https://qiita.com/watanabe-tsubasa/questions/07131f97fa0a48897ab2#answer-7d6b619e11e5876f6023

## 動作

実行すると数字１を聞かれます（今回は10を入力）。

入力すると数字2を聞かれます（今回は20を入力）。

【個人開発】ディベート掲示板作ってみた！

初めに

この度
Avis
というwebアプリを開発しました。
ディベートに特化したSNSです。
本日も叫ばれる様々な社会問題（SDGsなど）、人それぞれが抱える人生の悩み、そして些細な日常の言い争いまで…様々な論題についてユーザー参加型のディベートを行い、何が正しいのかを模索してくサービスです。

https://avis.city/slist.php?mode=sdgs

Avisの機能

ディベート作成

ユーザーによりディベートを作成することができます。
作成されたディベートは東軍西軍いずれかが目標ポイント（250or500）に到達するとプログラムにより勝敗が確定します。

![senkyou.png](https://qiita-image-store.s3.ap-northea

発した言葉の中にGとWがあれば祝福してくれるブラウザアプリをブラウザのみで作ってみた

## 作ったもの

#protoout #gw 発した言葉の中

変数の巻き上げ｜ハンズオン

# 変数の巻き上げ
JavaScriptでは変数の巻き上げが裏で起こっています。
以下のソースを実行してみると

“`javascript
console.log(a);
var a = 20;
“`

エラーにならずundefinedが返ってきます。
これは定義前のaという変数を参照しているからです。

裏側では以下のように変換されて解釈されています。

“`javascript
var a;
console.log(a);
a = 20;
“`

var aがスコープの先頭で生成されています。
初期値を設定しないvar変数の値はundefinedですので納得な結果ですね。
ただこのようにアバウトに書いてもエラーで停止せず動作してしまうということは
バグを生みやすいということにもつながります。

# 巻き上げはconstでもletでも起こっている
巻き上げはconstでもletでも実は起こっています。
ただvarとは一点違いがあります。それは初期化のタイミングです。
varは巻き上げが発生した時点でundefinedが代入され初期化されています。
ですから前述のようにunde