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

# はじめに

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

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

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

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

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

# それではさっそく

## Python


**ランボルギーニ**

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

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 | 人によっては暑い|
|

JavaScript HTTPリクエスト GET

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

### コード
“`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}`)

エラー：ログアウトボタンが反応しない

# はじめに
過去記事にてボタンを押しても反応しなくて、少しだけ詳細をお伝えしていた、と思いますが、解決したので改めて記事にまとめてみようと思います

# 状況
表題にもありますようになぜかログアウトボタンをおしても反応しない状態でした。

# 教えていただいたヒントから色々確認
– 確認：dockerログ。controllers/user_sessions_controller。config/routes.rb。どれも記述コード問題なさそう
– 改めて起きている問題について：Webサイズの「ログアウト」ボタンコードの処理は反応している=つまり、turboは動いてはいるがリクエストの通り方がGETだけになっている。（ログからわかる）

試し1：ビルドしなおす
docker compose down してからdocker compose build –no-cache。完了したら改めてdocker compose up
ログアウトボタンは反応せず( ；∀；)

試し2：コードを変えてみる
Web幅変更前：`

2024年永久保存版！超初心者、未経験者向けHTMLとCSSのチュートリアル

## はじめに

こんにちは！今回はAIに頼んで2024年版のHTMLCSSのチューとるある記事を作りました！
必要なところだけコピペして試してみてください！

## 第1章: HTMLとCSSの紹介
HTMLとCSSとは何か、その役割とウェブ開発における重要性について説明します。HTMLはウェブページの構造を定義し、CSSはその見た目をスタイル付けするために使用されます。これらがどのように協力して動作するかを理解することが、ウェブ開発の第一歩です。

“`html

こんにちは、世界！

これは私の最初のHTMLページです。

“`

## 第2章: 開発環境の設定
ウェブ開発を始めるために必要なテキストエディタのインストールと基本的な開発環境の設定方法をガイドします。Visual Studio Codeなどのエディタを使用することで、効率的にコー

欧米ではやっているSvelteの超初心者向けチュートリアル！

## 第1章: Svelteの紹介と歴史

### 概要

Svelteは、2016年にRich Harrisによって開発されたオープンソースのJavaScriptフレームワークです。Svelteは、他のフレームワークとは異なり、ビルド時にコードをコンパイルし、ランタイム時のパフォーマンスを向上させます。これにより、より少ないコードで高速なウェブアプリケーションを構築できます。

### 特徴

– **仮想DOMを使用しない**: Svelteは、ReactやVueのように仮想DOMを使用せず、直接コードを操作します。
– **少ないコード量**: 同じ機能を持つコンポーネントを作成するのに、他のフレームワークよりも少ないコードで済みます。
– **リアクティビティ**: データの変更に自動的に反応し、UIを更新します。

## 第2章: Svelteのインストールとセットアップ

### 概要

この章では、Svelteをインストールし、プロジェクトをセットアップする方法を紹介します。Svelteを使用するには、Node.jsが必要です。

### インストール手順

1. **

HTMLだけでinputのrangeの横にnumber入力欄を作る

# 今までやっていたこと
JavaScriptを使ってinputのchangeイベントなどを使い変更時にnumberの値を変更していた
### HTML
“`


“`
### JavaScript
“`
const range = document.getElementById(‘range’);
const number = document.getElementById(‘number’);

range.addEventListener(‘change’, event => {
number.value = range.value;
})

number.addEventListener(‘change’, event => {
range.value = number.value;
})
“`

# これからは
formの中身で同期させる
こんな事ができるなんて知らなかった
### HTML
“`

【Javascript】Number型とBigint型の違いを図解で説明する

# はじめに

先日、Javascriptの勉強をしている中で、Number型とBigint型の違いについて学びがあったので、本記事にて共有します。

# Number型とBigint型

Javascriptにて、数値を返却する型として「数値型(Number型)」と「長整数型(Bigint型)」があります。これらの違いや用途について下記で説明します。

### 2つの型の違い

Number型とBigint型の違いは下記の通りです。

上図のように、安全な整数範囲を超えた時の計算結果によって、違いが生じます。

ここで安全な整数範囲とは、**計算が正常に行われる整数の範囲**を表し、最大値が`Number.MAX_SAFE_INTEGER`、最小値が`Number.MIN_SAFE_INTEGER`でそれぞれ表現できます

TypeScriptの基本的な型

## 型アノテーション(型注釈)

“`tsx
変数名: 型名 = 値
let name: string = “Name”;
“`

## プリミティブな型

### number

– 整数、浮動小数、負の値、NaN(not a number)、infinity、2進数(0b)、8進数(0o)、16進数(0x)
– 範囲は約 -9007199254740991`-(2^53 − 1)`から約 9007199254740991`2^53 − 1`

### string

– シングルクウォート、ダブルクウォート、バックティック(テンプレートリテラル)

### boolean

– true/false

### undefined

– 値が存在しないことを表す型(値が代入されていないため値がない)
– 特別な事情がない限りはnullではなくundefinedを使用した方がいい(undefinedを返すメソッドなどが多いため、こちらをデフォルトにした方が楽である)

### null

– 値が存在しないことを表す型(代入すべき値が存在しないため、値がない)

### symb

node.jsを使ってログインサーバーを作る（？）

# 初めに
今回はnode.jsを使ってログインサーバーを作ります（？）
# 注意
今回はnode.jsを使用します。node.jsをダウンロードしていない方は以下のリンクからnode.jsをダウンロードしてください(クリックしたら自動的にインストーラーがダウンロードされます)
[Node.jsダウンロード(Windows)](https://nodejs.org/dist/v20.16.0/node-v20.16.0-x64.msi)
# ファイル構成
今回のファイル構成は以下にあるとおりです
“`
|
|–public
| |—index.html
| |—login.js
|
|–server.js
“`
# モジュールのダウンロード
まず、コマンドプロンプトで以下のコマンドを入力してください
“`:cmd
cd C:\Users\Your_name\Downloads\Your_projectName
“`
※…Your_nameとYour_projectNameは自分のものに置き換えてください(例えば自分だと以下のようになります)

Javascriptの基礎文法

# はじめに
Javascriptの基礎学習を進めています。
学習した内容を後々辞書代わりに使えるように記事にまとめてみようと思い、執筆しました。
間違いなどあればぜひフィードバックをお願いいたします！

## 繰り返し処理
### while文
特定の条件を満たす時(true)の間、{}内の処理を繰り返す。
※{}の後は;(セミコロン)不要。
“`js:基本構文
while(条件式) {
実施する処理
}
“`
“`js:例
let num = 1;
// numの値が10以下の場合は、numberに1を加算し続ける。
while (num <= 10) { num += 1; } //出力結果 1 2 3 ... 10 ``` ### for文 変数、条件式、変数の更新を指定して、繰り返し処理を実施する。 ※{}の後は;(セミコロン)不要。 ```js:基本構文 for( 変数定義; 条件式; 変数の更新　) { 繰り返しの処理 } ``` ```js:例 // iの値が5以下だったら、iの値を出力する for( let i = 0; i <= 5

自作ニコ生ゲーム改造してみない？

# はじめに
この記事はまだ自作ニコ生ゲームを作ったこと無い方や、作ってみたい方向けの記事になります。
私の環境がWindowsなのでMacの方は分からないことあったらごめんなさい。でもやることはほぼ変わらないと思います。

# 完成系の詳細ページです。どんどん改造してください！
https://namagame.coe.nicovideo.jp/games/lg10059

# 事前準備
https://akashic-games.github.io/tutorial/v3/introduction.html

PCにnode.jsやAkashicEngineを使えるようにする必要があります。
難しいことはほぼ無いです。

この記事に沿って
akashic -V
akashic-sandbox -V
このコマンドでバージョン確認ができたらまず任意の場所に新規フォルダを作りましょう。
デスクトップ推奨しますが、分かりやすければどこでもいいです。

# ゲームファイル一式

これはニコ生ゲームという名前の新規フォルダをデスクトップに作ってそこにZipファイルをDLして解凍しているという

JavaScript Primerまとめ

## はじめに

## 基本文法
### 変数と宣言
#### const
– “再代入できない変数“の宣言
– 変数が参照する値（初期値）を定義可能
– プリミティブな値（数値、文字列）で初期化すればそれは実質的に定数

“`JavaScript
const 変数名= 初期値;
“`

– カンマで区切ることで複数の変数を定義可能
“`JavaScript
const bookTitle = “JavaScript Primer”,
bookCategory = “プログラミング”;
“`

#### let
– 値の再代入可能な変数を宣言
– 初期値を指定しない変数も定義可能

#### var
– letと似ているが、同じ名前の変数を再定義できてしまう
– 利用は避けた方がいい

### JavaScriptの実行
– ブラウザの開発者ツールのコンソール上
– HTMLファイルを作成してJavaScriptコードを読み込む
“`html: index.html

javascriptでテキストボックスの値を取得する

## 作成する画面


値をそれぞれ入力し、ボタンをクリックするとアラートが入力した値が画面に出てくる


## 実装

### javascriptの実装
document.getElementByIdにIdを指定して、テキストボックスのオブジェクトを取得する。
取得したオブジェクトの.valueからテキストボックスに入力された値を取得する。
“`js
function ShowAlert() {
let txt_name = document.getElementById(‘name’)

ハンバーガーメニューの動きについて

# はじめに
今回は、[前回](https://qiita.com/uukasuzuki_/items/6ca5e902467d0cc93277)制作したコードを用いて、ハンバーガーメニューの動きパターンを２つ考えてみました。

# くるっと回転するハンバーガーメニュー

See the Pen jqueryの is(“:visible”) をノーマルjsだけでサクっと判定する（※要素が表示されているか親／祖先要素の状態も加味して判定する）

jQueryでは、[is(“:visible”)](https://api.jquery.com/visible-selector/) で要素の表示状態が簡単に取れていた。親要素を辿って表示状態を見て１つでも非表示であれば子孫も見えないと判断してくれたのに、脱jQueryしたことで途端にparentElement追う面倒くさい再帰ロジックを書く羽目になっていた。

[getBoundingClientRect()](https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect) や [IntersectionObserver()](https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver) などは、今の画面上の可視領域上での要素の表示判定なので目的に適ってない。

結論から言うと調べ方が足りんかった。というか新機能のアップデート[^1]をウォッチしてなくて自分の脳みそもアップデートしていないだけだった。

んで、ついさっき

【Javascript】Symbol型について図解を用いて解説する

# はじめに

先日、動画にてJavascriptの勉強をしている中で、見慣れない型を見つけました。それが**Symbol**という型になります。
そもそもSymbolって何なのか？どういった場面で使えるのか？といったことについて気になったので、今回はSymbol値についてアウトプットしていこうと思います。

# Symbol型とは？

Symbol型は、文字列型(String型)や整数型(Int型)などが含まれるpremitive値の一種になります。そこで、String型との違いや実装方法、利点について下記で説明します。

### 全体観

String型とSymbol型の違いは下記のようになります。

上図のように、同じ値同士で比較する場合、String型は「true」になるのに対して、Symbol型は「false」に

新生児の一回分の哺乳量を計算するJavaScriptPGM

新生児の一回分の哺乳量を計算するJavaScriptPGM

サンプルサイト: https://nanjomiyako2.github.io/CalcMilk/

githubURL:https://github.com/NanjoMiyako2/CalcMilk

銀河の中心にブラックホールを置き、その周りを多数のカラフルなパーティクルが回るゲーム。



### 画面左上にブラックホールを置き、その周りを多数のカラフルなパーティクルが回るゲームです。
スペースキーを押すとゲームが始まります。

“`python
import http.server
import socketserver
import tempfile
import webbrowser

html_content = “””

CodeMirror6を用いたHTMLエディターの導入

## 概要
Ruby on Railsをベースとしたアプリ制作時に、Codemirror6の導入で苦戦したため、導入方法をまとめました。

Codemirror6は公式マニュアルに`Getting Started`のセクションが無く、どこを見たらいいのか分からないので、初心者にはかなりとっつきにくい文献という印象でした。

結論として、以下の`Bundling Example`のセクションを見ながら進める事でEditor構築することが出来たので、こちらの流れに沿って説明します。

https://codemirror.net/examples/bundle/

また、今回の説明ではRuby on Railsを使用していますが、Codemirrorの実装は基本Javascriptしか触ってないので、本記事を読むために必要知識はJavascript（+ Node.js）となります。

## エディターの導入
### 1. CodeMirror＆HTMLパッケージのインストール
公式文書ではJavascript用エディターを導入していますが、今回私はHTML用エディターを実装したいので、H