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

preventDefault()に気づかず苦戦した話

## はじめに
こんにちは。
駆け出しフロントエンドエンジニアのももたれです。

最近はJavaScriptの基礎部分をひたすら書いてました。
自分の備忘録も兼ねて、preventDefault()に気づかず苦戦した話を書きます。

## 実装内容
### ページTOPへ戻るボタン
ページに入り、ちょっとスクロールしたら右下に出てくる「ページTOPへ戻るボタン」
クリックしたら**するするっと**ページTOPに戻る、まあよく見るあのボタンを作ろうとしてました。

htmlとcssで**ただの**「ページTOPへ戻る」は作ったことありますが、JavaScriptを使っては初めて。
調べたらよさげな記事出てきたので、「お、いけそう」と思いきや、だいぶ苦戦しました。

### コード
こんな感じで書いてました。

htmlは大した内容じゃないので省略します。
大事なのは、**aタグ**使ってました。

“` javascript
// スクロールしたらボタンが出てくる
const topBtn = document.querySelector(“[data-target-following

[JavaScript]URLSearchParams.toString()がnull値を”null”とするのを避ける為、nullをオブジェクトから除外する

# 前提

　GET用のURLパラメータを構築する時、URLSearchParams.toString()が便利です。次のように使います。

“`javascript
const params = {
search: “abc”,
searchtype: 2,
userid: 1234,
}

const url = “https://host/api/getXXX” + (new URLSearchParams(params)).toString()
console.log(url);
“`

“`
https://host/api/getXXX?search=abc&searchtype=2&userid=1234
“`

# 問題点

　paramsのプロパティ値にnullやundefinedを含むものがあった場合、それらは”null”、”undefined”という文字列としてエンコードされます。

“`javascript
const params = {
search: null,
searchtype: undefined,
userid: 1234

TypeScriptで戻り値がvoid型の関数を扱う場合の注意点

この記事は、TypeScriptで戻り値がvoid型の関数を扱う場合の注意点に関する覚書です。

# TL;DR
– TypeScript(JavaScript)における明示的な戻り値を持たない関数は、ランタイムでは`undefined`を返す。
– TypeScriptにおける関数の戻り値としての`void型`は`undefined型`よりも「戻り値の利用を想定していないことを明示できる」点で優位性があるが、知らないとハマりそうなassignabilityの罠がある。
– 上記のassignabilityの仕様を把握しておきつつ、以下のように型注釈することがbetterだと思っている。

| 型注釈をつける関数の種類
（戻り値の利用想定） | 戻り値の型注釈 | 関数型の使用 |
|:———–:|:————:|:————:|
| [1. 副作用だけの関数
（利用なし）](#1-副作用だけの関数) | ⭕️ `void`
（? `undefined`） | 極力避けるべき
[（理由）](#12-関数型を使う場合) |

【React Router v6】コンポーネントを跨いでとを設置するとエラーが出る【初学者向け】

## はじめに
react router を使ってルーティングする際、込み入ったデザインだとコンポーネントを跨いでタグを配置することになります。
自分はそこで少し躓いてしまったので、誰かの役に立つのではと思い記事に残してみました。
## まず、\を直接\の中に書くことができる場合
“`JavaScript:App.tsx
import { Sidemenu } from “components/organisms/Sidemenu”;
import { BrowserRouter, Routes, Route, Link } from ‘react-router-dom’;
function App() {
return (

} />

例外処理

# 例外処理とは
例外というのは、エラー（ランタイムエラー）のことです。エラーが出るとそこでプログラムは強制終了してしまいます。
しかし、外部との通信やデータのやり取りをするようなプログラムは様々な要因によるエラーを避けることはできません。
そこで、JavaScriptやTypeScriptには、エラーを取り扱うための方法が用意されています。

# throw文とErrorオブジェクト
throwというのは、「投げる」という意味です。throwで何かが投げられるとエラーが発生します。

“`ts
const dog = “Hello”;

throw dog;

console.log(“world”);
“`
この例では、throwで変数dogを投げています。この時点でエラーが発生するのでプログラムは終了してconsole.logまで到達することはできません。throwに渡すのは、式なら何でも可能です。

そして、throwに渡すのは基本的にErrorオブジェクトを指定します。まずは、newを使ってErrorインスタンスを作成します。
Errorコンストラクタは、引数に文

jQueryでキーコード判別

# 入力文字の種類を制限する
## この記事でやること
jQueryで数字、記号、ファンクションキーの入力を制限する。

## 動作環境
osはwindows11、ブラウザはChrome.

## 参考ページ
キーコードはこちらの記事を参考にした。

http://faq.creasus.net/04/0131/CharCode.html

## 失敗例
上のページを参照するとソースコードは下のようになる。

“`
$(function(){
$(document).on(‘keypress’, ‘.compare-input’, function(e){
var keycode = e.keyCode;
if((48 <= keycode && keycode <= 57) || (96 <= keycode && keycode <= 123) || (186 <= keycode && keycode <= 192) || (219 <= keycode && keycode <= 226)){ c

javascriptでリダイレクト【忘備録】

“`jav

“`

Javascriptでゲームプログラムの下地を作る

# Javascript でゲームプログラムの下地を作る
キー入力を抽象化しておおむね60fpsの描画を行う最小限のソースコードを作成します

ソースコードはここ
[https://github.com/ikuo0/js-game_template](https://github.com/ikuo0/js-game_template)

デモンストレーションはここ
WASD 又は 十字キー の操作で青いなにかが上下左右に動きます
[https://ikuo0.github.io/js-game_template/](https://ikuo0.github.io/js-game_template/)

# 入力処理
JavaScriptのキー入力はイベント駆動ですのでフレーム毎にキー入力を取得するという関数がありません

こういうことがしたいがJavaScript標準のAPIだけではできないので困る
“` javascript
// 毎フレーム呼ばれる関数
function GameMain() {
var input = getInput();//

マイクロフロントエンドのフレームワークまとめ

### 1.Bit
GitHub star: 16.3k
https://bit.dev/

### 2.single-spa
GitHub star: 12.1k
https://single-spa.js.org/

### 3.qiankun（乾坤）
GitHub star: 13.9k
https://qiankun.umijs.org/

### 4.micro-app
GitHub star: 3.8k
https://micro-zoe.github.io/micro-app/

### 5.icestark
GitHub star: 1.8k
https://micro-frontends.ice.work/

### 6.Piral
GitHub star: 1.4k
https://piral.io/

### 7.Luigi
GitHub star: 681
https://luigi-project.io/

### 8.SystemJS
マイクロフロントエンドのフレームワークではなく、ブラウザモジュールソリューションを提供

GitHub star: 12.4

【MEMO】height: calc(100vh – 8px)がはみ出る話

# height: calc(100vh – 8px)がはみ出る話

検索窓を「bottom: 0」で表示しても出ないとき。
PCだと問題ない。が、スマホだと下にはみ出てしまう模様。
ナビゲーションバーとかの高さも「vh」に含まれるらしい。

「-webkit-fill-available」が計算で使えないようで、
なんか苦労したのでメモメモ。

CSS:
“` css

/* 親 */
.parent {
/* 3. dvhが対応されていない場合用 (諦め) */
height: calc(100vh – 8px);
/* 2. varが対応されていない場合用 */
height: calc(100dvh – 8px);
/* 1. 変数を使う（要: JavaScript） */
height: calc(var(–vh, 1vh) * 100 – 8px);
}

“`

JavaScript:
“` javascript

// innerHeightの1%を変数に入れる
const vh = window.innerHeight * 0.01;

[pdf.js] 手軽にPDFファイルをHTMLに埋め込めるWebComponentを作った

## PDFファイルを手軽にHTMLに埋め込みたい

PDFファイルをHTMLに埋め込む場合、従来だと`