f@ctor

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

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

D3.isを始めたい人むけチュートリアル

## はじめに

D3.jsに関する12章以上のチャプターとコード例を含む形で構成します。

## D3.jsの基礎と活用ガイド

D3.jsは強力なJavaScriptライブラリで、データを視覚化するための豊富な機能を提供します。この記事では、D3.jsの基本から応用まで、段階的に解説していきます。

## 第1章: D3.jsの概要

D3.jsはData-Driven Documentsの略で、データに基づいてDOMを操作するためのライブラリです。SVGを使用して、インタラクティブなグラフや図を作成できます。

## 第2章: D3.jsのセットアップ

D3.jsを使用するには、以下のようにHTMLファイルにスクリプトを追加します。

“`html

“`

## 第3章: 基本的な選択と操作

D3.jsの基本は要素の選択と操作です。

“`javascript
d3.select(“body”)
.append(“p”)
.text(“Hello, D3!

元記事を表示

CordovaアプリでGoogleMapからロケーション情報を共有する

[散歩ルート計画アプリを作った](https://qiita.com/poruruba/items/90d25395670f1bf5a5fe) の作成時に習得したテクニックです。

GoogleMapでスポットをクリックすると以下のような詳細ダイアログが表示されます。
そのダイアログの右上に共有ボタンがあり、これを選択すると他のアプリにこの情報が共有されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/c381f679-4658-15d1-5eff-b97f210c87fe.png)

この共有機能をCordovaアプリで実現してみます。

# 共有内容

共有ボタンをクリックすると、以下のような共有先アプリの選択ダイアログが表示されます。
今回はこの選択先アプリに含まれるようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/ceb1f015

元記事を表示

【JS, React初学者必見】thisとbind()の謎を解く(アロー関数との違いも解説)

# JavaScriptの`bind()`メソッド解説

## 1. はじめに

JavaScriptの`bind()`メソッドは、関数の挙動を制御するための強力なツール今はですが、初学者が非同期処理と同じくらい理解不能に陥ってしまうのがこの`bind()`です。
今回は`bind()`の使い方と概要について解説していきます。

## 2. 関数の呼び出し方とthisの値

まず。大前提として理解しておかないといけないことは、**JavaScriptでは関数の呼び出し方によって`this`の値が変わる** というころです。

まずの次の見慣れた形を見ていきましょう。
### 2.1 オブジェクトのメソッドとして呼び出す

“`javascript
const person = {
name: “Alice”,
greet: function() {
console.log(“こんにちは、” + this.name + “です。”);
}
};

person.greet(); // 出力: こんにちは、Aliceです。
“`

この場合、`this`は`pers

元記事を表示

[React]Hooksの備忘録

# 投稿理由
React Hooksの復習して理解を深める為
随時更新していきます。

# useState
hooksの中で一番使われている
コンポーネントの値を保持したり、更新するために使う
使用例：　入力フォームなど
“`
const [状態変数, 状態を変更するための関数] = useState(状態の初期値);
“`

# useEffect
コンポーネントの副作用を制御する為につかう
副作用とは、UI構築以外の処理のことをいいます。
使用例：外部APIからデータを取得する
“`
useEffect(() => {
// 副作用処理を記述
return () => {
// クリーンアップ処理を記述
};
}, [副作用関数の実行タイミングを制御する依存配列]);
“`

# useContext
複数のコンポーネント間で共通して利用したいデータを管理する
使用例：認証情報
“`
const コンテキストから値を受け取る変数 = useContext(コンテキストオブジェクト);
“`

# useRef
refオブジェクトを生成するときに使う
再レンダリ

元記事を表示

散歩ルート計画アプリを作った

今度、山手線を歩いて一周しようかなあと思っているのですが、散歩ルートを計画するのに都合がよいアプリが見当たらなかったので、自分で作りました。
以下のようなことができるようにします。

[事前準備]
・GoogleMapで観光スポットを検索して散歩ルートに追加する。
・観光スポットの散策順番を入れ替えられる。
・観光スポットごとにメモを書き込んだり、URLを覚えておく。
・乗換案内アプリでの検索結果をメモとして保存しておく。

[当日]
・散歩中はGPS等を使って常に緯度経路を記録する。
・観光スポットの位置を表示する。
・観光スポットまでの道のりをGoogleMapを使ってルート表示する。
・観光スポットごとに写真を記録する。

[後日]
・当日歩行ルートを観光スポットとともに参照できる。

もろもろのソースコードは以下に上げました。

https://github.com/poruruba/Planning_Client

いろんなテクニックを使ったので、のちほど個別に投稿しようと思います。

# 全体構成

「散歩中はGPS等を使って常に緯度経路を記録する。」を実現するためには、ネ

元記事を表示

Nodeビギナーズブックでつまったところ(formidableのインタフェースが変わっている)

## 要点
[Nodeビギナーズブックの最後の方](https://www.nodebeginner.org/index-jp.html#handling-file-uploads)は当時とformidableのバージョンが違うため、そのままでは動かない。

:::note warn
筆者はJavaScript/TypeScript/Node.jsは全くの初心者ですので、
本記事の内容は正確ではない可能性があります。
:::

# 目次

– [エラー内容](#エラー内容)
– [原因](#原因)
– [解決方法](#解決方法)
– [参考](#参考)

:::note info
開発環境
+ Ubuntu 24.04 LTS
+ node v20.16.0
+ formidable@3.5.1
:::

# エラー内容

“`javascript:requestHandlers.js
function upload(response, request) {
console.log(“Request handler ‘upload’ was called.”);

va

元記事を表示

JavaScriptのフリーランス求人・案件

## JavaScriptのフリーランス求人・案件について

JavaScriptのフリーランス求人・案件の業務委託における月額相場単価は、作業時間の目安を週5常駐で月140~180時間とした場合、60~80万円程度です。
JavaScriptのフリーランス求人・案件の平均単価は70.5万円、中央値単価は70万円、最高単価は500万円、最低単価は10万円です。（※調べ/2024年07月）

JavaScriptのフリーランス求人・案件の実務経験年数に応じた単価相場は以下の通りです。

・JavaScript経験1年未満：35万円前後 (年収420万円)
・JavaScript経験1年～2年：42万円前後 (年収504万円)
・JavaScript経験2年～3年：60万円前後 (年収714万円)
・JavaScript経験3年～5年：70万円前後 (年収840万円)
・JavaScript経験5年以上：84万円前後 (年収1008万円)

## JavaScriptはオブジェクト指向のスクリプト言語のひとつです。

JavaScriptと名前の似ているJavaは、名前が似ているだけで全く

元記事を表示

【React】たにぐちまことさんのReact入門備忘録

# はじめに
たにぐちまことさんのReact入門を拝見させていただきましたので、自分なりの備忘録としてまとめました。とてもためになる動画を配信していただき、ありがとうございます。

https://t.co/CCaqMGQRH3

# 基本事項
– sampleという名のReactのプロジェクトを作成
`$ npx create-react-app sample`

– サーバを起動
`$ npm run start`
（`$ npm start`でも良い。これは上記のエイリアス。）

– babelがないとJSXが使えないが、`create-react-app`すればJSXが使えるようになる

– JSXでは、class属性は、`className` と書かなければならない

– JSXの中でJavaScript部分の変数や関数を使う場合は、`{}`で囲えば良い

– JSXで属性値にJavaScript部分の変数や関数を設定する時は、””は不要。{}で囲むだけで良い

– Bootstrap などを使いたい時は、プロジェクトディレクトリ -> public -> index.htm

元記事を表示

Plotlyで始めるデータ可視化：初心者のためのガイド

## はじめに

こんにちは！今日はデータ可視化ライブラリのPlotlyについて学んでいきましょう。初心者の方でも理解できるよう、20の章に分けて解説します。

## 1. Plotlyとは

Plotlyは、インタラクティブなグラフやチャートを作成するためのJavaScriptライブラリです。ウェブアプリケーションでのデータ可視化に最適です。

## 2. セットアップ

まず、HTMLにPlotlyライブラリを含めます：

“`html

“`

## 3. 基本的な折れ線グラフ

簡単な折れ線グラフから始めましょう：

“`javascript
var trace = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: ‘scatter’
};

var data = [trace];

Plotly.newPlot(‘myDiv’, data);
“`

## 4. 棒グラフ

次に、棒グラフ

元記事を表示

【ReactFlow】Cannot assign to read only property ‘width’ of object ‘#‘ TypeError: Cannot assign to read only property ‘width’ of object ‘#‘のエラーがでて画面の拡大縮小ができないときにしたこと

# エラー
“`
Cannot assign to read only property ‘width’ of object ‘#‘
TypeError: Cannot assign to read only property ‘width’ of object ‘#‘
at applyChange (http://localhost:3000/static/js/bundle.js:99275:34)
at applyChanges (http://localhost:3000/static/js/bundle.js:99247:7)
at applyNodeChanges (http://localhost:3000/static/js/bundle.js:99310:10)
at http://localhost:3000/main.3efe227f07ece2d34852.hot-update.js:81:175
at valueFromValueOrUpdater (http://localhost:3

【丸め誤差】なぜ0.1 + 0.2 ≠ 0.3となるのか？を解説する

# はじめに

前々から「`0.1+0.2=0.3000…..0004`と0.3にならないのは何でだろう？？」といった疑問を持っていましたものの、当時は深掘りをしていませんでした。下記が問題のソースコードです。

“`js
console.log(0.1+0.2); // 0.30000000000000004
“`

最近、Javascriptで勉強を始める中で、その理由について解説しており腑に落ちたので、本記事にて共有します。

# 0.1 + 0.2 ≠ 0.3となる理由

### 実は0.1や0.2は…

実は0.1や0.2もコンピュータの世界では、**「0.1」や「0.2」と表現されないのです**。
その理由として、コンピュータ上では2進数で表記されることより、0.1や0.2を正確に表すことができなくなっています。実際に計算される2進数表記(`toString(進数)`)、正確な数値(`toFixed(桁数)`)をそれぞれ表現をすると、下記のようになります。

“`js
/* 0.1 */
// 2進数表記：0.0001100110011001100110011

.gitignoreに含めたいファイルをpushしていたら反映されない

## はじめに
あまり遭遇しない状況だったので知りませんでした。気になった方は読んでみてください。

## 状況
1. 「.env.development.local」ファイルを間違ってpushしてしまっていた:scream:

2. githubのリポジトリから削除する前に、「.gitignore」ファイルに「.env.development.local」ファイルを追加しておこう:expressionless:

3. うーん、パスは正しいはずなのに、エクスプローラーに反映されない…:disappointed_relieved:
Javascriptプログラミングノート

# 変数の挙動

プログラムで使われる値は全てメモリ上に保管されている。

変数とは、番地への参照をするようなものである

変数に別の値が代入されると変数が保持されているアドレスが代入された値のアドレスに切り替わる

constは参照がロックされるイメージ

再代入できない

# データ型

プログラムで扱うデータにはいくつかの種類があり、そのデータの種類のことをデータ型または型と呼ぶ

データ型は大きく、次の2つに分類される

Primitive型　stringなど

非Primitive型　オブジェクト

プリミティブとは、原始的なという意味である

# Javascriptのオブジェクトについて

オブジェクトとはプロパティと呼ばれる値を格納する

オブジェクトとは、変数を管理する入れ物のようなものである

オブジェクトは複数の値を1つのまとまりとして管理できる

オブジェクトから値を取得変更する場合には、次の2つの方法を使用できる

## ドット記法

ドット記法では、オブジェクトとプロパティーを.でつなぐことで、オブジェクトの値の取得変更ができる

## ブラケット記法

ブ

.yamlファイルの簡潔まとめ

### 1. YAML(YAML Ain’t Markup Language)とは？
1. 人間が読み書きしやすいデータ構造の形式のこと
2. Webアプリケーション開発で使用されていることが多い
3. 開発者はこのファイルを参照することで、アプリケーションの基本的な構成を素早く理解できる

### 2. 書き方：
・基本的には「キーと値のペア」
・複数のキーと値のペアはインデントで区切って記述

キーと値のペアを「:」で区切る
“`
key : value
“`

データ階層の書き方
“`
animal:
cats: value
“`

配列の書き方（「-」を使用）
“`
animal:
– cats
– dogs
– bird
“`

オブジェクトの書き方（インデントを使用）
“`
user:
name: neko
age: 4
“`

コメントの書き方（#を使用）
“`
# これはコメントアウトです
“`

:::note warn
注意点
・インデントエラーになりやすい
:::

### 3. 例
“`
# アプ

初めてpaizaをやってみた「宝くじ JavaScript編」

# はじめに
paiza自体は、別の人のQiita記事で見たことはあったので、存在は知っていましたが、あまりやってみようという気にはなっていませんでした。
ですが、何か投稿しようと考えていたときに、ちょうどキャンペーンをしていたので、この機会にやってみようと思い、登録して、試しに一問解いてみました。

# 問題
今回解いてみたのは、ランクCの「宝くじ」です。
言語はなんとなく気分でJavaScriptにしました。

問題はシンプルで、
① 5つの数字が入力値としてくる。
② 1つ目の数字が当たりの数字。
③ 2つ目がくじを買った数
④ 3つ目以降は、買った番号。
⑤ 買った番号を当たりの番号と比較して、一等か前後賞かなどを判定する。
といった感じです。

問題の詳細は以下のURLから↓
https://paiza.jp/works/mondai/c_rank_skillcheck_archive/lottery

# 解いてみた

とりあえず最初に自分の思った通りに書いてみました。

“`js:qitta.js
process.stdin.resume();
process.std

Reactでアプリを作ってみた

## はじめに
今回は【React】を使って学習記録アプリを作成してみたので、その感想を共有します！

![React_学習記録アプリ_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3851095/a84875a2-c6cb-49b2-a946-e8166a208110.png)

## 開発環境

⚫︎OS
　・Mac

⚫︎エディター
　・VSCode

⚫︎使用技術
　・フロントエンドフレームワーク: React
　・ビルドツール: Vite

## つまずいたところ
今回の開発で、特に苦労した点が２点ありました。

1\. State内の配列を更新する方法。
　今までは、単一のテキストボックスを使ったシンプルな一覧表示の方法しか学習していませんでした。
しかし、今回は「学習内容」と「学習時間」という２つの要素を１つの配列として扱い、登録ボタンを押した時に一覧表示する必要がありました。

複数のプロパティを持つオブジェクトの設定方法や、配列の更新方法にかなり苦労しました。

![Rea

クエリパラメータを取得した後、URL上から消す方法

# 概要
JavaScriptにて、クエリパラメータを取得した後に、URL上（アドレスバー上）から見えなくする方法になります。

# 方法
**1.クエリパラメータを取得**
“`js:qiita.js
const urlParams = new URLSearchParams(window.location.search);
const param = urlParams.get(‘<クエリパラメータのキー>‘);
“`
:::note infoURL
ただ取得しただけでは、ページ更新した際に消えてしまいます。
保存したいならセッションに入れるなどしてください。
:::
　　
**2.履歴を置き換える**
“`js:qiita.js
history.replaceState(null, null, ‘<クエリパラメータがついていないURL>‘);
“`

# 実際の動作
以下のコードを動かしてみます。
“`js:qiita.js
const urlParams = new URLSearchParams(window.location.search);
const par

プログラミング言語を車に例えてみた

# はじめに

普段は記述的な記事ばかり書くのですが、今回はちょっと面白みのある記事を書いてみたいなと思い

「そーだ！プログラミング言語を僕の好きな車に例えてみよう！」

とさっき思いついてこの記事を投稿しました。笑

僕もそこまで車に詳しくないのですが、あまり車に詳しくない方達にも伝わるように例えていこうと思います。

※100%偏見と独断で例えているのでその辺はご了承ください。

# それではさっそく

## Python

![スクリーンショット 2024-08-15 14.53.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3829908/f8c9d57d-3256-ced8-5738-1ee3e593989a.png)

**ランボルギーニ**

これはあくまで私の偏見なのですが

Q. 「何のプログラミング言語が好きですか？」

A. 「Pythonです！」

と答える雰囲気と

Q. 「何の車が好きですか？」

A. 「ランボルギーニです！」

と答える雰囲気が似ているなと思ったか

【SwitchBot API+ GAS】温度と湿度から不快指数を快適に保つ！　エアコンの自動操作

きっかけ

最近、我が家では「SwitchBot」というスマート家電でエアコンを操作しています。アプリでは「室温が27度以上なら、冷房を25度に設定する」という設定をして、自動で26度近くを保っています。

しかし、湿度が低ければ26℃でも快適に感じますが、湿度が高いと26℃でも不快に感じることがあります。そのため**不快指数を計算した上で、エアコン設定をする**必要があると感じました。

不快指数とは？
不快指数は、「日中の蒸し暑さ」を表したものです。数字が大きいほど蒸し暑く不快で、65~70が快適とされています。そこから小さくなるほど、寒く不快となります。

気温と湿度から計算できます。
不快指数=0.81×気温+0.01×湿度×(0.99×気温-14.3)+46.3

| 不快指数 | 感じ方 |
|:-:|:-:|
| 〜55 | 寒い |
| 55〜60 | 肌寒い |
| 60〜65 | 何も感じない |
| 65〜70 | 快適⭐️←ここを常に保ちたい！ |
| 70〜75 | 人によっては暑い|
| 7

JavaScript HTTPリクエスト GET/POST

## GETリクエストを使い、テキストデータを取得する
JavaScriptを使い、HTTP通信によって、テキストデータを通信先から取得する。

### GETコード
“`js
function fetchUserInfo() {
const xhr = new XMLHttpRequest();
xhr.open(“GET”, “http://127.0.0.1:8080/page.html”);
xhr.send();
xhr.responseType = “text”;
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr);
const data = xhr.response;
console.log(data);
} else {
console.log(`Error: ${xhr.status

OTHERカテゴリの最新記事