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

いいねをたくさん押してください

このコードは、クリックするたびに「いいね！」のカウントが増え、ハートのアイコンがアニメーションで跳ねるシンプルなインタラクティブな「いいねボタン」を作成するためのものです。以下、コードを段階的に説明します。

### 1. **HTML部分**
“`html

❤️

無意味な作品

了解！コードごとに簡潔に説明しますね。

### 1. **背景アニメーション**
“`css
body {
background: linear-gradient(45deg, #ff007f, #800080, #ff4500, #32cd32, #1e90ff);
background-size: 400% 400%;
animation: gradientAnimation 10s ease infinite;
}
“`
– **目的**: 背景が5つのカラフルな色を使って、斜めのグラデーションとしてアニメーションします。
– **効果**: 背景が時間と共に色を変化させる。

### 2. **ボックスのアニメーション (バウンス)**
“`css
.container {
animation: bounce 5s infinite alternate;
}
@keyframes bounce {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
“`
– **目的**:

ilasmでstack machine その37

# 概要
ilasmでstack machineやってみた。
練習問題やってみた。

# 練習問題
日本語をilasmに変換するコンパイラを書け。
湯婆婆をコンパイルせよ。

# 方針
Plunker使う。

# 写真


# 投入したソース

“`
文字列 “契約書\r\n” を積み
文字列印字し
文字列 “甲は油屋当主として、乙を油屋に雇用することを契約し、\r\n” を積み
文字列印字し
文字列 “労働に伴う対価の支払いを右の通り、約定する。\r\n” を積み
文字列印字し
文字列 “なお、一日の労働の対価は金百円とする。\r\n” を積み
文字列印字し
文字列 “甲　油屋当主　湯婆婆\r\n” を積み
文字列印字し
文字列 “乙\r\n” を積み
文字列印字し
文字列 “契約書だよ。そ

ilasmでstack machine その36

# 概要
ilasmでstack machineやってみた。
練習問題やってみた。

# 練習問題
ilasmを日本語に変換するコンパイラを書け。
湯婆婆をコンパイルせよ。

# 写真


# 投入したソース

“`
ldstr “契約書\r\n”
call void [mscorlib]System.Console::WriteLine(string)
ldstr “甲は油屋当主として、乙を油屋に雇用することを契約し、\r\n”
call void [mscorlib]System.Console::WriteLine(string)
ldstr “労働に伴う対価の支払いを右の通り、約定する。\r\n”
call void [mscorlib]System.Console::WriteLine(string)
ldstr “

ilasmでstack machine その35

# 概要
ilasmでstack machineやってみた。
練習問題やってみた。

# 練習問題
日本語をilasmに変換するコンパイラを書け。
zundokoをコンパイルせよ。

# 方針
– Plunker使う。

# 写真


# 投入したソース

“`
乱数召喚し
変数 r に移動し
数値 0 を積み
変数 a に移動し
loop:
変数 r を積み
数値 3 を積み
乱数し
数値 1 を積み
比べて大なら zun へ飛ぶ
数値 0 を積み
変数 a に移動し
文字列 “ドコ” を積み
文字印字し
無条件で loop へ飛ぶ
zun:
文字列 “ズン” を積み
文字印字し
変数 a を積み
数値 1 を積み
足す
変数 a に移動し
変数 a を積み

Vite を初めて触った時に調べたことまとめ

## 概要

Vite で Vue.js 3 (TypeScript) の新規プロジェクトを作成した際に Vite について調べたことを記載します｡

## Vite とは

“ヴィート” と発音する｡

JavaScript のビルドツール｡
従来のビルドツール (webpack や Rollup､ Parcel) より高速にビルドできる｡

従来のビルドツールは全てをビルドするが､ Vite は必要な分だけビルドする｡

webpack がデファクトスタンダードだが､次世代のビルドツールとして Turbopack と共に注目されている｡

## 特徴

– npm の依存関係の解決と事前バンドル
– Hot Module Replacement
– TypeScript をサポート (トランスパイルのみ)
– 様々なフレームワークをサポート

### Hot Module Replacement (HMR)

HMR 機能を備えたフレームワークは､ API を活用して､ページを再読み込みしたり､アプリケーションの状態を損失することなくコードの変更を反映できる｡
この機能によって､開

chromeのちょっとした拡張機能(備忘録)

## chromeのちょっとした拡張機能(備忘録)
#### **概要**
ニュース記事をもとにインフォグラフィックスを制作するという大学の課題として制作したchromeの拡張機能の備忘録として記録したもの。

#### **作品概要**
この[記事](https://www.washingtonpost.com/technology/2024/09/18/energy-ai-use-electricity-water-data-centers/)(生成AIを使用するときにサーバーの冷却や動作させる電力の発電などの過程で大量の水を消費しているという問題に関するもの)で指摘されている、GPT-4モデルで100wordのメールを生成するために519mlの水が消費されるという事実を可視化するための作品を制作した。

chatGPTを用いて、文章を生成させた文章の語数をカウントし、画面左上に生成された語数、右下に消費されたと推定される水量の合計、画面右上に水量をペットボトルの本数で表した図が表示される。

![作品スクショ.png](https://qiita-image-store.s3.a

JavaScriptの歴史まとめ

# はじめに
JavaScriptの歴史をまとめてみました。

# JavaScriptの歴史

## 1993年
– 世界初の本格的なWebブラウザー「[Mosaic](https://ja.wikipedia.org/wiki/NCSA_Mosaic)」が開発。

## 1994年
– [Netscape Navigator](https://ja.wikipedia.org/wiki/Netscape_Navigator)（NN）1.0がリリースされ、Webブラウザ市場に大きな影響を与える。

## 1995年
– **JavaScript（当初はLiveScript）誕生**
NetscapeのMarc AndreessenがDOMとやり取りできる小さなスクリプト言語を求め、[Brendan Eich](https://ja.wikipedia.org/wiki/ブレンダン・アイク)が開発。NN 2.0にJavaScriptが初搭載。
– **[Java](https://ja.wikipedia.org/wiki/Java)の発表**
Sun Microsys

【JavaScript】Unix Timestampを日時に変更する方法

以下のように記述することでUnix Timestampを日時に変更できます。

“`js
const unixTimestamp = 1732019850

const date = new Date(unixTimestamp * 1000)

console.log(date) // Tue Nov 19 2024 21:37:30 GMT+0900 (日本標準時)
“`

変数・クラスの初期化前の参照（JavaScript）

こんにちは。
JavaScript では変数・クラスの初期化前の参照は許されません。

下記を実行させると、エラーとみなされます（“`Cannot access … before initialization“`）。ただし “`bun run ./color.js“` ではエラーは生じません。

なお、“`function“` 文は後置記述が許されます。

“`color.js
const color = generate_color();
console.log(color);

class Color{
constructor() {
this.R = getRandomInt(255);
this.G = getRandomInt(255);
this.B = getRandomInt(255);
}
}

function generate_color() {
return new Color();
}

function getRandomInt(max) {
return Math.floor(Math.random

独自APIを使った戦国武将紹介ページの作成

## はじめに
初めましての人もそうでない人もこんにちは！

今回はSheetDBを使って独自APIを作りそれを使った紹介サイトを作ってみようと思います！

今回は初めてJavaScriptを使った開発をしてみます！
いつもならTypeScriptを使って作成をしていますが今回は気分転換にJavaScriptを使った開発をしてみたいなーと思ったので開発をします！

ぜひ最後までご覧ください！

## そもそもSheetDBとは？
Googleスプレッドシートを使ってノーコードでREST API作成してくれるサービスです！
RESTとは？　APIとは？・・・
ここら辺は別の記事をご覧になった方がわかりやすくまとめてあるので別途調べてください！

この前のGeminiAPIから思っていましたがGoogleさんすごいな・・・

## 今回扱うデータの説明
| カラム名 | 説明 |
| :—: | :—: |
| id | 独自に示した武将ごとの識別番号 |
| names | 武将の名前 |
| country | 出身国 |
| age | 享年 |
| nickname | 別

HTMLをローカルプレビューしているときだけ、特定のスタイルシートを読み込む

# 結論

– 📁root
– 📁css
– 📓local.css
– 📓index.html

“`css:css/local.css
/* ローカルプレビューでのみ使う、スタイルシート */
.local-preview{
color: red;
}
“`

“`html:index.html