f@ctor

JavaScript関連のことを調べてみた

JavaScript関連のことを調べてみた
目次

クリック可能な要素は div とかじゃなく、ちゃんと button とかにしよう

## 具体的には

たとえば、クリック可能な要素を用意したいとします。これは `div` タグでも実現可能です。

https://codesandbox.io/embed/xgmc68?view=split&module=%2Findex.html

でも、こういうのは `div` タグじゃなくて、ちゃんと `button` タグとかで書きましょう、という話です。

https://codesandbox.io/embed/4ywk5g?view=split&module=%2Findex.html

## div だと何がマズイ？

### アクセシビリティ

「アクセシビリティの配慮がなされている」を言い換えると、「環境 (デバイス) の違いや障がいの有無などに関わらず、誰でも利用しやすいように作られている」といったところ。

上の `

` のコードを例に考えてみます。本来「ボタンである」と示すべきところを、コード的には「特に意味を持たないコンテナ」となってしまいます。その結果、ボタンなのに**ボタンとして正確に認識されなくなり**･･･

– キーボードで当該要素を選択

元記事を表示

DOM/ Node/ Element の違い

# まとめ
– **DOM（Document Object Model=ドキュメントを物として扱うモデル）**：プログラム（JavaScript）からHTMLやXMLを自由に操作するための仕組み、データ構造
DOMツリーという階層構造を定義しているものがDOMという仕組み
– **Node**：DOMツリー（オブジェクトツリー）を構成する一つ一つの要素
– **Element**：Nodeの種類の一種（Element型Node）

# 詳細
## DOM
1. **プログラム（JavaScript）からHTMLやXMLを自由に操作するための仕組み、データ構造**
JavaScriptからHTMLドキュメントに要素を追加したり、ボタンクリック時のイベントを登録したり、スタイルや属性を変更したり、要素のサイズや位置を取得したり、こういったものはすべてDOMのAPIを使うことで操作できる。
1. **DOMツリー（オブジェクトツリー）という階層構造を定義しているものがDOMという仕組み**
![image.png](https://qiita-image-store.s3.ap-northe

元記事を表示

配列から木構造を組み立てる【TypeScript】

## はじめに

こんにちは！Shungiku です。
最近は就活のために専ら LeetCode の問題を解いていることが多いです。

さて、LeetCode では木構造の問題（[例えばこれとか](https://leetcode.com/problems/subtree-of-another-tree/description/)）において、入力のサンプルが以下のような配列で与えられます。
“`
root = [3,4,5,1,2,null,null,null,null,0]
“`

一方、実際に Submit した場合、関数（またはメソッド）の引数で受け取る入力値は木構造のルートのノードになっています。

ちなみにノードの構造は LeetCode では以下のように定義されています。

“`ts
class TreeNode {
val: number
left: TreeNode | null = null
right: TreeNode | null = null

constructor(val: number) {
this

元記事を表示

なっとく！関数型プログラミング　を読んで関数型プログラミングを学んだ

[EDOCODE](https://www.edocode.co.jp/)でエンジニアをしているYutakaです。

– こちらは社内勉強会で発表した資料を元にしています。

– 関数型言語の知識がほとんどないエンジニアが[なっとく！関数型プログラミング](https://www.shoeisha.co.jp/book/detail/9784798179803)で学んだ用語を一部まとめました。原著は[Grokking Functional Programming](https://michalplachta.com/book/)です。本書はScalaとJavaで説明がされていますが、できる限り社内で使われている言語(Go, JavaScript, TypeScript)でサンプルコードを記載しました。

– 書籍のソースコードは[こちら](https://github.com/miciek/grokkingfp-examples)に全て公開されています。　

# そもそも関数型プログラミングとは?

プログラミングのパラダイムには大きく①命令型プログラミング②宣言型プログラミングがあり

元記事を表示

【TypeScript】型ガードと型アサーションについて知ろう 【初心者向け】

# はじめに
この記事では、TypeScriptにおける「型ガード」と「型アサーション」のそれぞれの特徴と違いを備忘録として簡単にまとめました。これらはTypeScriptの型システムを理解し、安全に利用するための重要な概念です。型の不確実性を管理し、より堅牢なアプリケーションを開発しましょう。

# 型ガードとは

型ガードは、特定のスコープ内で変数の型を確定させる式や構文です。これにより、コンパイラはそのスコープ内での型の安全性を保証し、型エラーを防ぎます。型ガードは、`typeof`, `instanceof`などがあります。

### typeofを使用した例
“`
typeof 変数 === 型名
“`

“`typescript
const inputData = (data: string | number) => {
if (typeof data === “string”) {
return `入力された文字列は “${data}” です。`;
} else {
return `入力された数値は ${data} です。`;
}
}

元記事を表示

JavaScriptについて少し整理してみた（基本ほりさげ②）

※この記事はドラフト版です。

Javaと同じような感覚で使っていると、すごく違和感があるのでちゃんとJavaScriptの基本から確認してみました。

# オブジェクトとオブジェクトリテラル
“`js
let person = {
name: “John”,
age: 30,
gender: “male”,
greet: function() {
console.log(“Hello, my name is ” + this.name + “.”);
}
};
“`
### 定義
オブジェクトはプロパティの集合。プロパティとは名前（キー）と値（バリュー）が対になったもの。
オブジェクトリテラル{}という記法を用いて、オブジェクトを生成できる。

### 現在の認識
よく理解できないので、いったんこの認識で突き進む。

– クラスが前提ではない？javaのようにクラス作ってインスタンス化していく使い方をしない。
– オブジェクトがインスタンスのような感覚？
– 構造体とインスタンスの境目がないようなイメージ？

# オブジェクトの複製
#### パタ

元記事を表示

動画付きでイベントループの仕組みを解説した記事の紹介

# 背景
イベントループの勉強を放置してしまっていました。
GWを生かし消化しようと思います。

# 紹介

[こちら](https://coliss.com/articles/build-websites/operation/javascript/javascript-visualized-event-loop.html
)の記事で紹介されていた以下引用元の記事を紹介します

https://www.lydiahallie.com/blog/event-loop

youtubeは以下です！

lydiahallieさんのXはこちらです！

https://x.com/lydiahallie

# 自分用の用語まとめ
:::note
~実行コンテキストとは~
JavaScriptエンジンがスクリプトファイルをスキャンするときに作る環境です。
この環境の中でコードの変換と実行全体を処理します。

実行コンテキストには、グローバルと関数の2種類があります。
– グローバル実行コンテキスト

元記事を表示

海と森の生成（アレフガルド in マインクラフト Part5）

# はじめに
　[Part4](https://qiita.com/yamamorisoba/items/fdd1dfdc42510e64af5a)まででメルキド地方の地形はおおむね完成しましたが、草原と岩山のみで海と森は生成されていない状態でした。今回はPart4までに生成した地形に海と森を作ってみたいと思います。完成図は以下のようになります。

![Minecraft Education 2024_04_30 18_12_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297527/375f8740-ba8f-9edd-3745-af0eec4601f9.png)

# 海の生成
　今回、地形データのベースとして参照しているドラゴンクエストビルダースでは、海が2つのパターンに分かれています。

1. 徒歩で移動可能な浅瀬（深さ1）
1. 踏み込むとダメージとともに手前に引き戻される海（進入不可のため深さ不明）

　浅瀬というパターンが増えているものの、基本的には進入不可能になっているとい

元記事を表示

君は論理演算子を知っているか

## はじめに
JavaScript, TypeScriptで論理演算子を利用するときにいつもどっちがどっちだっけ？とわからなくなってしまうのでちゃんと理解するためにまとめようと思います

:::note info
この記事に登場するコードはNode.js v21.4.0で確認しています
:::

## JavaScriptにおける論理演算子
最初に論理積（`&&`）や論理和（`||`）を習う時は以下のように考えがちですが厳密には違います。

– 論理積: どちらもtrueの場合trueが返却される
– 論理和: どちらか一方でもtrueの場合trueが返却される

実際に実行してみると以下のようになります。
“`jsx
const test = 10 || true;
console.log(test); // 10
“`

どちらもTruthyなデータのため上記のように考えているとtrueが返却されるように思われますが、実際には10が返却されます。

また論理積で試してみると以下のようになります。

“`jsx
const test = 10 && 20;
console.l

元記事を表示

Turf.jsの使い方 ～地図の表示から実際に使用するまで～

## はじめに
今回は、Turf.jsで使われる機会が多いと思われる距離計算、面積計算、ポリゴン内の位置を返す機能を実際に試してみることにします。

## Turf.jsとは
空間解析に使用されるオープンソースのJavaScriptライブラリです。空間演算、GeoJSONデータ作成用のヘルパー関数、データ分類・統計ツールなどが含まれています。

https://turfjs.org/

## 準備

### 地図を表示する
Turf.jsを使う前に準備として地図を表示します。
地図はMapLibre GL JSを使ってOpenStreetMapを表示します。
ソースコードは以下となります。

“`index.html