f@ctor

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

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

PythonコードをJavaScriptで書き直した時に困ったこと

# 目次
1. [困ったこと](#anchor1)
1. [配列の最後の要素を取り出す方法](#anchor2)
1. [配列のコピー(参照渡しと値渡しの違い）](#anchor3)
1. [参照渡し](#anchor4)
1. [値渡し](#anchor5)
1. [配列へ代入と削除（appendとextendとremove)](#anchor6)
1. [追加](#anchor7)
1. [削除](#anchor8)
1. [配列のfor文(JSにはいくつか書き方がある)](#anchor9)
1. [リスト内に要素が含まれているか](#anchor10)
1. [リストの中身をシャッフルできない(random.shuffle(list)が使えない)](#anchor11)
pythonで書いていたコードをJSに書き直す作業をした時の備忘録。
今後JS(Vue）を使うことが増えると思うので、忘れないように記録しておきます。

困ったこと


– Pythonで使えたモジュールがJSでは使えない

元記事を表示

JavaScriptで列挙型(Enum)っぽい曜日(DayOfWeek)をSymbolを用いてやってみる

そもそもJavaScriptは曜日をなぜか数字で管理しています。(Dateクラス)
全く現代的ではないため、JavaのEnum型DayOfWeekみたいな感じにできたらなと思って書いてみようと思いました。

[JavaScriptでEnumを定義する – Qiita](https://qiita.com/dich1/items/4878ba4b089b3fe7ff30)
調べてみると、上記記事のコメント欄でSymbolを使うのはどうか？と書かれていました。
Symbolとは文字列引数を用いて唯一な定数を生成するものです。ref: [Symbol – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol)

そんな感じで書いてみました。

“`js
const DayOfWeek = {
SUNDAY: Symbol(‘日’), // 0
MONDAY: Symbol(‘月’), // 1
TUESDAY: Symbol(‘

元記事を表示

Leap Motion で手や指の向きを取得して p5.js Web Editor上の描画に連動させる（JavaScriptライブラリ「leap.js」を利用）

ここ最近書いた、以下の記事でも扱っている Leap Motion ＋ JavaScript の話題です。

– [Leap Motion の JavaScriptライブラリ（leap.js）のプラグイン「leap-plugins.js」を試す： Hand Entry のお試し（p5.js Web Editor上で） – Qiita](https://qiita.com/youtoy/items/dcad3166d408d2ed2600)
– [バニラな JavaScript や p5.js で Leap Motion の情報を取得する（leap.js ではなく WebSocket を利用） – Qiita](https://qiita.com/youtoy/items/efc4da1feee26186f565)

今回は、手や指の向きを取得するための処理や、それに必要な仕様の情報について書いていきます。

### 今回の話に関わる動画
今回の「Leap Motion で取得した手や指の向きの情報を、p5.js Web Editor上の描画に連動させる」という話について、それを動作させた

元記事を表示

Webフロントエンドのプロを目指すためのコミュニティ – Frontier

https://zenn.dev/frontier/articles/20220424-hello-zenn のクロスポストです。

—

![](https://frontierjs.herokuapp.com/ogp.png)

[Frontier（フロンティア） | フロントエンドのプロを目指す学習コミュニティ](https://frontierjs.herokuapp.com/)

## Frontier とは

Frontier（フロンティア）は JavaScript を中心として、Web のフロントエンド領域を学習したい方のためのオンラインコミュニティです。

## コミュニティを作ろうと思ったきっかけ

[LINE オープンチャット](https://openchat-jp.line.me/) をご存知でしょうか。

ここではさまざまなテーマで作成されたトークルームに入り、大勢のメンバーと議論をすることができます。LINE のアカウントを使いますが、トークルームごとに個別の名前を設定できるため、匿名性が担保されています。

筆者もこのオープンチャット上でプログラミング

元記事を表示

Progate:js 4day メモ

**オブジェクトと関数**：オブジェクトの値の部分には、関数も用いれる！

![スクリーンショット 2022-05-03 2.07.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1486524/e86464ae-5e90-4490-ff83-3568d1c4573c.png)

**定数名.プロパティ名()**でオブジェクトの関数呼び出し

const animal = {
　　name:”レオ”,
　　age:3,
　　greet:() => {
　　　　console.log(“こんにちは”);
　　}
};

console.log(animal.name);

↓

レオが出力！

animal.greet();

↓

こんにちはが出力！

**クラス（設計図）**： **class クラス名 {**

**}**　でクラス用意できる！

**インスタンスの生成**：**new クラス名()**;でインスタンス生成！

class Animal {
}

const animal =

元記事を表示

【１０日目】12星座判定アプリの作成 [Monacaを使用]

今回は入力した日付から12星座を判定して結果を表示するプログラムを作ります。開発にはMonacaを使用しました。
このプログラムの目標としては、配列などを活用して判断の処理をできるだけ短くすることです。

完成したプログラムはこちらです。解説は後半でまとめて書きます。

“`html




元記事を表示

V-bind 文字列 連結はこちら

Vue.jsはじめました。

詰まったのでメモ。

## 答え
“`html

    {{ index }}番目：{{ item }}

“`

元記事を表示

StripeのPayment Linksで、メールアドレスを事前入力できるようにする

通販やメディアサイトなど、会員機能を持つアプリケーションで決済機能を組み込む場合、Payment Linksを利用すると「メールアドレスの二重入力」が発生します。

StripeのPayment Links / Checkoutでは、メールアドレスの入力が必要です。
が、会員システムを持つアプリケーションでは、顧客はすでにメールアドレスをアカウント作成時に入力しています。

そのため、Payment Linksを利用した支払いリンクをそのまま組み込むと、決済時にもう一度メールアドレスの入力を要求されてしまいます。

この状況を解決するのに利用できるのが、`prefilled_email`クエリパラメータです。

## 支払いリンクに`prefilled_email`クエリでメールアドレスを追加する

通常の支払いリンクは、`https://buy.stripe.com/test_xxx`のような形です。

ここに`prefilled_email`クエリを追加しましょう。

`https://buy.stripe.com/test_xxxx?prefilled_email==test%4

元記事を表示

非同期時の送信ボタン制御について

# 記事の内容
非同期での送信ボタン制御を実装する中で色々と躓いたため、備忘録も兼ねて記録として投稿しました。

今回は、XMLHttpRequesを使用して JavaScript から非同期的にデータを送信する方法をご紹介いたします。

# 完成形

[![Image from Gyazo](https://i.gyazo.com/0b3d2fa3696586e4a03339fcda9dc771.gif)](https://gyazo.com/0b3d2fa3696586e4a03339fcda9dc771)

# 完成形のコード
modelオプションに設定している`@pdf`は、コントローラで定義しているインスタンス変数になります。
`gem`は`wicked_pdf`を使用しており、ここではPDFファイルを生成する処理を記述しております。

https://qiita.com/inoue9951/items/4498e5d130702d884352

※ コントローラ、フォーム部分は一部割愛しております。

“`ruby:order_page.html.erb
<%= form

元記事を表示

ゆめみのフロントエンドコーディングテストをベースにアプリを作ってみた話

# 初めに
こんにちは、フロントエンドを少しやっているエンジニアっぽい人です。
最近まとまった時間ができたので何か作りたいなーって思っていたらこんな面白そうなツイートを見つけました。

Qiitaで有名なやめ太郎さんのツイートです。
おー、いいの発見と思って作ってみることにしました。

ざっくりですが、どのように実装したのか自分の振り返りも込で記事にまとめてみようと思います。

###### 実際に作成したもの
[githubリポジトリリンク](https://github.com/HIROYUKI20200507/yumemi-coding-test2)
[つくったもの](https://yumemivuechart.web.app/)

# 開発環境

macOS “11.6.5“
node “16.14.0“

“`json:packaage.json
{
“name”: “yumemi-coding-test2”,
“version

元記事を表示

React + TypeScript: レンダープロップ

React公式サイトに、「[レンダープロップ](https://ja.reactjs.org/docs/render-props.html)」というテクニックが紹介されています。コンポーネントのプロパティ(多くの場合名前は`render`)として関数を渡し、返されるのはJSXのReact要素です。すると、ロジックの実装とJSXのレンダーが切り分けられます。そうすることで、ロジックを使い回しやすくしようという工夫です。

# レンダープロップは使わずに簡単なカウンターをつくる
もっとも、公式サイトの説明やコードは、少しわかりにくく、すぐに試せるかたちではありませんでした。そこで、もっとありがちで簡単な、カウンターの作例を採り上げましょう。ここでは、まだレンダープロップは使いません。加算と減算のボタンで数値を増減するだけの例です(コード001)。

#### コード001■ありがちなカウンターアプリケーション
“`react:src/CounterDisplay.tsx
import { FC, MouseEventHandler } from ‘react’;

type Props

元記事を表示

redisでreturn Promise.reject(new errors_1.ClientClosedError());というエラー対応

# redisの「return Promise.reject(new errors_1.ClientClosedError());」というエラーについて

# 結論（どうすればよいか）

“`json
“redis”: “^4.1.0”
“`

から

“`json
“redis”: “^3.0.0”
“`
に`package.json`を変更しろ

なお、なぜかは知らん

“`docker
# 掃除
docker compose -f docker-compose.yml -f docker-compose.dev.yml down
docker compose -f docker-compose.yml -f docker-compose.dev.yml up -d –build
“`

# エラー内容
return Promise.reject(new errors_1.ClientClosedError());

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

元記事を表示

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

完全メモ用

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

そんな時に役立ったのが以下のようなfunction。
![Screen Shot 2022-05-06 at 9.20.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2646237/7d1c6393-a814-6289-aa39-3aa09cd3eb2a.png)

もちろんこの通りに書く必要はないし、何ならこんなのもあり。
![Screen Shot 2022-05-06 at 9.22.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2646237/5ad0c687-d9ee-a373-77be-a0feaf1624c7.png)

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

元記事を表示

【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 キーを空にすることはできません。また、キーに $#[]./ を含めることはできません**と表示されたため備忘録
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/accc6dfc-ff22-0bae-1e03-c97c2562d8d7.png)

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

### 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”`を指定しない場合、添付ファイルの情報を送信できないため、サーバー側では添付ファイルを扱えない。….多分。

“`

元記事を表示

OTHERカテゴリの最新記事