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

Axios 簡単なデモページの作成2[JavaScript]

APIから情報を取得する方法を学んだので、
その知識と今まで学んできたことを総合して簡単なデモページを作成していこうと思います。

デモページの内容：

TV番組の検索を行えるアプリを作成していきます。

検索したTV番組に応じた画像を、ループを回して表示する一覧画面を作成していきます。

こちらでは、作成した内容を要約しながら、作成手順や具体的に使用した関数やロジックの内容をまとめていけたらと思います。

目次：
– [デモページ詳細](#デモページ詳細)
– [HTMLファイル](#htmlファイル)
– [ロジックの説明「JavaScriptファイル」](#ロジックの説明javascriptファイル)

## デモページ詳細

今回は、TVMAZEというTV番組のAPIから情報を取得していきたいと思います。

ま

JavaScriptの使い方　初心者向け

# Webデザイナー歴1．5年で、やっとJavaScriptに手を出す
Webデザイナーになって、1年を過ぎた頃から、JavaScript使えるようにしないとな〜、と思いつつ、なかなか手が出せませんでした。
ただ漠然と**難しそう・・・**　という先入観があったからです。

やらないとと思いつつ、のほほんと過ごしていた、そんなある日、試練はやってきました・・・。
業務でJavaScriptを使わざるを得ない状況になったのです:sweat:。
その試練とは、、、

**「バナーをスライダーで表示させる」**　というもの。

慣れている人は簡単でしょう。
ですが、初心者には、難しいんですよね。

ということで、どうやって私がスライダーを表示させたのか、その経緯をまとめます。:pencil:

## まず最初に何をしたか
とりあえず、参考サイトを探しまくりました。:desktop:
検索キーワードは、

:::note info
* JavaScript初心者
* JavaScript　スライダー
* メインビジュアル　切り替わり
:::

分からなかったら調べるのは、まず大事です。

##

obnizを使用した起床時の温度でメロディを変える朝のわくわくツール

obnizのキットがあるので、起床時のワクワク度を上げるアイテムをお試しで作りたいと思います。
※Node-RED、Codespaces、obnizを使用します

## こんなの作りましたNode Red

* 1番目のフロー：obnizの強制終了
* 2番目のフロー：時刻チェックループの強制終了
* 3番目のフロー：本流のフロー

### 使用方法の概要
1. 本流フローの最初のノードに、時間と温度を入力します。ここで指定する時間はアラームをかけたい時刻です。温度は「この温度以上だったら、暑くて耐えられないな」という温度に指定します。（例えば、今日は朝から熱そうだからクーラーをもっと強くして、一日家の中でゴロゴロしていよう思ってしまう温度です）
2. 本流フローを実行します
3. 指定時刻になると温度を計測して、指定温度より低ければ「君が代

かんたん曜日表示WEBアプリ※.html,.css,.js総計70行ない!

# はじめに
今日はサマーウォーズのフィルムコンサートということもあり，日付から秒で曜日を算出し表示するWEBアプリケーションを作ってみたのでここに残します．
本当に最低限の機能なので，デザインとかうんぬんかんぬんはありません！
実際のWEBアプリは[こちら](https://hiromu16.github.io/park/your-web-app/)です．
先週から，突発的に[WEBサイト](https://hiromu16.github.io/park/)も作り始めたので，これは研究の息抜きに成長させていきます．
html，css，javascriptの３つのファイルをすべて同じフォルダに格納してください！
## 注意！
現在，PCではギリで数値を打ち込めるようになってますが，スマホ等だとカレンダーしか出てこなくてただのカレンダーアプリと化しています

# HTML
“`html:index.html




LealfetでクリックしたらJavaScriptを動作させたい！

## またもやLeafletの記事です。
さて、今回は、Leafletのマーカーやオブジェクト等をクリックした際に、JavaScriptの関数を動作させたい！となったときに見る記事です。
↑？？？？

## なんで必要になったか
わたしが開発している、[アメダス天気Viewer](https://nanka.cloudfree.jp/webapps/amedas/)という(ウェザ◯ニュ◯スのパクリみたいな)アプリで、アメダス観測点をクリックした際に、グラフを描画する機能をつけようと思ったところが始まりでした。

## どうするか。
実は結構簡単で、マーカーオブジェクトとかに、

“`javascript
circle.on(‘click’, function(e) { createGraph(

LeafletのremoveLayer()でつまづいたこと。

## LeafletのremoveLayer()とは？
`removeLayer()`とは、Leafletという地図ライブラリから、マーカーやポリゴン、その他もろもろを消すときに使うものです。
`map.removeLayer(レイヤーの名前)`という形で使います。

## つまづき① レイヤーの名前…？
さて、2年前の私、震度分布図を開発しよう！と言って、Leafletの沼へ沈んでいったのですが、
あれ？マーカーを消さないといけないんだけど、どうやって消すんだろう？と、思い立って調べてみることにしました。

そうしたら、`map.removeLayer(レイヤーの名前)`でできますよ～って感じのものが、調べて10分くらいしたら出てきたので、ほーん、やってみようではないか。と思い立ち実装してみることにしました。

:::note alert
ちょっと当時の感覚が出てきたので愚痴りますが、
なんかLeafletのレイヤー削除周りの解説って少なくないですか？
ん？わたしの検索能力が低い…？
:::

そして、ん？レイヤーの名前？というところにつまづいて、
その時私は`pane`、つまり重ね

node.jsによるサーバの基本構造

# プログラム例
node.js演習用のプログラム例をいくつか覚えとして、掲載しておきます。

## 最も基本的なサーバプログラム
リクエストがあれば、単にコンテンツを返す例。
アロー関数とコールバック関数という概念に慣れてもらうことが必要です。

“`javascript
const http = require(‘http’);

const server = http.createServer((req, res) => {
res.writeHead(200, { ‘Content-Type’: ‘text/plain’ });
res.end(‘Hello, World!’);
});

const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
});
“`

## POSTメソッドの確認
POSTメソッドを確認するためのnode.jsプログラム。

“`javascript
const h

インプットから即アプリ作成を実施

週末に2日ほどJavascriptとReactの基礎を勉強した後、
学んだことのアウトプットとして簡単な学習記録一覧のアプリを作成しました。

今回は作成する中で難しかった部分などを共有していきたいと思います。

# 使用したツール
– React
– Javascript
– VSCode
– Vite

# 作成したアプリの内容
アプリの内容を簡単にご紹介します。
①学習内容と学習時間をユーザーが入力できるようにする。

②そして入力した内容が、入力ボックス下へ表示されるようにします。
![スクリーンショット 2024-06-30 10.29.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671

JavaScriptをTypeScriptに置き換えてみた！

# はじめに
こんにちは！WEBエンジニア転職を目指しているK.Yです！
以下のJavaScriptコードをTypeScriptに置き換えてみました！

React/JavaScriptで実装した記事もあります。

https://qiita.com/ken887265/items/a6dfc1f62ee185b986b2

https://qiita.com/ken887265/items/8d6255a5aba95897ca67

https://qiita.com/ken887265/items/f8850ec0fd5757c2bd39

https://qiita.com/ken887265/items/6104486dd665a462ea1c

:::note warn
重複している部分は省略しています！
:::
## コード
“`typescript
index.tsx

import React from ‘react’;
import { createRoot } from ‘react-dom/client’;
import ‘./index.css’;
impor

JavaScriptの闇 初心者向け

JavaScriptの闇という言葉を聞いたことがあるでしょうか。
JavaScriptは一部書き方を他のPython等の言語と同じように書いてしまうと後で致命的なバグの原因になることがあります。
そんなJavaScriptの闇の一例を紹介します。

## varの欠陥
JavaScriptは変数を宣言する時にvarかletを使用します。
“`javascript
var hoge = “hoge”;
let hoge = “hoge”;
“`
2015年以前はverしか選択肢がありませんでした。そんなvarにはかなりの欠陥があります。

以下のようなコードがあったとします。
“`javascript
var greeting = “Hello”;
if(true){
var greeting = “Bye”;
}
console.log(greeting);
“`
この時、コンソールに表示される文字列は「Hello」でなければいけません。
それは、if文内で宣言されている変数は、そのif文内でしか参照できないよう、変数のスコープが発生するからです。

しかし、これを実際

【jQuery/JS/TS】DOMの取得方法

# クラス追加と削除

## jQuery

“`
$(‘#myElement’).addClass(‘myClass’);
$(‘#myElement’).removeClass(‘myClass’);
“`

## javascript
“`
element.classList.add(‘myClass’);
element.classList.remove(‘myClass’);
“`

# クラスのつけ外し

## jQuery
“`
$(‘#myElement’).toggleClass(‘myClass’);
“`

## javascript
“`
element.classList.replace(‘oldClass’, ”);
“`

【jQuery/JS/TS】DOMの取得方法

# DOM取得

## jQuery

“`javascript
var elementId = $(‘#myElement’);
var elementClass = $(‘.myElement’);
“`

## JavascriptとTypescript

“`javascript
var elementId = document.getElementById(‘myElement’);
var elementClass = document.getElementsByClassName(‘myElement’);
“`

【Figma Plugin】Figma PluginのVariableを操作する

## はじめに

FigmaのPluginを開発する際、Figma PluginのVariablesを操作したいと思ったことはありますか？
この記事では、Figma PluginのVariablesを操作する方法を解説します。

## Variablesを取得する
今回取得するVariablesは以下の画像のように定義されている `Color` を取得します。


### ⚪︎ ローカルのVariableを取得する

“`ts
const variables = await figma.variables.getLocal

JavaScriptのメソッドチェインが遅い理由

RustとJavaScriptで似たような書き方のメソッドチェインを比較します。

# Rust
“`rust
fn main() {
let v = vec![0, 1, 2];
v.iter().map(|elem|{
println!(“map: {elem}”);
elem
}).for_each(|elem| {
println!(“for_each: {elem}”);
})
}
“`
出力はこんな感じになります。
“`console
map: 0
for_each: 0
map: 1
for_each: 1
map: 2
for_each: 2
“`

# JavaScript
“`js
const v = [0, 1, 2]
v.map((elem) => {
console.log(`map: ${elem}`)
return elem
}).forEach((elem) => {
console.log(`for_each: ${elem}`)
})
`

Visual Studioで入力候補(IntelliSense)が全く出なくなった

Visual StudioでASP.NET Coreを使いフロントはTypeScriptを用いたウェブサイトを作っていたところ、入力候補(IntelliSense)が全く出なくなりました。
文字を入力しても画像のような入力補助が全く出ない状態でした。

# 原因と解消方法
Microsoft.TypeScript.MSBuildのバージョンが5.5.0-rcだったので、5.4.5(最新の安定版)に変更したところ解消しました。
このバージョンについては遠からず問題が解消すると思いますし、この事象がこの原因だけで起こるわけではもちろんないですが、MSBuildが原因で起こりうるということで記録しておきます。
# 調査手順
最初にVisual Studioの再起動・更新・入れ直し等を行ったものの改善しませんでした。切り分けとして、他のソリューションに確

我が子を千尋の谷に落とすとほぼ死ぬ

## 我々は意志薄弱でやろうと思っても出来ないんですよ
久々にQiitaにログインして色々と記事を流し読みしており、この記事に出くわしたわけですが、
[人類は気づいていた。この勉強の仕方が1番早いということを。](https://qiita.com/Sicut_study/items/79838a4b8ec36bc3a961)
自分ももうすぐ３年ほど独学してきており、独学についての記事ということで読んでみたわけなのですが。なんか色々と書いてあって、

*この学習法ではいきなりアプリケーションを作るところから学習を始めていきます
例えば新しい言語であれば、そもそも環境構築がわからない問題にぶつかるはずです。
問題にぶつかったときに初めてインプットをして学び、試すこのサイクルを繰り返してアプリケーションを作り上げていくという学習方法です。*

いや、**初学者はこのやり方死ぬんじゃね**　と思いました。
例えば、フォトアルバムアプリを作りたいやねん　と思います。
で、この　TDDなる方法論でやると、いきなりフォトアルバムアプリを作るという所から始めよ　というわけですが、現実的に作ろうとする

画像入力機能つきテキストエリアを実装!スマホでも使えるプレビュー機能付き

# 始めに
スマホでも使えるプレビュー機能付き多機能入力フォームの実装方法の紹介です。

この記事ではHTML/CSS/JSとReact Nativeでの実装方法を書きますが、二つを参考にすればReactでも実装できると思います。

この手法のメリットは主に二つ
1:移植性
仕組みが単純なので、移植しやすいです、少なくともReact nativeには実装可能です。
2:カスタマイズ性
テキストエリアの間に任意のエレメントやコンポーネントを挿入する形式なので、非常にカスタマイズ性が高いです。

**完成形**


## 基本概念

https://qiita.com/tsmd/items/fce7bf1f65f03239eef0

この記事の可変テキストエリアを画像と組み合わせます。

構造としては

“`HAML
<

[Node.js] フォルダ構成を作成する方法

# はじめに

実務でフォルダ構成を作成する実装が必要になり、その方法をまとめてみました！

### 余談：
初期セットアップとか自動化とかで必要だったわけではまったくなく、普通の業務アプリで必要になりました。。。
そんなケースあるのか、という感じですが、、、

# 解決手法

Node.js でフォルダ構成を作成するには、`fs`（ファイルシステム）モジュールを使用します！
この `fs` モジュールは、ディレクトリやファイルの作成、削除、移動などのファイルシステム操作を実行できます！

それでは以下に、指定されたフォルダ構成を作成するための例を示します。

### 例: フォルダ構成を作成する

以下の構成を作成することを目標としましょう。

“`plaintext
project/
│
├── src/
│ ├── controllers/
│ ├── models/
│ └── views/
│
├── public/
│ ├── css/
│ ├── js/
│ └── images/
│
└── logs/
“`

### 手順

流れとしては以

【アロー関数】ReactのJSX内でmapを使って表示ができない問題

JSおよびReact初心者で、学習中に題名の問題が発生しました
結構詰まったものの、原因が基本的な事だったため同じ轍を踏まないよう記事とします

# 問題

以下のコードで発生しました

“` React
export const DataTable = ({data}) => {
return (

{data.map((col) => {
{col.key}
})}

)
};
“`

# 原因

アロー関数の使い方が間違っていました
アロー関数の`=>`の後に`{ }`を外したところ動作しました

“` React
export const DataTable = ({data}) => {
return (

{data.map((col) =>
{col.key}

[Node.js] ZIP ファイル圧縮方法をまとめてみた

Node.js で ZIP ファイルを圧縮する方法はをまとめてみました！

### 方法 1: `archiver` を使用する方法

`archiver`は、Node.jsでZIPファイルを圧縮するための強力なライブラリです。

#### インストール

“`bash
npm install archiver
“`

#### 使用例

“`javascript
const fs = require(‘fs’);
const archiver = require(‘archiver’);

function zipDirectory(sourceDir, outPath) {
const output = fs.createWriteStream(outPath);
const archive = archiver(‘zip’, {
zlib: { level: 9 } // 圧縮レベル
});

output.on(‘close’, () => {
console.log(`ZIP file has been written. Total si