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

2021年に気づいた便利なTypeScriptの書き方4つをまとめてみた

#はじめに
今年から本格的にTypeScriptを書き始めたので、そこで個人的に便利だなと思った便利記法4つを選んでまとめてみました。

※個人ブログから技術的アウトプットはQiitaへ引っ越ししたので、こちらは過去に書いたブログとなります。

#1/ 変数末尾に 「 ! 」 をつけることで初期化チェックを割愛
## きっかけ
継承がうまくいかないと思った時に、先輩からレビューいただき学びがありました。

## うまくいかなかったこと

エラーにはなっていないが、冗長的なクラス文

“`typescript
class Personality {
personality: PersonalityEntity;
constructor(personality: Personality, channel: Channel) {
this.personality = {
id : personality.id,
name : personality.name,
…..省略….
age : personality.a

再帰関数とは何ぞや？

# はじめに
Udemyで学習していると、再帰関数に遭遇し、まるで理解できなかったので軽く学習してみました。

# 再帰関数とは?
> 関数内で自分自身の関数を呼び出す関数
> https://www.wakuwakubank.com/posts/463-javascript-function-advanced/#%E9%AB%98%E9%9A%8E%E9%96%A2%E6%95%B0

はて？
関数の中で自分自身を呼び出す関数って何でしょうか？
具体例を見てみます。

# 具体例

“`javascript:main.js
const func = (num) => {
if (num < 3) { return 1; } return num * func(num - 1); } console.log(func(5)); // 60 ``` 仮引数に5を渡した簡単な階乗計算です。 この時のfunc(5)の戻り値は下記のようになります。 ```javascript:main.js return 5 * func(4) ``` 今度は仮引数に4

オールSVGで音楽の五度圏アプリを作ってみた

この記事は [NTTコムウェア Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nttcomware) の25日目（最終日！）の記事となります。

## はじめに
私は建設や工事などのいわゆる”現場”で働く方々が Happy になれるソリューション提案やサービス提供を行なっています。

直近では、図面上の作業空間を確認するWebサービスを、SVGを利用して検討することになりました。

SVGは未経験でしたので、今回はその勉強で学んだことと、試しに作ってみたアプリの紹介となります。

## SVGとはなんぞや
SVG (Scalable Vector Graphics) はWebで画像を表示するための技術です。

https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics

以下のような特徴から、従来のjpegやpngからの置き換えが進み、今後ますます普及することが見込まれています。

* [ベクター形式](https://ja.wikipedia.org/wiki

GitHubのアレをぐるぐるさせてみた

# はじめに

こちらの記事は GitHub Actions Advent Calendar 2021 の最終日の記事です。

https://qiita.com/advent-calendar/2021/github-actions

今回、こんなの(?)を作る GitHub Action を作りました。


（お時間があれば、10秒ぐらい眺めていてください）

# 経緯

実は今年の GW ごろに、GitHub Action を初めて作って、勢い余ってマーケットプレイスにも公開してしまいました。

その時のメモはこちら(?)。

https://qiita.com/yoshi389111/items/4471c7a73f785fed4615

内容としては、GitHub の profile 用 SVG を自動で作成するコマン

運動不足を解消！筋トレガチャアプリを作りました

## 困りごと！
それは筋トレが続かないことだッ！

## 改善策！
なかやまきんに君の筋トレ動画にランダムで遷移するアプリを作りました。
「する！」を押下すると、自宅でできる筋トレ動画27種類のどれかに遷移します。

■ URL：https://matt-note.github.io/kintore-gacha/
■ GitHub：https://github.com/matt-note/kintore-gacha

## 着想
旅ガチャやホテルガチャといったサービスが出てきたことで、○○ガチャおもしろいなーと思い、「筋トレのガチャがあったら面白いのではないか。健康向上に役立つのではないか」と思い、制作に着手しました。

## 制作
制作、、といっても、あらかじめJSONにURLを定義しておいて、ランダムにそのリンクを生成するだけのショボ

2021年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku) ～canvasとの闘いを乗り越えて～

こんにちは。GxPの杉森です。
この記事は、[グロースエクスパートナーズ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/gxp) 25日目、最終日の記事です。
今回は、プロダクトデザイン・プロダクトオーナー及びPJ全体の取りまとめを務めさせていただいた杉森と、今回のプロダクト１番の目玉機能を開発したGxP富岡との共作記事として書かせていただきます。

# :candle:イントロ:candle:
昨年に引き続き、今年も新宿のまちづくり・魅力創出の取り組みの一環として、
Candle Night@Shinjuku イベントにオンラインプロダクトを提供させていただきました。
昨年の記事もぜひご覧ください。
[『新宿中央公園キャンドルナイトの塗り絵用投稿・鑑賞サイトについて』](https://qiita.com/rando-gxp/items/979a79371d79f08e7472)

小田急電鉄さんが2018年に始められた「Candle Night @ Shinjuku Central Park」イベントも今年

TypeScriptで書かれている.vueファイルの割合を算出する

# はじめに
みなさんご存知だとは思いますが、GitHubにはRepository内で使われているプログラミング言語の割合が表示されています。
おそらくですが、あれはファイルの拡張子でどのプログラミング言語なのかを判断しているのでしょう。
さて、JavaScriptのライブラリであるVue.jsでは1つのコンポーネントを拡張子が`.vue`であるファイルを作成、すなわちSingleFileComponentという仕組みで開発していくのが主流ですね。
この場合GitHubのLanguage欄は以下のようになります。

`.vue`ファイルなので当然Vueとして認識されてますね。
9割9分9厘の方は別にそれで何も気にしないと思いますが、`.vue`ファイルの`script`ブロックにはJavaScriptでもTypeScriptでも記述することができるので、`.vue`ファイルがJavaScriptなのか、TypeScriptなのか気になることがありませんか？
私は気になります。

というわけで、プロジェクトの`.vue`ファイル全体からどれくらいの割合がTypeScriptで記述されてい

Next2Dでゲームを作ってみる(中盤)

# 画面を作る
本来はデザインがあり、それをViewに落とし込んでいくのが一般的なフローだとは思うのですが、僕はデザイン力がないので、行き当たりでViewを作っていきます。前日の記事でも書きましたが、見た目は最後に整えるので今日は画面の配置を優先して製作して行こうと思います。

## TopViewModel
NoCodeToolでシンボルとラベルを設定して、動的にオープンニングのMovieClipを生成します。

### OpeningContent
シンボルから動的に生成する為の準備

“`javascript:src/content/OpeningContent.js
/**
* @class
* @extends {next2d.fw.Context}
*/
export class OpeningContent

Amazonリンク短縮(クエリ削除)・タグ付与ブックマークレット

##経緯
– 長大なAmazonリンクがLINEトークを埋めつくした

##三種
1. Amazonの__商品ページで押した場合に__余分なクエリを削除（画面遷移）
1. ①に加え、__他サイトで押した場合に__Amazonホームへ移動（画面遷移）
1. ②に加え、__アソシエイトタグ添付の確認__をはさみ、ダイアログでタグ付URLを表示（OKの場合は非遷移）

##コード

#####1. 商品ページで押した場合に余分なクエリを削除

ブクマ用

“`javascript:
javascript:(function(m){m=location.href.match(/\/(dp|hz\/intuition|gp\/(product|aw\/[a-z]))\/(\w{8,12})(\/|\?|$)/)??false;if(m){window.open(‘https://amazon.co.jp/dp/’+m[3],’_self’);}else{alert(‘Not available on this page.’);}})();
“`

全体

“`javascript:
ja

youtubeの動画を再生しながら下で紙芝居を再生していくスクリプト

youtubeの動画を再生しながら下で紙芝居を再生していくスクリプト

youtubeの動画を再生しながら、下で紙芝居を再生するスクリプトを作成しました。

---

githubURL:https://github.com/NanjoMiyako/YouTubeKamiSiba
サンプルページURL:https://nanjomiyako.github.io/YouTubeKamiSiba/

---

使い方
まず下で紙芝居再生用ファイルを読み込ませてから、youtubeで一緒に再生する
動画のIDをセットボタンでセットします。それから上画面でyoutubeの動画を再生
することで秒ごとの指定でyoutubeの動画を再生しながら下で紙芝居を再生します。

---

紙芝居再生用ファイルの書式
紙芝居再生用ファイルの書式は以下のように作成します。

書式
表示時間1(秒単位),画像URL1
表示時間2(秒単位),画像URL2
…

youtubeの動画再生中に表示時間の2秒前になった時点で画像が切り替わるように
なっています。

JavaScriptでjsonの中身を確認したら[object Object]と表示された場合の対処法

## はじめに
最近、API開発をしていて外部API時のエラーオブジェクトの構造を知りたい時がありました。
しかし、対象オブジェクトをログ出力しても[object Object]と表示されてしまいます。
そこで、オブジェクトの中身を表示する方法を調べたので紹介します。

## 方法1 : JSON.stringifyを使う
以下のようにJSON.stringifyを使う方法です。

“`
console.log(JSON.stringify(object))
“`

他の記事でもよく見かけます。
確かにこれでオブジェクトの中身が表示されるのですが、正直みづらいです。
そこで、次の方法が個人的におすすめです。

## 方法2 : console.dirを使う
以下のようにオブジェクトをconsole.dirで出力すると、良い感じに見やすく表示されます。

“`
console.dir(object)
“`

エンジニアに転向して１年で開発チームのリーダーになるまでに勉強したことをまとめる

# これはなに？
自分は2020年8月ごろにプロダクトマネージャーからエンジニアに転向し、この1年半でバックエンド、フロントエンド、インフラなど色々やっているうちに気付いたらいちチームのリーダーを任されるまでになりました。なのでこの記事ではその間にどんなことを勉強したのかをまとめておこうと思います。

エンジニアになったばかりの人やこれからなる人の一つの参考になれば幸いです。

### 担当プロダクトの技術スタック
バックエンド：Python, flask
フロントエンド：JavaScript, Vue.js
DB：MySQL
インフラ：AWS

# 勉強したこと

メインとしてバックエンドのapi開発をやっていたため、フロントエンドは薄めになっています。

## とりあえず入門
**[Progate](https://prog-8.com/)**
受講コース：Git/Command Line/SQL/Python/HTML&CSS/JavaScript
とりあえず入門するのに手軽でよかったと思います。

**[キタミ式イラストIT塾 ITパスポート](https://www.a

JavaScript Fetch API の解説と使い方

# JavaScript Fetch API について

この記事は、非同期でリクエストを発行し、そのレスポンスを取得するJavaScriptのFetch APIについて解説した上で使い方を簡単に紹介します。

## 非同期処理とは

Fetch APIの最大とも言える特徴は、その非同期性にあります。非同期処理を理解するためには、まず同期処理について理解しなければいけません。

同期（Synchronization）は、プログラミングの文脈において、何かを行う処理を時間的に一致させることを指します。さらに言えば、処理Aを行う際、別の処理Bの完了まで待つことを同期といいます。

同期処理では、待ち合わせする間、他の処理が行えないため、効率が悪くなりがちです。そこで、処理Bの完了を待たずに処理を行うこと、これが非同期処理です。

非同期処理では、ある処理の完了を待たずに（あるいは待っている間に）、他の処理を行えることから、プログラムの効率を高めることができます。

## Fetch APIで見てみる非同期処理

以下は実際に Fetch API を利用して、気象庁ホームページ防災気象情報か

FileMaker の WEB ビューアで Lit を用いて Web Components

# はじめに
## 前書き
* 本記事は [FileMaker Advent Calendar 2021](https://qiita.com/advent-calendar/2021/filemaker) 24 日目の記事です。

## 対象読者
* Claris FileMaker Pro 19 ユーザ
* FileMaker の WEB ビューアにおいて Web Components を触ってみたいという（奇特な）方
* Lit を CDN で触ってみることに興味のある方
* Lit に限らず FileMaker Pro における JavaScript コンポーネント管理について考えてみたい方

## 検証環境
* Windows 10 Pro
* FileMaker Pro 19.4.1
* lit-element 3.0.2
* インターネット接続環境

## Web Components とは？
https://developer.mozilla.org/ja/docs/Web/Web_Components

> Web Components は、再利用可能なカスタム要素を

templateタグを使ってフォームを複製

#はじめに
以前、[「cloneNode()で入力フォームを複製してみた」][article]という記事で入力フォームをcloneNode()を使って複製する記事を投稿した。
しかしその記事内のコードではフォーム内のテキストまで複製されてしまう。
ここではHTML5より追加されたtemplateタグを使ってフォームのテンプレートを作成し、それを複製することで、何も入力されていないフォームを追加していく。

#要件
「追加」ボタンをクリックし、名前、年齢、性別を入力するフォームを複製したい。(最大8人)
　　　　　　　　　　　⇓
![スクリーンショット (177).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388451/db272ac3-

Mapbox GL JSのスワイプ機能を試してみた

# 概要
Mapbox GL JSのスワイプ機能を弊社のB2B webサービス（地域や時間などで検索し取得したSNS投稿データと地図をマッピングさせる）上で使えるかどうかを調査も兼ねて試してみました。

[弊社のB2B webサービス CITY INSIGHT](https://cityinsight.nightley.jp/)はフリープランもありますので、気になる方はチェックしてみてください。

**⚠️ 現状の調査段階としては期待通りの結果を得られませんでした。以下の内容はあくまで参考程度にお読みください。引き続き調査し、進捗があれば随時更新していく予定です。**

# MapBoxのスワイプ機能とは？

https://docs.mapbox.com/jp/mapbox-gl-js/example/mapbox-gl-compare/

# スワイプ機能の作成方法

## パッケージをインストール

“`
npm install mapbox-gl-compare
“`

## インストールしたパッケージをimportする

“`js
import MapboxCompar

JavaScriptの基本「プロトタイプ」

プロトタイプとは

実はJavaScriptの関数オブジェクトは、標準でprototypeプロパティを持っています。

試しに関数を作ってみます。

オブジェクトの中に何も記述しておりませんが、コンソールはしっかり表示されます。

“`javascript

function F() { }
console.log(F.prototype)

“`

デフォルトでは空のオブジェクトを参照しています。
この関数F()のprototypeプロパティがが参照しているオブジェクトをプロトタイプオブジェクトといいます。

ではこのプロトタイプオブジェクトにpropというプロパティを作り、そこに値を入れてみましょう

“`javascript
//プロトタイプオブジェクトのプロパティ
F.prototype.prop = “プロトタイプ”

//インスタンス化
let obj = new F();

//propはobjオブジェクトのプロパティではないがそのように使える
console.log(obj.prop)

“`

prototypeオブジェクトのプロパティ

誰も教えてくれない！知らないと事故につながるエンジニアの隠れた5つの常識

この記事は[モチベーションクラウドシリーズアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/mcs)の12日目の記事です。

こんにちは。モチベーションクラウドシリーズのテックリードをしている江上です。
突然ですが、今までに**「常識」**という言葉で傷ついたり、傷つけた経験はありませんか？
例えば、失敗した時に「なんでxxxしてないんだ！そんなの常識だろ！！」と先輩に怒られたり、「洗濯物はパンパンしてから干す！常識でしょ！！」と奥さんに怒られたり。。。
常識って、その人やその界隈では当たり前すぎるために、**継承が困難。なのに、知らないと事故につながる**とても大事な知識です。
そこでこの記事では、知らないと事故につながるような、エンジニアの隠れた常識を記していこうと思います。
あくまで、僕が今まで経験した職場や、他人から聞いた話をまとめた個人的な見解です。
「他にもこんな常識あるよ！」という方はコメントで是非教えていただければと思います。

※ 各所でRuby on Rails + MySQLを前提にした表現が出てきます

Vue.js2で作ったサイトがIE11で表示されなくなった調査の軌跡

# 前提

`pakcage.json`に`browserslist`は指定してあって、ある時点まではIE11でも動いていた。

# エラーの原因を特定


こちらの記事と似たような事象だと思ったが。

https://qiita.com/maroKanatani/items/fbb7c96b5c49edd81339

キャプチャのようにエラーがバンドルされて１つになったJS内で起きていたためどこに原因があるのか全く分からなかった。

そこでまずはこちらの記事を参考に読み込んでいるモジュール単位にビルド後のファイルを分割するようにした。

https://jacklyons.me/blog/how-to-fix-vuejs-not-working-in-ie11/

“`j

JSでの日付フォーマット

#実装

“`dateFormat.js
/**
* 日付フォーマット
* @param {Date} date date
* @param {string} fmt format
* @returns {string} StringDate
*/
export const dateFormat = (date, fmt = ‘YYYY/mm/dd’) => {
let ret;
const opt = {
‘Y+’: date.getFullYear().toString(), // 年
‘m+’: (date.getMonth() + 1).toString(), // 月
‘d+’: date.getDate().toString(), // 日
‘H+’: date.getHours().toString(), // 時
‘M+’: date.getMinutes().toString(), // 分
‘S+’: date.getSeconds().to