JavaScript関連のことを調べてみた2023年02月14日

02/13/2023のように日付が外国表記になっているHTML要素のdata属性を、CSSの追記のみで2023年2月13日のような表記にやる方法はありますか？

タイトルの通りなのですが、以下のようなHTML要素を、data-contentの属性を使って、2023年2月13日、または2023/02/13のような表記に変更する方法はないでしょうか？

“`HTML:index.html
02/13/2023
“`

data-content属性は使わず、hogeclassになにか文字列リバース？のようなことができるやり方があれば、それでも良いです。
最終的に日付が日本表記にしたいです。

やり方分かる方いましたら、ご教示いただけますと助かります。
宜しくお願い致します。

javascript学習備忘録　for文

フロントエンドエンジニアになって約半年ほど。。
普段はVue.jsを使って開発しています。
フレームワークを使って開発を行っていく上でどうしてもJavaScriptを書かないといけないことが増えてきました。
その学習したことを備忘録として残していきます。
今回はfor文

## for文
“`JavaScript:
for(初期化式;条件処理;増減式++){}
基本的にはこの形で書いていく。
“`
例文１
“`
for (let i = 0; i <= 10; i++) { console.log("hello world"); } ``` 出力結果はhello worldが10回繰り返されます。 これは簡単。 例文2 ``` for (let i = 0; i < 10; i++) { console.log("hello world"); for (let j = 0; j < 3; j++) { console.log("hello earth"); } } ``` 次の例文ではforの中にforをネストした書き方となる。 出力結果はherro w

[メモ]Promise.allの各非同期関数の結果は配列で取得できる

こんにちはみなさん

昨日ちょっと`Promise.all`の挙動で議論があったので、挙動をメモっておこうかなと思いました。まあ、仕様を読み込めばわかるやろ！って話なんだろうけど、手っ取り早くどうなるんだっけ？ってのを思い出すコストがめんどいんです。

# Promise.all
`Promise.all`は、引数に非同期関数(Promise)の配列をとって、それぞれを同時に実行してその結果を返すものです。

“`promiseAll.js
const timeout = async (time) => {
console.log(`${time} start`)
await new Promise(res => setTimeout(res, time))
console.log(`${time} end`)
return time
}

Promise.all([
timeout(500),
timeout(300),
timeout(100)
]).then(res => console.log(res))
“`
`ti

Google Map APIでカスタムマップを作成しよう

[](https://asameshicode.com/custom-google-map/)

今日はGoogle Map（グーグルマップ）のAPIを使ってカスタムマップを作成してみましょう！ワードプレスを使ったことがある人は簡単にプラグインを使って、カスタムマップを作成することができますね。今日は、同じことをマニュアルで行います。

これで不動産の物件を地図に表示したり、お店の位置情報を紹介することなどに使えたりすると思います。

完成したコードはGitHubから見てください。

https://github.com/TraitOtaku/custom-google-map

## **注意**

クレジットカードの登録なしでもAPIコールはかけられますが、Googleからのエラーのポップアップが表示されます。

高卒未経験からフロントエンドエンジニアを目指す奮闘記・初投稿

#自己紹介
初めまして、chibanoyatsuと申します。
タイトルにもあるように私は現在22歳で高卒です。

知人の紹介で軽いホームページ制作のバイトはさせて頂いていますが、エンジニアとしては未経験で、エンジニア転職をしてバリバリ働くのを目標にしています。
目標にむけてスクールに入会をしましたので、学んだことのメモ、知識定着の確認として記事を投稿していきます。

つたない文章ですが、ぜひアドバイス等頂ければ幸いです。

Babylon.js の公式ミニマムサンプル の HTML に Webカメラの映像の表示を足してみる

この記事は、以下の記事の続きです。

●Babylon.js を実行するミニマムな HTML について調べてみた ＆ ミニマムな変更を加えてみる – Qiita
　https://qiita.com/youtoy/items/7ccaab2d8f90c1f5ff76

今回の記事では、「Webカメラ映像を利用する」という内容を追加したのですが、その理由は「Webカメラの映像に対する画像認識処理を行う仕組み」を作って試したかったためです（※ 具体的には以下の内容）。

これまで、よく #p5js との組み合わせで使っていた #MediaPipe JavaScript版。

それを #BabylonJS と組み合わせる話が、 #BabylonJS勉強会 の Discord で出ていたので、Hands との組み合わせを試してみた！

Sphere の位置を、手の動きで操ってみるテスト！#MadeWithTFJS #TensorFlow #TensorFlowJS pic.twitter.com/sBoVpzt5yo

— you (@youtoy) February 12, 2023

これまで、ブラウザ上での「Webカメラの映像に対する画像認識処理を使った仕組み」は、描画の部分にp5.js という描画ライブラリを組み合わせたものをいろいろ試してきました。

しかし、それと似たようなことを Babylon.js でやってみようと思った時、そもそも Babylon.js で Webカメラを利用するというのは試したことがなかったので、まずはその部分をシンプルに実現する内容を作ってみました。

## B

JavaScript でテトリスを開発する その 4

# JavaScript でテトリスを開発する その 4

第 3 回です。今回は仕様 ④ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に動かせる を実装していきます。

① 画面サイズは縦 20 ブロック分、横 10 ブロック分である →[その 1 参照](https://qiita.com/namakoRice/items/4933e77a41b2ac359229)
② 4 つの正方形ブロックで構成されるテトリミノがある →[その 2 参照](https://qiita.com/namakoRice/items/4fefc6557af480d8e9a5)
③ テトリミノは 7 種類ある →[その 3 参照](https://qiita.com/namakoRice/items/fd4489b04b511021bd7e)
④ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に動かせる
⑤ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に回転できる
⑥ テトリミノは画面最下部または他ブロックの上部に面したとき動かせなくなる
⑦ テトリミノは

JavaScriptのArray.prototype.join()のデフォルト引数

すぐに読めます。

# 導入
先日、JavaScriptのbuilt-in objectの`Array.prototype.join()`の仕様を理解していなかったことでかなり初歩的なバグを産み出しかけました。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join

# 本文
具体的には、**デフォルト引数**の存在です。
以前は「引数で受け取った値でArrayインスタンスの全要素を結合してできた文字列を返す非破壊的なメソッド」だよね〜くらいの理解だったのですが、このメソッドはデフォルト引数に`,`を持ちます。上記のMDNのサンプルコードをそのまま借用します。

“` typescript
const elements = [‘Fire’, ‘Air’, ‘Water’];

// case1
console.log(elements.join());
// Expected output: “Fire,Air,Water”

// case2
console

JavaScript でテトリスを開発する その 3

# JavaScript でテトリスを開発する その 3

第 3 回です。今回は仕様 ③ 7 種類のテトリミノの作成 と ⑨ テトリミノはランダムに生成される を実装していきます。

① 画面サイズは縦 20 ブロック分、横 10 ブロック分である →[その 1 参照](https://qiita.com/namakoRice/items/4933e77a41b2ac359229)
② 4 つの正方形ブロックで構成されるテトリミノがある →[その 2 参照](https://qiita.com/namakoRice/items/4fefc6557af480d8e9a5)
③ テトリミノは 7 種類ある
④ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に動かせる
⑤ テトリミノは画面内でかつ他ブロックに干渉しなければ自由に回転できる
⑥ テトリミノは画面最下部または他ブロックの上部に面したとき動かせなくなる
⑦ テトリミノは画面上部に生成される
⑧ テトリミノは一定間隔で下方向に移動する
⑨ テトリミノはランダムに生成される
⑩ 横

【JavaScript・jQuery】コードの中にブレークポイントを仕込む方法

# コードの中にブレークポイントを仕込む方法

## 発端
コードの中にブレークポイントを置く必要があったため。

## 結論
“`js
debugger;
“`
と記載するだけ。

【JavaScript】ES2023の新機能が何故かいまさら追加されていた

[ES2023その2](https://qiita.com/rana_kualu/items/49c51f4002043b97c59a) / [ES2023](https://qiita.com/rana_kualu/items/84f66fe970f7feccf367) / [ES2022](https://qiita.com/rana_kualu/items/8bafecd760ae69cfac41) / [ES2021](https://qiita.com/rana_kualu/items/ae3297dd2974fcf047c4)

先日[ES2023では新機能が2個しかなかった](https://qiita.com/rana_kualu/items/84f66fe970f7feccf367)という話をしましたが、どういうわけか2023/01/30になってからES2023が[2個追加](https://github.com/tc39/proposals/commit/d2a5cf370e4a9dc8b0249ad8a8386cd1280db815)[されました](https:

プログラミング学習記録　初学者

エンジニア転職を目標に2月からプログラミング学習を始めました。

# 学習進捗
・Progate HTML＆CSS 最後まで

・ドットインストール　HTML＆CSSセレクター編まで

・Progate JavaScript Ⅲまで

# 現時点の雑感
・Progateとドットインストールの併用は理解がより深まってとても良い。

・Notionでのノートとりはコードも記載できるので便利。

・今の所まだ挫折をしていない。挫折理由のほとんどが「不明点を聞ける環境がないから」らしい。Progateやドットインストールを中心とした基礎学習で挫折しなくても、ポートフォリオつくりに入った時にどうなるか。対応策を考えておきたい。

・新しいことを学ぶ楽しさや知らなかったことを知れる面白さを感じる。ただし自分に適性があるかはまだ不明。

# 今後に向けて

エンジニア転職を叶えるには週に30〜40時間の学習時間が必要とのこと。
平日の朝の時間を有効活用していきたい。
とりいそぎProgateとドットインストールでJavaScriptの学習を終わらせる。

paizaラーニング レベルアップ問題集 二分探索メニュー応用編 JavaScript 記念写真

記念写真 (paizaランク A 相当)

https://paiza.jp/works/mondai/binary_search_advanced/binary_search_advanced__photo

# 解答例(C++の場合参考)
ジャンプした高さの最小値で二分探索します。

各人が最小値の高さmid以上になるためには、燃料を`(最小値の高さ/ジェットパックの燃料 1 つにつき高さ A)の切り上げ`の個数、すなわち、`Math.ceil(mid / A)`個、使います。

全員、mid以上になる時に使った燃料がK個を満たすか調べます。

***

探索範囲rightの初期値が、問題文によると

>1 ≦ A_i ≦ 1,000,000,000 = 10^6

なのですが、1,000,000,000 と 10^6、どちらが正しいかわかりませんでした。paizaに問い合わせました。
模範解答から、ジャンプの最小値の探索範囲の最大値、右端rightを1000000000000000001=10^18+1にしたら、うまくいきました。

ジャンプの高さは、A_i * Kで、Kの最大値

ChromeExtensionでポップアップからコンテンツへメッセージ連動させる

前回記事[日々の業務をプチハック – Chrome Extension(拡張機能)を作ろう！](./cf983b70d0fa4efd8718)では、ポップアップとコンテンツスクリプトの用意までを確認しました。

今回はポップアップとコンテンツを連動させます。

## 仕様の整理

簡単に、こんな仕様で動作するものを作っていきます。
ポップアップ側で入力した値で、Googleの画面を操作する実装をしていきます。

“`mermaid
sequenceDiagram
ポップアップ->>ポップアップ: 検索ワードを手入力
ポップアップ->>コンテンツ: ボタン押下で検索ワードを送信
コンテンツ->>コンテンツ: スクリプトで検索ワードを設定
コンテンツ->>コンテンツ: スクリプトで検索ボタンを押す
コンテンツ->>ポップアップ: 処理完了を通知
“`

## manifest.jsonの用意

まずは `manifest.json` を用意します。
ポップアップ用(`action`配下)とコンテンツ用(`content_scripts`)を定義しています。

“`

自己紹介とポートフォリオ作成を一括で行ってみた

駆け出しエンジニアの坂口諒です。

「自己紹介をしながら自分の技術レベルを伝えることができれば一石二鳥だ！」

ということで、自己紹介をポートフォリオとして作成しました。

ここではその過程と、困難に感じた点、ポートフォリオとしてのアピールポイントなどをまとめさせていただきたいと思います。

※ [自己紹介サイト](https://work.ryo-sakaguchi.com/)にも本記事と同様の内容を載せております。

## 方法

Webサイト制作の流れは以下の通りです。

1. 勉強
2. デザイン
3. 技術選定
4. 開発

また開発工程では以下のような作業を行いました。

– 実装
– 細かい作業
– テスト
– CI/CDの設定
– ドメインの取得
– CDNの設定
– SSL化
– OGPタグ設定

以下では各工程の内容について述べたいと思います。

### 技術選定

#### 技術選定の基準

技術選定の第一の基準は「広く使われていること」です。そのような技術は就職先で活用できる可能性が高く、また独学でも不明点を解決

JavaScript 勉強　日報

# はじめに
こちらの記事は

**「業務でつまづいたので1からJavaScriptを勉強し直す」**

と言う記事の日報用記事です。まだ上記の記事を読んでいない方は是非こちらからご一読よろしくお願いします。
↓ ↓

https://qiita.com/kohta9521/items/be4e189cd0a1c2eab913

### 2/13
– 計画を立てた
– Progate JavaScript 第1章　終了
–

【実録】ChatGPT と格闘して BizRobo! の拡張機能を作ったが、こういう感じ？

## はじめに

前回 ChatGPT を軽く触ってみた感想を書きましたが、やっぱりもう少し可能性を探ってみようかなと思い今回は実際に利用できそうなサンプルプログラム作成に挑戦します。

https://qiita.com/ParakeetOnTheHead/items/f5ab12a5d72f57145ca0

## 拡張機能？の整理

実際に使えそうなサンプルと言ってもすぐには思い浮かびませんが、先日社内のチャットで偶然目にした「BizRobo!でCSVをExcelに変換するにはどんな方法がある？」というやり取りに着想を得ました。

ということで今回は BizRobo! がCSVファイルををExcelファイルに変換する機能のサンプルを ChatGPT と一緒に作っていきます。

まじめに考えると「●●の場合は？△△の場合は？」など細かにケースを挙げたうえで要件を整理する必要がありますが、今回はシンプルに以下の通りとします。

– CSVファイルをExcelファイルに変換して同名ファイルで出力できること。
– ファイル読み込み時の文字コードを「UTF-8」か「Shift_JIS」で選

業務でつまづいたので1からJavaScriptを勉強し直す

# はじめに
この記事を焦って書いています。
理由としてはJavaScriptが全然書けなかったからです。
私は現在文系の大学１年生です。エンジニアに将来なるべくインターンに参加させてもらっており、業務として主にフロントエンドの開発を任されています。
そこでやることになった業務内容にReactを使用したものがありました。これまで私はReactを独学で勉強していたことがあったため出来るだろうと自分の力を過信してしまっていました。
その結果見事に詰まり1からJavaScriptの勉強をしっかりと行うことを誓いました。

### 簡単な自己紹介
現在都内の大学に通う大学１年生です。
大学では法学部法学科に所属しています。
プログラミングは高校３年生の冬(2022年1月)にはじめ独学で進めてきました。
大学生限定プログラミングコミュニティ「ENTER」の代表を務めさせていただいています。
インターンは２社参加しており、片方がJavaを使用した社内ツールの作成、もう片方がフロントエンドの開発を行っています。

### なぜ書けないのか(原因)
原因は大きく分けて２つあると考えています。

**1

郵便番号から住所を補完するコード

# 概要

– Webの申し込みフォームなどで郵便番号を入力すると住所が自動的に補完されるコードを書きます。
– 無料の[郵便番号API ポストくん](https://postcode.teraren.com/)を使いました。

## 調査

郵便番号から住所を呼び出すときには以下のようなURLで呼び出すだけです。

“`shell
% curl -s https://postcode.teraren.com/postcodes/1600023.json | jq
{
“postcode_type”: “area”,
“jis”: “13104”,
“old”: “160”,
“new”: “1600023”,
“prefecture_kana”: “トウキョウト”,
“city_kana”: “シンジュクク”,
“suburb_kana”: “ニシシンジュク”,
“prefecture”: “東京都”,
“city”: “新宿区”,
“suburb”: “西新宿”,
“street_address”: null,
“office”:

【Vue】初期カーソル位置を特定のinput 要素に設定する

## やりたいこと
例えば検索ページにおいて、最初から検索窓にカーソルがフォーカスされていたら、ユーザーに優しいですよね、

ということでvueでカーソル位置を指定する機能を実装します。2分で終わります。

## 実装
１.カスタムディレクティブを作成します。

“`js:main.js
const app = createApp(App)

app.directive(‘focus’, {
mounted(el) {
el.focus()
},
})
“`

２.フォーカスさせたいinputに対して、v-focusを付与します。これで完了です。

“`vue:search.vue

“`

## 結果

ページを開くと自動で検索窓にフォーカスされるようになりました。
![スクリーンショット 2023-02-11 16.23.39.png](https://