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

ブラウザのスクロール率を取得する

webGLで動的なアニメーションを入れるときに、
ブラウザのスクロール率を計算する必要があったので、メモとして残しておきます。

scrollTop
→ 要素の上から最も上の表示されているコンテンツまでの距離
scrollHeight
→ 要素が垂直スクロールバーを使用せずに、要素の全てのコンテンツを収めるのに必要な距離
clientHeight
→ 表示域の高さ

“`js
//ブラウザのスクロール率を計算
let scrollPercent = 0;
document.body.onscroll = () => {
scrollPercent =
(document.documentElement.scrollTop /
(document.documentElement.scrollHeight –
document.documentElement.clientHeight)) *
100;
console.log(scrollPercent);
};
“`
![image.png](https://qiita-ima

エンジニア1年たった頃にようやくPHPとJavaScriptの「this」の挙動の違いを理解できた話

### はじめに

一年たった頃に、ようやくふわっとしていた`this`について理解できた時があったので、その気付いたときの記録と`this`について僕なりの言葉で解説したいと思います。

### 1年目まで勘違いしていた点

言語に関係なく、`this`はブロックを抜けた外のスコープを指していると思っていた。

※今回はPHPのコードを読んでいる際に間違いに気付きました。

### 結論(正解)
:::note warn
`PHP`と`JavaScript`(アロー関数の定義と通常の`function`定義)で違いがあり、ややこしいのでご注意を。
:::

– **PHPの`$this`**
– クラスインスタンス(自分自身)を指している。
– **JavaScriptの`this`**
– アロー関数の場合
– アロー関数は関数定義時(定義場所)の1つ前のコンテキスト(PHPみたいな挙動)
– 通常の`fuction`の場合
– 関数呼び出し元(関数呼び出し時)がコンテキストになる

### 具体例(PHPの$this挙動の

[習作] Qiita用のChrome拡張を作ってみた

## はじめに

お勉強を兼ねて、非常に低機能な Qiita 用の Chrome 拡張を作成してみました。

## 機能

Qiita を使っていて、いくつか機能が追加されたらいいな、と思ったものがあります。

一つは、最近[削除](https://blog.qiita.com/close-item-list-page/)されてしまった「記事一覧」（新着一覧）の機能。

> Qiitaではサービス開始以降、記事投稿数の増加とともに、全ての記事に目を通すのは難しくなってきていました。
> また、ユーザーが多様化してきたことで、全ユーザー一律で新着記事を表示しても、欲しい情報に出会いづらくなっていました。
>
> そのため現在は、全ユーザーに一律の情報を見せるのではなく、ユーザー1人1人の興味に合わせて自分が欲しい情報に出会えるように、ホームフィードや、タイムラインフィードを用意しております。

運営側の思いはわかりますが、できれば広い範囲で情報をキャッチしたい、多少ノイズ（求めている情報ではないもの）があってもよいと思う時に、新着一覧はあってもよいかな、と個人的には思っています。

ちな

【JavaScript】 Dynamic viewport (lvh, svh, dvh)が効かない時は、Visual viewportを使おう

## はじめに
W3Cの[CSS Values and Units Module Level 4](https://www.w3.org/TR/css-values-4/#viewport-relative-lengths)で、ビューポート単位についていくつか仕様が変更され、ビューポート単位に`Large viewport`、`Small viewport`、`Dynamic viewport`といったビューポートサイズの単位が追加されました。

この新しいビューポート単位は、ほとんどのブラウザの最新バージョンでは使えるようになりましたが、
[Can I use](https://caniuse.com/?search=dynamic%20viewport) でどのくらいのユーザーが対応しているかを確認してみると、2023年2月1日時点で、22%のユーザーは、ちゃんと表示されない状況になっています。

どのくらいまで許容するかは、ドメインごとに違うとは思いますが、実業務で使うには、悩ましいくらいの数値だと思います。

そのため、この記事では、まだ新しいビューポート単位が使えない人に向け

console.logだけではないconsoleの使い方


フロントエンド開発にあたりconsole.log()は黄金のツールです。しかし、このconsoleオブジェクトにはもっと使えるメソッドがあります。正しく、そして効率よくデバッグを行うためにこのsoncoleについて調べていきましょう。

https://asameshicode.com/how-to-use-console/

## **Console.logの問題**

console.logだけを使っているとコードがconsole.logだらけになり、どのコードを実行しているのかわからなくなり、読みづらくなってしまいます。今日はconsoleで使える９の方法を紹介していきます！

## **console.table**

console.tableは表形式でデータを表示してくれるので読みやすいデータを出力することが可能になります。

“`JS

Notion APIのタイトル取得の癖を解消する

こんにちは。
Notionの案件でNotionのタイトル周りでの癖に悩まされた話と、解決策を書かせていただきます。

## Notion APIでページ一覧を取得

Notion APIでは以下のようにしてページ一覧を取得できます。
取得できるのは、インテグレーションをコネクトしたページ、およびインテグレーションをコネクトしたデータベースにぶら下がっているページです。
実際に使用したコードを適当にバラしただけですので、見にくい上に実際に動くかどうか分かりませんが、ご愛嬌で笑ってご容赦いただければと思います。

“`javascript
const token=””;
const NOTION_VERSION=””;

_post(endPoint, payload) {
const options = {
method: ‘post’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: ‘Bearer ‘ + token,

【React】React学習ログ　１本目 【ゼロから始める】

Railsで簡単アプリケーションが作れるようになった次のステップとしてReactを学ぶことにしました。
理由は・・・「なんかおしゃれなフロント作れそうじゃん？」みたいな先入観からです（笑）
備忘録として学習ログを残していきます。

### そもそもJavaScriptって何？
そこからです。そこからなんです。Reactの理解の前にJavaScriptが何なのかしっかり押さえていくことが大事かなと思ったのでまとめていきます。
・ブラウザ上で動く唯一のプログラミング言語
・ブラウザ上で動く言語→開発環境の構築が不要→初学者が取り掛かりやすい。
・技術の移り変わりが早い。
・どのWebシステムでも使われている（はず）。
・バックエンド開発もできる。

### モダンJavaScriptって？
・仮想DOMを用いるライブラリ（例）React,Vue,Angularなど・・・。
・npm/yarnなどのパッケージマネージャーを使用。
・webpack等のモジュールバンドラーを使用。
・Babel等のトランスパイラを使用

※仮想DOMについて
従来のDOM操作・・・コードが複雑になる。画面を表

【応用分野】各プログラミング言語は何ができるかを見てみよう

多くの人がプログラミングを学ぶのは常に頭が熱くなってからネットで資源を探して勉強を始めます。学んでみると今学んでいることは自分が一番好きなものではなく、別の技術をもっと好きなようで、間違っていると感じて、また別のことを勉強するようになった。
プログラミング言語を学ぶ前に、どの分野に適用されるかを明らかにしなければなりません。本文は、いくつかのプログラミング言語の応用分野を説明し、何ができるかを見てみましょう。
## 1.C言語
C言語の主な応用分野は、オペレーティングシステム、組み込みシステム、およびサーバーであり、底辺で広く使われている強力な高級言語です。たとえば、世界のオペレーティングシステムの90%以上を占めているMicrosoftのWindowsシステム、そのコアはC言語で書かれています。しかし、C言語は習得が難しいことでも有名で、C言語に精通していれば、収入は決して低

PHPとJavaScriptを連携する

# １．はじめに
　個人環境でジュークボックスサーバーを動かしていて、サーバー(Linux)上のSAMBA領域にあるmp3ファイルをブラウザ(Chrome)で連続再生させるといったことをやっています。ブラウザ上ではChromeのMusicオブジェクトを使い、再生するのと同時に楽曲情報のテキストを表示させています。
　HTMLのFORM文を使うといちいち操作介入が必要になりますが、それだと煩わしいので１曲再生終了したら自動的に次のリクエストをサーバーへ送り、同時に楽曲情報を取得したいところです。再生の方はmusicオブジェクトにURLを渡して後はお任せなのですが、楽曲情報については、別途リクエストしなければなりません。
　これを実現するためブラウザ側ではJavaScriptでサーバー側に用意したAPIからXMLHttpRequestを使い、JSON形式の楽曲データを取得させました（下図）。取得したデータは動的HTMLでブラウザの表示に反映させます。
![PHPAPI(XMLHttpRequest).png](https://qiita-image-store.s3.ap-northeas

Vue.js 2系で簡単にタブ切り替えを実装する

### はじめに
仕事でVue.js(2系)でタブ切り替えを実装することになったので、アウトプットも兼ねて記事で解説してみようと思いました。
※ [注意]サンプルはVue.js(2系)でしか動きません。

まずはHTMLから記述します。

### HTML
“`HTML:

• タブAのボタン
• タブBボタン

LWCのJS内でクラス(っぽいもの)を用意したい

# はじめに
完璧には出来なかったので、もっと良い案をご存じの方おられましたら教えてください。

# やりたかったこと
画面に表示するデータを、同じデータ構造で複数種類保つ必要があったため、クラスに定義して保存するようにしたかった。

# だめだったこと
クラスの定義は出来なかった。
シンプルなクラス定義と、匿名クラス定義とやらも試してみたけど上手くいかず。

コードに書いたJavaScriptがそのまま画面に埋め込まれるわけではなく、そこからさらにLWC流に解釈されて
色々動かされてるため、調べた結果がそのまま使えない感じでした。

# できたこと
色々な値や関数を定義したオブジェクトを作る関数を用意して、それを擬似的にクラスのような形で扱う。
“`JavaScript
import getPersons from ‘@salesforce/apex/TestLWCController.getPersons’;

export default class TestLWC extends LightningElement {

// データを取得してくる

Gihtub Actions から実行する JavaScript 内で後続に渡す Output を設定する

# 概要
Github Actions で実行したステップの出力結果を後続に連携したい場合、決められた様式で出力することで対応できます。

https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#setting-an-output-parameter

“`yaml:例
– name: Set color
id: random-color-generator
run: echo “SELECTED_COLOR=green” >> $GITHUB_OUTPUT
– name: Get color
run: echo “The selected color is ${{ steps.random-color-generator.outputs.SELECTED_COLOR }}”
“`

Actions から実行する JavaScript 内で、出力結果をセットする手順をメモに残す。

# 手順

【Rails】【Ajax】コメント投稿・削除を非同期通信化する。

# はじめに
プログラミング初学者の者です。オンラインでプログラミングを学習させて頂いてるのですが、さらに理解を深めていきたいと思い、学習したことを備忘録として、残して理解を深めていきたいと思います。
また、間違った点など、ありましたら、ご指摘いただけると幸いです。よろしくお願いします。

# 前提
Railsにて投稿アプリケーションを作成のち、投稿に対して、コメントできる機能実装済み。
今回は離乳食を投稿するアプリケーションで実装しています。

# 目標
### コメント機能が非同期で行えるようにする
[](https://gyazo.com/77a19537f3913ba1aae0c363e79f5193)

# 手順
①jQueryの導入
②コメント表示部分を部分テンプレート化
③投稿機能の非同期化
④削除機能の非同期化

# ①jQueryの導入
“`text.Gemfile
———略———
gem

Promiseの配列を順番に実行したい

# TL;DR

“`typescript
type Supplier = () => T;

export const sequence = (promises: Supplier>[]): Promise => {
if (promises.length === 0) {
return Promise.resolve([]);
}

return new Promise((resolve, reject) => {
const results: T[] = [];

promises
.reduce((p1: Supplier>, p2: Supplier>): Supplier> => {
return () => {
return p1().then((t: T) => {
results.push(t);

スマホでHTML5のバリデーション時に該当箇所にスクロールしない問題への対処方法

HTML5のフォームバリデーション、便利ですよね。

だけど、スマホだとエラー箇所にスクロールしてくれないんですよ。

色々探し回ってみたけど、jQueryでのバリデーションばっかりだったんですが、ピュアなJavaScriptでも結構簡単に解決できたのでここに残しておきます。

“`js
document.addEventListener(“DOMContentLoaded”, () => {
const form = document.querySelector(“form”);
form.addEventListener(“submit”, (event) => {
const elements = form.elements;
for (const element of elements) {
if (!element.validity.valid) {
element.scrollIntoView();
element.reportValid

【SSG】なぜAstroは素晴らしいのか

Astroというフレームワークをご存知でしょうか。

https://astro.build/

昨年リリースされた比較的新しいフレームワークで、静的サイト生成を行うためのフレームワークです。
従来は静的サイト生成を行うためには、`EJS`や`Pug`といったテンプレートエンジンを利用するか、Next.jsやNuxtのようなフルスタックフレームワークのSSGモードを利用する選択肢が一般的でした。

Astroはフルスタックフレームワークよりも少ない学習コストで直感的に使えつつも、従来のテンプレートエンジンに比べ豊かな表現力を持ちつつ、アプリケーション開発に近い書き味でWebサイト制作を行える素晴らしいフレームワークだと感じたので採用するメリットなどをまとめてみようと思います。

## Astroのメリット

– 各種コンポーネントライブラリに対応
– [React](https://reactjs.org/)
– [Preact](https://preactjs.com/)
– [Svelte](https://svelte.dev/)
– [Vue]

コーディング時間を節約できる JavaScript１行コード２０点

はじめましてこんにちは、ひょうどうです。

今回は、コーディング時間を節約できる１行のJavaScriptコード２０点を紹介します。

> １）配列内の数値の最大値を取得する（配列が小さい場合）
“`
Math.max(…array)
“`
> ２）配列から重複を削除する
“`
[…new Set(array)]
“`
> ３）1 から 100 までの乱数をする
“`
Math.floor(Math.random() * 100) + 1
“`
> ４）文字列が有効な数値かどうかを確認する
“`
!isNaN(+string)
“`
> ５）現在の日時を取得する
“`
new Date().toString()
“`
> ６）変数が配列かどうかを確認する
“`
Array.isArray(variable)
“`
> ７）変数がオブジェクトかどうかを確認する
“`
typeof variable === “object”
“`
> ８）配列を文字列に変換する
“`
array.join(“,”)
“`
> ９）変数が関数かどうかを確認する
“`

アロー関数まとめてみた

書き方

“`js
// 通常の関数
function fn(number) = {
return number * 2
}

//　無名関数
const fn = function(number) = {
return number * 2
}

// アロー関数
const fn = (number) => {
return number * 2
}

// 引数が一つだと()を省略できる
const fn = number => {
return number * 2
}

// 処理が1行だと{}も省略できる
const fn = number => number * 2

// オブジェクトの返り値の場合
const fnObj = number => (
{result : number }
)

“`

正規乱数をプロットする

# 正規乱数をプロットする
前回、一様乱数を出力して、一つ一つの値を一本の縦線で表示し、なんだかバーコードみたいな画像を作ってみました。今回は、これに修正を加えて、

1. 乱数を正規乱数にする
1. 平均値・分散・中央値・最大値・最小値を計算して表示する。

ようにしてみました。出力結果が正しいかどうかをHADで検算しています。

### 正規乱数を作る
正規乱数を作るには、具体的にはどうすればいいんだろう、と検索してみると、次のサイトが見つかりました。

[Javascriptで正規分布の実装まとめ（乱数、累積分布関数など）](https://www.marketechlabo.com/normal-distribution-javascript/)

ここに、正規乱数を発生させるJavascriptの関数が記述されていたので（理屈はよくわかっていません。いえ、嘘を書きました。まったく、1ミリもわかりません）、これをそのまま使わせていただきました。ありがとうございます。

ということで、乱数を発生させる部分の関数を、`rnorm()` に書き換えて終了。

### 統計量の算出

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

連番 (paizaランク A 相当)

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

# 解答例(C++の場合参考)
連番の最大の長さで二分探索する。
正整数列 A = (A_1, A_2, …, A_N) を先頭から順に見ていく。
cnt は現在見ている連番の長さ,sum はとりだした連番の個数として、
cntがmid以上になったら、とりだす。cntをリセットする。
また、Aの最後の要素でない、かつ、連番でないならば、cntをリセットする。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, k] = lines[0].split(” “).map(Number);
const a = lines[1].split(