f@ctor

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

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

モーダルのお話

## HTMLとCSSだけでモーダルが作れるようになったらしい。
フロントエンドになってはや数年、自作やらプラグインやらで対応してきた私には「本当ですか…？（疑い）」という気持ち。
実際に打って自分で見て試すことにしました。

https://codesandbox.io/embed/hirsty-shaw-4f7q47?fontsize=14&hidenavigation=1&theme=dark

…動く！ えっすごい
背景を固定したいだとか、そういうのも実装したいとなるとJSが必要ですが、
基本形はHTML + CSS で十分対応できます。
モーダルをスクロールしてるのに、下のページがスクロールされて困る場合は、
`[popover]`に対して `overscroll-behavior` を設定すれば、そのモーダル内のものだけスクロールができるように調節できます。モーダルがないところにカーソルを置いてスクロールすると背景がスクロールされます、固定化がされるわけではないです。

`popover` の値を変更すると閉じるボタン以外で閉じられないようにすることもできるし、背景もち

元記事を表示

Leafletで後から操作を無効化する方法

Googleで「leaflet 操作 無効化」等で検索しても、さくっと見つからなかったので自分用メモを兼ねて。

# はじめに
Leafletは、JavaScriptで地図APIを呼び出すための高機能なライブラリである。基本的には、ユーザーが地図を自由に移動できるよう作られているが、場合によっては、地図を固定したい（操作を禁止したい）場合もあるだろう。

移動させないことを前提として、地図を読み込みたいならば、例えば以下の記事のように、`L.map`へオプションを渡せば解決する。

https://qiita.com/ynunokawa/items/8da1f422a754a54d8707

しかし、特定の条件を踏んだ時にのみ、操作を禁止するという場合はどのようにすればよいのだろうか。

# 結論

`const mymap=L.map(“your_map_div_id”)`とした上で、以下の関数を呼び出すと良い。

“`js:index.js
function map_control_disable(){
//ドラッグやズーム等、すべてを禁止する
mymap.dra

元記事を表示

Mac Node.js 1万件の情報が入ったcsvを出力するスクリプトを作ってみる

## 概要

Macのローカルでjsのスクリプトを動かして1万件の情報が入ったcsvを出力してみる。

## 方法

1. MacのローカルにNode.jsを導入（筆者はVoltaを使ってNode.jsを管理している。Node.jsのバージョンは20.11.1を使用）
1. 任意のディレクトリを作成
1. 下記コマンドを実行して初期化

“`shell
npm init
“`

1. 下記コマンドを実行してcsv-writerパッケージをインストール

“`shell
npm install csv-writer
“`

1. 下記コマンドを実行してスクリプトファイルを作成

“`shell
touch generate_csv.js
“`

1. 作成したスクリプトファイルに下記の記載を実施

“`generate_csv.js
const createCsvWriter = require(‘csv-writer’).createObjectCsvWriter;
const

元記事を表示

分割代入 [JavaScript]

・配列の要素
・オブジェクトのプロパティを、
別個の変数に割り当てるスッキリと書ける構文となります。

分割代入を使うことで、みやすくコードを書くことができるので、詳しくみていきたいと思います。

## 目次：
– [1. 配列の代入](#1-配列の分割代入)
– [2. オブジェクトの分割代入](#2-オブジェクトの分割代入)
– [3. 関数のパラメータの分割代入](#3-関数のパラメータの分割代入)
– [まとめ](#まとめ)

## 分割代入

>参照：MDN
>分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。

とあります。

## 1. 配列の分割代入

#### 1-1. 例：配列の分割代入

配列の中身をそれぞれ、別の変数に格納してみます。
１位は金メダル、２位は銀メダル、３位は銅メダル、4位以降にはその他の人をそれぞれ格納してみます。

raceResultsという配列の中に５人の名前が保存されていま

元記事を表示

CSSが適用されない事象について

## 記事を書こうと考えた背景について
* JavaScriptでTODOアプリを作成する前にhtmlとcssで画面の全体像を作成していて書いたcssが想定通りに表示されなかった為

cssが適用されなかったときのコードと実行結果
htmlファイル
“`




Snake Game


未完了のTODO

  • TODOです

元記事を表示

エアコン嫌いの家族を熱中症から守りたい

# どうしてクーラーつけないの？！
ある夏の日に実家に帰った時のこと。
うだるような暑さの中、リビングでクーラーもつけずにテレビを見る父がいた。
かろうじてシーリングファンは回っていたものの、父の隣で寝そべっている猫もぐったりしている。驚いて「どうしてクーラーつけないの？！」と聞いたら、「窓開けてれば、涼しいよ」と、ニコニコしながら父は言った。

# 人は老化が進むにつれ、温度に対する感覚が弱くなる
人は老化が進むと熱放射能力が低くなり、深部体温が上昇しやすい。また、温度に対する感覚も弱くなり「暑い」と感じにくくなったり、喉の渇きを感じにくくなったりすることで、熱中症にかかりやすいと言われている。
【参考文献】
・熱中症ゼロへ
　[熱中症、こんな人は特に注意！](https://www.netsuzero.jp/learning/le05)

# 熱中症の約4割は室内で発生している
消防庁の統計によると、熱中症の約4割が室内で発生しており、熱中症死亡者数で見ると65歳以上の高齢者が8割を占めている。
屋内で熱中症により亡くなった高齢者の約9割は、エアコンがあるのに使用していなかったとの

元記事を表示

React Flowでできること一覧

# はじめに
私は今、React Flow[^react-flow]を使ったWebアプリケーションの開発に携わっています。
[^react-flow]: React Flow. https://reactflow.dev/

そこで、React Flowを使ってできることを備忘録としてまとめておきます。

新しいものを見つけ次第追加していきます。

# できること一覧

## ドラック&ドロップでノードを追加できる

https://reactflow.dev/examples/interaction/drag-and-drop

## ノードとリンクのレイアウトを自動で変更できる

https://reactflow.dev/learn/layouting/layouting

## ズームレベルによってノード内の文字を表示するかどうかを切り替えることができる

https://v9.reactflow.dev/examples/contextual-zoom-features

## mapの座標などを取得することができる

https://reactflow.dev/learn/

元記事を表示

【ミニアプリ作成】ラジオボタンを使用したクイズ【HTML,CSS,JavaScript】

HTML、CSS、JavaScriptの学習を終えて何か作ってみようと思い、ミニアプリ３問クイズを作ってみました。

備忘録を兼ねて記載。

## ラジオボタンを使用したクイズ

作ったミニアプリは3問の４択クイズ。
最後に解答ボタンをクリックすると点数が表示される。

HTML、CSS、JavaScriptのみで作成。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3690542/a252c1a0-c43c-e362-d31e-4d605413698b.png)

## コード

まずはhtmlから。

“`html




quiz
#プログラミング #Javascript #nodejs #chrome ビット演算・算術演算、領域管理の速度差

**本内容を利用した場合の一切の責任を私は負いません。**

いつもコーディングする時に、コンバイル言語の名残で、書き方で違いがでるか迷うので実験してみた。
実験結果から、ソースが違うだろうから、node.jsとChromeではやはり挙動に違いがありそう。
書き方は意識した方がいいのかも。
最適化もありそうな気がする。

# バージョン
– OS
OS 名: Microsoft Windows 10 Home
OS バージョン: 10.0.19045 N/A ビルド 19045
システムの種類: x64-based PC
– node.js
node-v20.9.0-win-x64.zip
– Chrome
バージョン: 125.0.6422.114（Official Build） （64 ビット）

#ソース
“`javascript:a.js
function aa() {
let total;

console.time(“elap3”);
total = 0;

for

元記事を表示

「JS」パラメータに再び値を割り当ててはいけない

背景　
—————————————

以下のようなコードを書きましたが、書いてはいけないと言われたので、その理由について調べてみました。
“`js
function test(value) { // value パラメータ
value = 13; // パラメータ再び割り当て
return value;
}
test(30);
“`

例
—
関数内でパラメータの再割り当てるコードを書いてみました。どんな結果が出るか予測してみましょう。
“`js
var makePerson = function(favoriteColor, name, age) {
if (arguments.length < 3) { favoriteColor = "green"; name = arguments[0]; age = arguments[1]; } return { name: name, age: age,

元記事を表示

【個人開発】麻雀の着順条件ツールを作りました

# はじめに

初のWebサービスデプロイです。

# アプリの紹介
![welcome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/107eceac-ba99-b2f0-f836-39509a5ce804.png)

## サービスURL

レスポンシブ対応（スマホ・タブレット・PCで使用可能）です。

https://mahjong-runk-navi.glitch.me/

## Github

https://github.com/Kohki-Takatama/mahjong_runk_up_navi

:::note info
「着順ナビ」は「どうすれば着順が高くなるか」がわかる麻雀ツールです。
:::

:::note warn
雀魂など「外部ツールの使用」が禁止される環境での使用は想定していません。
友人との麻雀や、振り返りなどでお使いください。
:::

## 使い方

| |
|:-:|
| ![スクリーンショット 2024-06-04 14.16.50.png](

元記事を表示

レスト構文 [JavaScript]

レスト構文は、「…」と点を３つ書いて表現するものとなりますが、
以前書かせて頂いたスプレッド構文と似ているものになるのでごちゃごちゃにならないように整理したいと思います。

簡単に区分けするのであれば、

スプレッド構文　＝　「広げるイメージ」
レスト構文　＝　「集めるイメージ」

で覚えればいいかと思います。
特に、英語のスプレッドは「拡散」という意味もあり、ゲームやアニメを多少かじっている人であれば耳馴染みもあるかと思います。

それでは、スプレッド構文は、前回まとめた記事を参照していただき、今回はレスト構文についてまとめていこうと思います。

https://qiita.com/shisshi_engineer/items/9c75dae5ba1834bc5ed3

## 目次：
– [レスト構文](#レスト構文)
– [まとめ](#まとめ)

## レスト構文

>参照：MDN
>残余引数構文により、関数が不定数の引数を配列として受け入れることができ、可変長引数関数を JavaScript で表すことができます。

とあります。

#### 1-1. 例：パラメータの中身の

元記事を表示

Markdown is all you need!

![IMG_2852.jpeg](https://storage.googleapis.com/topdowncom/content/kqmyfjwWDJNNkVkY6G3mlruHqlx2/e647d470-d9fe-44f0-a4d3-7e67e1f2f3db/IMG_2852.jpeg)

# Markdown AI プロジェクト始動！

## MarkdownとAIでWebサイト作成？

![IMG_3080.jpeg](https://storage.googleapis.com/topdowncom/content/kqmyfjwWDJNNkVkY6G3mlruHqlx2/20532f37-4150-458f-970c-c56e81aadf01/IMG_3080.jpeg)

Markdownのみで、Webサイト生成やサーバ処理を全て実現する、Markdown AIが当社よりリリースされました！

私はこの企業のファウンダー兼 アーキテクトとして、この1年間、絵本執筆よりはるかに多くの時間を費やしてきました。

無事リリース出来て嬉しいです。

企画や開発に携わって

元記事を表示

【JavaScript】もっと見るボタンの実装

## はじめに
[参考記事](#参考記事)を読みながらjqueryで作成された「もっと見るボタン」を実装したのですが、理解のために自分でJavaScriptのコードに置き換えてみました。

以下のコードを読んで、「nth-child以外でわかりやすく書けないか？」と考えたことがきっかけでした。
“`
$(‘.comment-list:nth-child(n + ‘ + (moreNum + 1) + ‘)’).addClass(‘is-hidden’);
“`
（comment-listの6番目以降の要素に対してclass属性“`is-hidden“`を追加するっていうのはわかったけど…）

### 仕様
– イベントアプリの詳細ページ内でユーザーから送信されたコメントを表示する
– コメントが6件以上の場合に「もっと見るボタン」を表示する
– 「もっと見るボタン」がクリックされるか、コメントが5件以内の場合にボタンを非表示にする。
– コメントはページ内に直近で投稿された10件まで表示する。

## View
今回説明の関係上、Railsのビューに関する説明は省略させて頂

元記事を表示

【Typescript】 アサーション(as) を避ける

## はじめに
開発業務で下記のようなコードを見て、エラーが出ている理由が不明だったため型アサーションについて調べてみました。

“`typescript
type User = {
name: string;
age: number;
};

const tanaka = (): User => {
return { name: “田中” };
};
// エラー
// プロパティ ‘age’ は型 ‘{ name: string; }’ にありませんが、型 ‘User’ では必須です。

const yamaguchi = () => {
return { name: “山口” } as User;
}; // エラーではない
“`

## 型アサーションとは
型推論の推測結果とは関係なく、型を上書きする機能です。
コンパイラーよりもプログラマーがより正確な型を知っている場合に使用します。

つまり、確信のある型にのみ型アサーションを使用して、その他はコンパイラーに任せる方がバグを生みにくいコードになり

元記事を表示

javaScriptで存在しない関数を呼び出した場合、エラーにせずに何らかの処理を実行する

## はじめに

PHPの`マジックメソッド`やRubyの`method_missing`に近い機能をJavaScriptで実装する方法です

通常、javascriptでは、存在しない関数を呼び出すとエラーが発生します

“`js:test.js
const obj = {};
obj.some_method();
“`

“`
$ node test.js
E:\Users\tkykn\git\proxy\js_method_missing\test.js:2
obj.some_method();
^

TypeError: obj.some_method is not a function
at Object. (E:\Users\tkykn\git\proxy\js_method_missing\test.js:2:5)
“`

この`obj`を[Proxy](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)でラッ

元記事を表示

React 子コンポーネントから親コンポーネントの State を操作する例

## 三行で！

子コンポーネントで親コンポーネントのアクションを実行したいケースがあると思います。
これが少し面倒で、うまく行かず思ったような分離をできないなんて経験もあるのではないかと。
GPTもろくな文章返してくれないし、解説する記事も少ない気がするので一例として参考にしてみてください。

## 先に結論

こういうとき

“`js
interface Props {
state: boolean;
children: ReactElement;
}

export function Parent({ state, children }: Props): ReactElement {
return (
<>
ParentState: {state}
{children}

);
}

function Before() {
const [parentState, setParentState] = useState(false);

const parentAction = () => {
setPa

元記事を表示

Cypress コマンドチートシート

[こちらのwebサイト](https://medium.com/@anshita.bhasin/commonly-used-cypress-commands-5ba0f7b55cfc)を参考に、分かりづらいところを付け足しながら作成させていただきました。

インストール方法やCypressのメリットなどは[公式サイト](https://www.cypress.io/)でご確認ください。

## コマンド一覧

#### `cy.visit()` ：特定の URL にアクセスするために使用する

“`jsx
cy.visit(‘https ://www.amazon.jp/’)
“`

この例では、`cy.visit()`コマンドを使用して URL “ [https://www.amazon.jp/”](https://www.amazon.jp/)にアクセスしています。
これは、その URL のページの動作をテストする場合や、特定の URL にリダイレクトされたときのページの動作をテストする場合に役立ちます。

#### `cy.get()` ：ページ上の要素を選択するた

元記事を表示

how to handle the table.20240603

how to handle the table.
plese reference this site.

“`



Table Insertion and Update


Ke

配列のメソッド 高階関数 [JavaScript]

配列のメソッドについて、以前の投稿で書かせていただいたのですが、
高階関数の形を取る配列のメソッドについては言及していなかったので、
高階関数をまとめた上で、改めて高階関数の形を取る配列のメソッドについてもまとめておこうと思います。

また、高階関数とは？配列のメソッドの基本とは？と疑問に思われた方は、下記文章にて記載させて頂いております。

ご参考までに。

>参照：
>[配列　[JavaScript]](https://qiita.com/shisshi_engineer/items/a6c39764536fb960dda6)
>
>[高階関数の基本 [JavaScript]](https://qiita.com/shisshi_engineer/items/5a8d577d9eb3cf7a7a7a)
>

## 目次：
– [1. forEachメソッド](#1-foreachメソッド)
– [2. mapメソッド](#2-mapメソッド)
– [3. filterメソッド](#3-filterメソッド)
– [4. someメソッド](#4-someメソッド)
– [5. ev

OTHERカテゴリの最新記事