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

JavaScriptで追加機能実装

# HTMLでの実装
HTMLは簡単な部分の実装です。
“`index.html

追加

未完了

TODOです

完了
削除

Chart.jsで折れ線グラフを作るときの小ネタ

# はじめに
アドベントカレンダー8日目はJSライブラリのChart.jsの小ネタ紹介です。
2022年前半頃に求人統計データをグラフで表現するためにChart.jsを利用しました。
Chart.jsはかんたんにグラフが導入できるライブラリではありますが、細かいレスポンシブな対応やデザインの調整で苦労したので振り返りも兼ねてTipsを紹介しようと思いました。

## 対象となる読者
– グラフのJSライブラリを選定中の方
– 本記事で紹介するChart.jsの折れ線グラフTipsを求めていた方(コピペ歓迎)

## 実行環境
chart.js v3.7.1
google chrome v107

# ChartJSとは？
棒グラフや円グラフ、レーダーチャートが描画できるOSSのJSライブラリです。

https://www.chartjs.org/docs/latest/

### なぜ選定したか？
Chart.jsの他にも[Highcharts](https://www.highcharts.com/)や[Google Charts](https://developers.googl

AR.js の世界へようこそ！ ３歩でわかる お手軽 拡張現実

恒例の年末に記事を書くやつ向けの記事です。
今回は AR.js についてご紹介します。

（過去の記事）
+ 2019 – [Three.js](https://qiita.com/dsudo/items/42da9c7f45ed6147395e)
+ 2020 – [Google Earth Studio](https://qiita.com/dsudo/items/43c8c443ced83f657e14)
+ 2021 – [Deck.gl](https://qiita.com/dsudo/items/b1db5f965d1eb58e8f38)

# この記事でやってみること

+ Step 1 : HTML のみで AR を実現
– AR.js Studio (Marker based)
– QR コードの生成
– 3D モデルの取得
+ Step 2 : エンティティの動的追加
– AR.js Studio (Location based)
– 位置座標の取得 (Google Map)
– 相対位置／座標の角度と距離の対応
+ Step 3 :

地図(Google Map)の任意地点に円を描き、人口データの属性を持つ町丁目ポリゴンを取得し、表示する

# 概要説明
Google Mapを使用し、地図の任意地点に円を描き、円内のエリアを人口データの属性を持つ町丁目ポリゴンで表示させ、データを取得してみました。この記事は[Maps JavaScript APIを使ってGoogle Mapに町丁目ポリゴンを表示してみる](https://qiita.com/yan_x/items/c069c8fb7c5d2648fe50)の拡張内容です。Google Mapの地図表示や地図上のポリゴン表示に興味がある方は上記の記事を一読頂ければ幸いです。

## 使用するもの
* Google Map
* Maps JavaScript API
Google Mapで提供されている API の中の一つで、独自のコンテンツと画像を使って地図をカスタマイズして、ウェブページおよびモバイルデバイスに表示できます。

https://developers.google.com/maps/documentation/javascript?hl=ja

* PHP
* JavaScript
* 町丁目ポリゴン（TerraMap API）
町丁目とは行政界の一つで「

javascriptもモダンなオブジェクト指向で書こうよ(サンプルコード有) 前編

# javascriptはオブジェクト指向言語なのに、手続き型で書いてしまいがち…

javascriptはオブジェクト指向言語であるものの、ちょっと特殊な言語です。Java、C++、C#、Rubyといったクラスベースの言語とは違い、プロトタイプベースのオブジェクト指向言語であるというのがオブジェクト指向で書きづらい要因になっているように思います。

クラスベースの言語であれば、まずはともあれクラスを作ってインスタンス化する…という一連の流れが自然と書ける一方で、javascriptでは「DOMを操作する」という任務を任されることが多いために、要素を取得して、計算して、要素を書き換えて、ということを手続き的に書いてしまう。

そして、記述量が多くなればなるほど待ち受けるのは、、、

「このjsはどこで何をやってるんだ…」
「同じようなコードがいろんなところでコピペされてる…」
「この処理と同じことを別のページでもやりたいけど、コンポーネント化されてないからコピペしてちょっと改変するしかない…」

という**可読性・メンテンス性・拡張性の低さ**です。(私も1ページ1

Web Componentsを実装する

# はじめに
Web Componentsは再利用可能でカプセル化されたコンポーネントを作る機能です。
Web Componentsを実装するには3つの機能を利用する必要があります。それぞれ別記事にて紹介しましたので是非ご覧ください。
– [Custom Elements](https://qiita.com/KokiSakano/items/1ffa65a1adb3f7c11112) コンポーネントの要素と動作を定義するための機能です。
– [Shadow DOM](https://qiita.com/KokiSakano/items/21e511313e64e70c2221) カプセル化を担う機能です。
– [HTML Template](https://qiita.com/KokiSakano/items/c8f75f4741beca9f02c5) 再利用を可能にする機能です。
この記事ではこれらの機能を組み合わせてWeb Componentsの実装を行います。

# 実装
例として`tier-table`という名前でtier表(ランキングボード)を作成する要素を作ります。細かな

【図解】Hydration（ハイドレーション）をなんとなく理解したい

この記事は、[Ateam LifeDesign Advent Calendar 2022](https://qiita.com/advent-calendar/2022/ateam-life-design) シリーズ1の7日目の記事です。

## ハイドレーションとは？
> ハイドレーションまたはリハイドレーションは、クライアント側JavaScriptが、静的ホスティングまたはサーバー側レンダリングのいずれかによって配信される静的HTML Webページを、イベントハンドラーをHTML要素にアタッチすることによって動的Webページに変換する手法です。
([Wikipedia](https://en.wikipedia.org/wiki/Hydration_(web_development))より)

つまり、サーバーサイドレンダリング(SSR)などで事前にサーバー側で作られたHTMLを、JavaScriptで動的にしていくプロセスのこと。

## ハイドレーションの流れ
### 1. サーバー側でHTMLを生成
– SSRや静的サイトジェネレート(SG)など

### 2. サーバー側で

SvelteKit デモアプリからルーティングについて解説する

# はじめに

`svelte`では[svelte-routing](https://github.com/EmilTholin/svelte-routing)を用いてルーティングを実装したことがありましたが、`SvelteKit`では標準でルーティングが用意されています。
今回は公式デモを構築しつつ、ルーティングについてまとめていく。

# SvelteKitデモアプリの構築

1. `SvelteKit`構築

“`bash
$ npm create svelte@latest
Need to install the following packages:
create-svelte@2.0.0-next.198
Ok to proceed? (y) y

create-svelte version 2.0.0-next.198

Welcome to SvelteKit!

This is release candidate software; expect bugs and miss

コイントスするだけのクソアプリを作りました！

# はじめに
この記事は「[クソアプリ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kuso-app)（カレンダー3）」7日目の記事です。


# なぜ作ろうと思ったのか？
もともとはポケモンカードゲームなどで先攻・後攻を決める時、手持ちのコインが無くてもWeb上でコイントス出来たら良いな、と考えて作りました。
でもポケカプレーヤーはコインにもこだわるはずなので、持ち歩かないとかあるんですかね？…無いような気がしてきました。でもまあ、それ以外の用途でも、**何か大事なことを決めたい時に、コイントスしたいような稀有な人（？）がいるかも**知れません。

▼完成品はこちら▼

https://cointoss-jp.netlify.app/

# 謎のこだわり
裏表の判

【CSS】ホバーすると立体的にアニメーションするカードを作る

## はじめに
みなさんは、どんなトレーディングカードゲームをやったことがありますか？

僕が触れたことがあるトレーディングカードゲームは、**遊戯王**、**デュエマ**、**ポケカ**くらいですが、他にも、1993年からある**マジック:ザ・ギャザリング**や最近の**ワンピース** などなどいろいろなトレーディングカードゲームが存在します。

ただ、web上でトレーディングカードゲームのカードを表現しようとしても画像で表現することになり、立体感に欠け物足りない感じです。

今回は、そんなトレーディングカードゲームのカードを立体感に見るように、CSSとJavaScriptを使って、ホバーすると立体的にアニメーションするカードを作っていこうと思います。

## 完成形
完成形は、↓こんな感じです。

Pipedreamを使ってリストに入れたツイッターアカウントのツイートを監s…記録する

# この記事の対象者
* サイバーストーカー
* 初心者のjavascriptのコードを見ても吐き気がしない人

# Pipedreamとは
https://pipedream.com/
無料でも利用できる、トリガーとアクションを組み合わせてワークフローを作成し、色々できるサービスです。
Twitter Youtube Discord Slackなど様々なアプリケーションと連携することが出来ます。
類似のサービスにIFTTTなどがありますが、IFTTTよりも柔軟性が高いです。

# Pipedreamを使ってリストに入れたツイッターアカウントのツイートを記録する
## Twitterアカウントと連携する
最初からリストに新しいツイートがあるのかを調べるトリガーがあります。
簡単ですね。
![image.png](https://qiita-im

Nuxt.jsでvue-pdfを使ってPDFスライドを実装

[こちらの記事](https://qiita.com/Dai_Kentaro/items/2accfa8cc7d6bb4cda16)の個人開発サービスで、PDFスライド機能を実装しました。

https://www.slide-commenter.com/

個人開発第一弾の記事を書いていましたが、続編で技術記事を書くと言っていたので、書きました。

# 作りたい機能の要件
– PDFファイルをセットしてプレビュー表示できる
– プレビューページをキーボードの矢印キー等でスライド形式でswipeできる
– 画面に表示している←→ボタンをクリックしてもページをswipeできる
– PDFファイルはストレージに保存せず、セットするだけでswipe可能にしたい（ストレージに保存されないことでセキュリティーリスクをなくす&工数削減）
– PDFプレビューは全画面表示もできる（この記事では触れない）

# バージョン
– yarn v1.22.19
– nuxt v2.15.8
– Composition API v1.6.3
– Vue v2.6.14
– vuetify v2.6.1

#

[Day7] データ型 part1

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## 5.1 プリミティブのメソッド
### 知らない単語
– ラッパーオブジェクトとは
– プリミティブ値を内包するオブジェクトのこと
各プリミティブ型の値には、それぞれラッパーオブジェクトが存在し、ラッパーオブジェクトを利用することでそのプリミティブ値からいろいろな操作をすることができる

– パラドックス
– 正しく見える前提や論理から、納得しがたい結論に行きついてしまう問題の事

### 学んだこと
– プリミティブとオブジェクト

プリミテ

JavaScriptの「卵が先か、ニワトリが先か」問題

# 卵が先か、ニワトリが先か

少し前ですが、こんなツイートが流れて来ました。

JavaScript solved the mystery ?? pic.twitter.com/oZrkzBL8fo

— Madza ?‍?⚡ (@madzadev) October 26, 2022

JavaScript的にはニワトリが先のようです！！

このツイートを見て、自分もDevToolsのコンソールで試して見たところ [“?”,”?”,”?”]をsortしたところ、

予想：[“?”,”?”,”?”]
実際：[“?”,”?”,”?”]

なってしまいひよこが卵の殻に入って、ひよことして自立して、卵になるストーリーになってしまいました。。。

卵が先か、ニワトリが先か、卵からでかけのニワトリが先か
この問題について、なぜこうなるのかを調査していきたいと思います。

## sortの処理について
ま

Chrome拡張機能を作っての社内で人気者になった話

# はじめに

この記事は、Qiita株式会社 Advent Calendar 2022 の 7日目の記事です。

業務で役立つ便利な Chrome 拡張機能を作ったら、社内で人気者になっただけでなく技術的な学びもとても多かったので、みんなも真似してみてね！という記事です。

# 背景

GitHub の便利な機能の一つとして、画像アップロード機能があります。issue や Pull Request の入力フォームに画像等のファイルをドラッグ&ドロップすると、画像がアップロードされ、 Markdown の画像埋め込みを自動で追加してくれます。ですが、この機能の注意点として、たとえプライベートリポジトリにアップロードした画像でも、URLを知っている人なら誰でも画像を見ることができてしまいます。

（↓ 詳細はこちらのGitHub公式ドキュメントに書いてあります）

https://docs.github.com/ja/get-started/writing-on-github/working-with-advanced-formatting/attaching-files

例えば、まだ

【完走賞ゲット-7】p5.js Web Editor で JavaScript のモジュール（ES Modules）を扱う： simplex-noise.js の最新版（4.x）を CDN から import する

## はじめに
こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022](https://qiita.com/advent-calendar/2022/youtoy) の 7日目の記事です。

今回の記事では、p5.js と JavaScript のモジュール「ES Modules」に関する内容を扱います。HTML＋JavaScript で扱う場合、 `` といった書き方をしつつ import文で扱ったりするやつの話です。

## 参照した情報など
今回の記事を書くにあたり、参照した情報や関連するページを記載します。

– 参照した情報など（実装や説明書き関連で）
– [JavaScript モジュール – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules)
– [How to use export & import i

【JS】ボタン押下をせずファイルアップロードしたらフォーム送信する

ファイルをアップロードした段階でフォーム送信される処理。
▼HTML
“`php:hoge.blade.php
// 送信フォーム

“`

▼JS
“`javascript:hoge.blade.php
$(function () {
$(“#input_file”).change(function () {
$(this).closest(“form”).submit();
});
});
“`

ファイルがアップロードされたら、formのアクションに移行する。

DOM に立ち向かうために知っておくべきこと6つ

DOM操作は JavaScript に欠かせない要素です。

Web サイトにおいて HTML が骨、CSS が皮膚・肉だとすれば、歩いたり走ったりの動作を追加するのが JavaScript。
つまりユーザーがボタンをクリックしたらどうするのか、input タグに入力したらどういうプログラムが動くのかなど、動きの部分を司っています。（他にもアニメーションなどの役割がありますが今回は DOM 操作にフォーカスしましょう）。

私は DOM 操作が JavaScript の面白い部分だと思っていますが、初めて遭遇したときは全く意味が分からず逃走しました。操作方法以前に Element とか Node とか似たような言葉が多くて意味が混乱するんですよね。

ということで今日は一旦実際の操作を置いておいて、DOM にまつわる以下の言葉についてなるべく分かりやすく解説していこうと思います。

1. DOM
1. Element（要素）
1. Node
1. Event
1. イベントハンドラー
1. イベントリスナー

この6つさえ知っておけばいざ実装したいときに大体どんなドキュメントにも立ち向

iframeと親ページ間でpostMessageを利用してデータ送受信を行う

# はじめに
[iframe表示部分のクリックイベントを取得する](https://qiita.com/manzoku_bukuro/items/66d07b88eb0b6eb28601)という記事で、iframe内のイベントをiframeのcontentWindowに対しaddEventlistenerを登録して親ページで取得する方法を紹介しました。

この記事ではpostMessageを利用してiframeと親ページ間でやり取りする方法を紹介します。

# この記事の対象者
– ページに埋め込んだiframe要素から情報を取得したい
– ページに埋め込んだiframe要素と親ページ間で相互間のデータ送受信を行いたい
– ページにiframe埋め込みをする前提のページを作成して、イベント発生時に親ページに情報を渡したい

# iframeと親ページ間のデータ送受信
## postMessageを利用した送受信の方法
### 子ページ
#### データを親ページに送信する場合
“`js
window.parent.postMessage(message, targetOrigin);

sort()メソッドを使ってReactでソート機能を実装する

# やりたいこと

お店の名前、評価のデータ一覧が入った配列が親コンポーネントから渡され、 `` コンポーネントでmapを使ってさらに子供のコンポーネントにデータ展開している。ここで、「並び替えボタン」クリック時に評価順にソートしたデータを展開したい。

“`react:App.tsx
export type Shop = {
name: string;
rating: number;
};

const shops:Shop[] = [
{
name: ‘shopA’,
rating: 1.2,
},
{
name: ‘shopB’,
rating: 2.6,
},
{
name: ‘shopC’,
rating: 0.9,
},
{
name: ‘shopD’,
rating: 3.1,
},
];
const App = () => {
return ;
};
export default App;