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

【Illustrator】3点のパスポイントからなるpathItemの角度

“`
var selectedItems = app.activeDocument.selection;

if (selectedItems.length == 1 && selectedItems[0].typename == “PathItem” && selectedItems[0].pathPoints.length == 3) {
var pathPoints = selectedItems[0].pathPoints;
var angle1 = parseFloat(Math.atan2(pathPoints[0].anchor[1] – pathPoints[1].anchor[1], pathPoints[0].anchor[0] – pathPoints[1].anchor[0]) * 180 / Math.PI).toFixed(1);
var angle2 = parseFloat(Math.atan2(pathPoints[2].anchor[1] – pathPoints[1].anchor[1], pathPoints[2].an

React + TypeScript: Next入門04 動的ルートを定める

Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみるシリーズの最終回です。プログ投稿ごとのパスをデータから動的につくり、静的に生成した投稿ページにトップページからリンクします。[Next.js公式作例](https://next-learn-starter.vercel.app/)のでき上がりはこれです。

# ブログ投稿ページごとの動的ルートを定める
作例におけるブログ投稿ページごとの動的ルート([dynamic routes](https://nextjs.org/docs/routing/dynamic-routes))のつくり方は、つぎのとおりです。

* 各投稿のパスは`/posts/`とします。
– ``はトップレベルの`posts`ディレクトリに収めたマークダウンファイル名です(拡張子`.md`は削除)。
* マークダウンファイル名からパスは、つぎのように決まります。
– `ssg-ssr.md`のパス: `/posts/ssg-ssr`
– `pre-rendering.md`のパス: `/

Recoilに入門してみる

なにかと話題になる[Recoil](https://recoiljs.org/)ですが、未だ触ったことがなかったので公式ドキュメントを読みつつ、入門してみたいと思います。

# 本記事の目的

– [Recoilの公式ドキュメント](https://recoiljs.org/docs/introduction/installation)の`Introduction`と`Basic Tutorial`を参考に、Atom、Selectorの基本を学ぶ

# 本記事で扱わないこと

– Recoilの応用
– Recoilの運用や設計
– 他ライブラリとの比較

# Recoilとは

RecoilはReactの状態管理ライブラリです。Reactにおいてグローバルな状態をどう管理するかというのは悩ましい話題の一つです。ビルドインで備わっている状態管理機構（Context APIやpropsのバケツリレー）もありますが、それはそれでいくつかの制約があります（詳しくはドキュメントの[Motivation](https://recoiljs.org/docs/introduction/motiva

Lightboxのような画像リンクにwebpを対応させる方法

webp対応したときに、Lightbox系の画像にaリンクが必要な実装をした場合、対応ブラウザの可否で `.webp` と `.png` を書き換えなければいけなかったのでメモ。

## 前提：webp対応はModernizrを使用

ここでは前提として、JavaScriptライブラリ「Modernizr」を利用して、webpのブラウザ機能のサポート状況を自動的に検出してもらいます。

[Modernizr](https://modernizr.com/)

導入方法は割愛。（以下参考）

https://blanche-toile.com/web/css-background-webp

ブラウザ判定が簡単にできる！【Modernizr】

## 例：スライダーなどんお画像リストにaリンクのポップアップなどがある時

“`html

• JavaScriptのsort関数で日本語を50音順に並べたい

  # 目的
  JavaScriptで日本語でのソートを行う際、意図した挙動にならなかったため自分なりに調べた結果をまとめました。

  今回はこんな感じで単純な文字列をソートしていきます。
  “`javascript
  const array = [“う”, “い”, “あ”, “ウ”, “イ”, “ア”, “宇”, “井”, “亜”, “a”, “i”, “u”];
  “`

  ひらがな、カタカナ、漢字、英語が混じった配列ですね。

  # 単純なソート関数
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

  JavaScriptの組み込み関数であるsort関数を使う場合、以下のようになります。

  “`javascript
  const array = [“う”, “い”, “あ”, “ウ”, “イ”, “ア”, “宇”, “井”, “亜”, “a”, “i”, “u”];

  array.sort();
  console.log(array);
  // 出力結果 => [a,i

LINE botを使って体重管理してみた！？(Google App Script)

# 目次
* なぜこのシステムを作ったのか
* 使用するツール・環境
* ソースコードの解説等
* スプレッドシートの中身
* 使用してみた結果
* 最後に

# 1. なぜこのシステムを作ったのか
正月太りしてしまった…ダイエットせねば..
まず体重管理からしてみよう！
でも体重管理のアプリ入れても絶対入力怠るなあ…

:::note info
**じゃあLINEで体重管理bot作っちゃおう！**
:::

LINEで毎日記録すれば、怠らないよね…(多分)

それじゃあササッと作ってみよう！

# 2. 使用するツール・環境
今回はGoogle App Scriptを使用します。(以下GAS)
データはスプレッドシートに保存します。

# 3. ソースコードの解説等

“`javascript
const CHANNEL_ACCESS_TOKEN = ”;
const url = ‘https://api.line.me/v2/bot/message/push’;
const groupID = ”;

function doPost(e) {
co

フォームに入力しようとするとトップにスクロールしてしまう

JavaScript初心者です。
初歩的なことかもしれませんが、調べてもなかなか見つからず時間がかかったので書きます。

### 事象
フォームに入力しようとクリックすると、スクロールしてトップに移動してしまいました。
また、モーダルの閉じるボタンをクリックした際に、少し上に行って元の位置に戻るという変な動きをしていました。
SpringBootでもASP.NETでも同様のことが起きました。

### 検索ワード
以下のワードで調べていました。
（過去に検索してそのまま残っていたタブから引用したので順不動です）

ページトップ 無効
スクロール 無効
スクロールトップ 無効
スクロールさせない
入力するとき　画面　移動
入力　画面　位置　動く
form input 選択　移動
入力　フォーカス　位置
入力　位置 固定
入力　位置 ずれる
勝手にスクロールされる
スクロール 上に戻る
背景固定 スクロール

これらのワードにプラスしてjQuery、js、Bootstrap5、SpringBootを入れていました。
jQueryか、BootstrapのjQueryが悪さしているのかなと思っ

JavaScriptモダンプログラミング完全ガイドの演習問題の解答

# 演習問題の解答作成中です
以下のgitレポジトリにJavaScriptモダンプログラミング完全ガイドの演習問題の解答を自作しています(現在2章まで、今後全部解いていく予定です)。
[JavaScriptモダンプログラミング完全ガイドの演習問題の解答](https://github.com/sobatha/modern_javascript_solutions)

解答に不正確な点、別解などあればご指摘いただけますと幸いです。

出版社様のサイト https://book.impress.co.jp/books/1120101055

p5.js で使うスマホのカメラを選択する仕組みの簡単なテスト：外向き／内向き、exact の有無の違いのテスト

この記事は、p5.js で作ったプログラムでカメラを使う場合に、スマホのカメラ（外向き／内向き）を選択する仕組みを試してみた話です。

具体的には、「facingMode」に関して以下の 4通りの指定を行った場合の、挙動の違いを見てみたというものです。

– “user”
– “environment”
– { exact: “user” }
– { exact: “environment” }

## スマホで利用するカメラの指定
JavaScript でスマホのカメラを使う場合、外向き／内向きのカメラを指定することができます。

この話に関して、MDN のサイトでは以下の部分に記載があります。

●MediaDevices.getUserMedia() – Web API | MDN
　https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia
![facingModeについて](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/

【2023年版】【GAS, LINE Notify, Gmail】gmailの特定のメールをLine通知する方法

## 結論
下記でコードでgasに記述するとokです
“`javascript
//LINEにメッセージを送信する
function sendLineMessage(message) {
// lineのtokenをhogeの代わりに入れる
const LINE_NOTIFY_TOKEN = “hoge”;
const Authorization = `Bearer ${LINE_NOTIFY_TOKEN}`
// エンドポイントが変わったら下記変更
const LINE_ENDPOINT = “https://notify-api.line.me/api/notify”

const option = {
“method”: “post”,
“headers”: {Authorization},
“payload”: {message}
}
let response = UrlFetchApp.fetch(LINE_ENDPOINT, option);
}

//メールをチェックし条件に該当するメールをLINEに通知する
fu

GitHub APIについて

## はじめに
現場での開発案件で使用した、GitHub APIについて書いていきたいと思います。
以下がGitHub APIのドキュメントになります。
https://docs.github.com/ja/rest?apiVersion=2022-11-28

## GitHub APIとは？
このAPIは、GitHub上のデータをJSONで取得することができるAPIになります。
JavaScriptでの実装が一番向いていると思います。

## GitHub APIの使用方法
データの取得方法は、GitHub上で指定されているエンドポイントに、ユーザー名などのGitHub上にあるデータを埋め込んで取得します。
例えば…
“`
https://api.github.com/users/hukuryo
“`
取得できるデータ↓

“`
{
“login”: “hukuryo”,
“id”: 91451759,
“node_id”: “MDQ6VXNlcjkxNDUxNzU5”,
“avatar_url”: “https://avatars.githubuserc

Vue.jsでレンダリングパフォーマンス改善

データの件数が増えてくるとページの読み込み処理等が遅くなってしまい、大切なユーザー体験が低下してしまいます。
この記事ではVue.jsに特化してレンダリングパフォーマンスを向上させる方法を「[Vue.js入門 基礎から実践アプリケーション開発まで](https://www.amazon.co.jp/Vue-js%E5%85%A5%E9%96%80-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AE%9F%E8%B7%B5%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%81%BE%E3%81%A7-%E5%B7%9D%E5%8F%A3-%E5%92%8C%E4%B9%9F/dp/4297100916)」を参考に紹介します。

## v-if & v-showを使い分ける
v-if / v-showはture/falseで要素の表示・非表示を可能にしますが、v-ifは条件によって要素を削除し、v-showは要素を残

Astroでポートフォリオサイトと簡単なテックブログを作ったので、振り返ってみる

# はじめに
最近Ver2.0がリリースされ、去年度の「The State of JS」でも話題になったフレームワークを使って、
個人に関する2サイトを作ってみたので共有です。

どんな技術かなどの説明は、ドキュメントをご覧ください
大部分が日本語対応しているので、理解しやすいと思います。

https://astro.build/

# 作成者スペック
・業務: Springboot + js、現在新卒です
・非業務: React,Nextjs,astro(すべて勉強中、非業務レベルです)
・資格ちらほらです

# 作ったもの
以下２サイトです（update等で見られなくなっていたら、見逃してください…）
企画含めて、大体１ヶ月半くらいで作りました。
すごいレベル高いものというより、こんな感じならサクッと作れるよ～というところになります。

技術記事のほうはまだあまり書けていないで、ご了承ください。

https://tktechblog.info/
https://portfolio-tk.vercel.app/

# なぜこれらを作ったのか

https://www.amazon

JavaScript非同期処理の解釈が合っているかどうか聞きたい。

### JavaScriptの非同期処理に関する解釈が合っているかどうか教えて欲しいです。

### 該当コード
この後に自分が解釈した箇所の参照として、①~⑤の番号を振っています。
コードは、独習JavaScriptテキストの内容であり、直列の非同期処理がうまく処理されないコードとされています。
“`Javascript
let count = 0;
function promiseFactory() {
return new Promise((resolve, reject) => {
setTimeout(() => {
count++;
console.log(`${count}回目のコールです。時刻：[${new Date().toTimeString()}]`);
if (count === 3) { // 3回目のコールでエラー
reject(count);

【JavaScript】Consoleの基本的な出力とグループ化

JavaScriptでコンソールに出力するときにはconosle.logをよく使うがそれ以外にもメソッドが用意されている。

それらを使用することで色分けなどができてログが見やすくなる。

基本的なログ出力のメソッドは下記の4つがある。

| メソッド | 概要 |
|:-:|:-:|
| log | 一般的なログ |
| info | 一般情報を表すログ |
| warn | 警告を表すログ |
| error | エラーを表すログ |

実際に出力しているところを見てみる。

“` sample.js
document.addEventListener(‘DOMContentLoaded’, function() {
console.log(“test”);
console.info(“test”);
console.warn(“test”);
console.error(“test”);
}, false);
“`

出力結果

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

縦書きジェネレーターを作りました。

### 二番煎じ感が強い縦書きジェネレーターですが、作ってみました。
飽きたら削除するかもです。

使用した言語等はJavaScript、php、Sqlite3、html、cssになります。
※[html2canvas](https://html2canvas.hertzen.com/)というライブラリを使っています。これがあったので短時間で創ることが
出来ました。ありがとうございます。

ソースコードの一部を抜粋します（下記になります）。

動作は下記より確認できます。
https://358tool.com/tategaki-tool/

“`javascript
document.getElementById(“tategaki-input”).addEventListener(“input”, function (e) {
document.getElementById(“tategaki”).innerText = this.value;
});
document.getElementById(“btn”).addEventListener(“click”, f

近年のJSで分からないこと

個人用メモをそのまま公開します。

## 前提
jQuery時代のJavaScriptは分かるけど、それ以降の知識が曖昧なため、
VueとかNuxtとか書こうとすると、すぐにつまずく。

## export default…は何？
JSでモジュール分割するための記法というのは分かる。

## const { data } = …は何？
複数の変数に代入するための記法と思うけど、１個のときもこの書き方を見る。

中括弧を使うのは、どういう意味？
オブジェクトを書くときの中括弧と同じか、文法的にはまったく別の意味か。

## コード例
いま見てるチュートリアルのコードを例に疑問をまとめる。
JS、TS、Vueの疑問が混在してるけど構わない。
https://www.newt.so/docs/tutorials/get-contents-in-nuxt
“`vue

outer