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

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

なんかの券をスプレッドシートとHTMLで管理する話

こんにちはAtsu1209です。
今回はなんかの券をHTMLとGASで管理できるようにした話を書いていきます。

# 今回使う方法
今回は 券に番号をつけてその番号をGASとHTMLで管理できるようにします。

# スプレッドシートの用意
早速用意していきます。
名前は`なんかの券管理シート`とでもしておきます。
| 1 | 2 |
|:-:|:-:|
|担当 |券番号 |
|例 太郎| 0 |

とりあえずこんなかんじです。

# GAS
GoogleSpreadSheetにはスクリプトを書くことができる拡張機能の`GoogleAppsScript`
というものがあります。
これを使って管理していきます。

“`js:script.gs
function doGet(e) {
const spredSheetByActive = SpreadsheetApp.getActive();
const sheet = spredSheetByActive.getActiveSheet();

// パラメータ ‘num’ で送られてきた番号があるかをチェック
con

元記事を表示

いろんなコードを動かなくするサイト

どうもAtsu1209です。
今回はコード破壊ツールを作ります。(?)

# コード
“`js
function uglifyCode() {
const x = document.getElementById(‘inputCode’).value;
let a = x.replace(/\s+/g, ‘ ‘);
a = a.replace(/\/\*.*?\*\//g, ”);
a = a.replace(/\/\/.*(?=\n)/g, ”);

var result = “”;
for (let i = 0; i < a.length; i++) { if (i % 2 === 0) { result += a[i].toUpperCase(); } else {

元記事を表示

負荷試験ツール”k6″の導入から実行まで

# 概要
この記事は、負荷試験ツール”k6″の導入から実行までを説明したものです。
自身の備忘録、他の人への説明を主な目的とした内容になっています。

# 前提
ローカルマシンOS: Ubuntu 22(Window 11 WSL)

# k6とは
k6はオープンソースの負荷試験ツールです。Go言語によって作成されており、軽量・ハイパフォーマンスを謳っています。
オープンソース版は、テストの実行をCLIにて行うため、ある程度コンソール画面での操作の習熟を求められます。
私は使っていないのですが、テストシナリオの作成についてはGUIが提供されているようです。ただ、JavaScriptのコードで管理するほうが共有や運用が楽かと思います。

# 導入
https://grafana.com/docs/k6/latest/set-up/install-k6/

Windows/Mac/Linux各種環境に応じたインストール方法が提供されています。
自分の場合はUbuntuのため、リポジトリを追加してパッケージインストールを行いました。

# テストシナリオの作成
https://grafana

元記事を表示

意味不明な電卓

### 1. **HTML基本構造**
“`html




カラフル電卓


不思議なカラフル電卓





“`
– **``部分**:
– ここではペー

元記事を表示

ilasmでstack machine その42

# 概要
ilasmでstack machineやってみた。
俺cpuはstack machineなので、ilasmのニーモニックが動くように改造してみる。
ilasmをrom化してみる。

# 方針
– Plunkerを使う。
– verilogで使えるように

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/a0c4573e-6ab6-207d-2245-c517960dd657.png)

# 投入したソース
fizzbuzz
“`
ldc.i4 100
stloc b
ldc.i4 1
stloc a
loop:
ldloc a
ldloc b
bgt bye
ldloc a
ldc.i4 15
rem
brfalse fb
ldloc a
ldc.i4 5
rem
brfalse b
ldloc a
ldc.i4 3

元記事を表示

初めてホームページを作る方へ

### 1. **基本的なHTMLのテンプレート**
基本的なHTML文書の構造です。これはWebページを作成する際の出発点として使えます。

“`html






基本的なHTMLテンプレート

ウェブページのタイトル

元記事を表示

真夏の夜の淫夢で解説する HTML ほぼネタです

# 初めに
Qiita投稿失礼するゾ〜(謝罪)
この記事では、真夏の夜の淫夢を用いてHTMLを使ったWebページ作成を解説していこうと思う
ちなみに分かりやすい解説は王道を征くGoogleで「HTML書き方」などで調べた方がいいゾ(迫真)

# 何となくHTMLタグの説明
最初にタグの説明をするゾ
h1~h6は、見出し
pは文章を書くときに使う
写真を貼るときはimg src=”写真のファイル名” alt=”画像が表示されない場合に表示する文章を入れる”ではれる
リンクを貼りたいときは、 a herf=”リンク先”
改行をしたいときはbr
今のところはこれでいいと思う
「難しすぎィ」と思うかもしれないかもしれいけどやっていけばわかるようになろと思う
そしたらこれらのタグなどを使ってページを作っていこうと思う
# HTMLを書いていく
急に書いていくと言われても「おじさんやめちくりー」と言ってるであろう淫夢厨がいると思うので、丁寧にやっていく
最初にHTMLなどのファイルを入れるフォルダを作成する(ファイルの名前は基本英語の方がいいゾ←当たり前だよなぁ)
ファイルを作ったら次にコードエデ

元記事を表示

シンプルで使いやすいブラウザ画面の録画ツール。

![スクリーンショット 2024-11-07 054138.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/26c90d23-2072-19e9-a6c7-67933e4c5ccd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/92435089-06ec-21dc-3130-c6c8a0cb21f1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/6e22a88f-63e5-33bc-ff0f-262ea65935a9.png)

コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

機能の流れ
ページが読み込まれ

元記事を表示

Electron経由で出力したlogが文字化けして困ったときにすること

## 前置き
はいどうも、たねだです。
最近野暮用でまともにjavascriptを触ったこともないのに
ノリで使えると信じてElectronを使用しています。

構造としてはElectron(index.html)にある入力フィールドへ文字列を入力して送信ボタンを押すと
そのデータを取得してPython(FastAPI)に渡すというシンプルな仕組みです。
ところが、何度やっても受け取った値がコンソール上でのみ文字化けしてしまい困ったという話。

このコンソール上でのみ文字化けしていたというのが
今回の問題の最大のポイントでしたので
同じような悩みで右往左往している方のヒントになれば幸いです。
ではやっていきましょう!

## 環境
– Windows11 24H2
– VSCode 1.95.1
– npm 10.9.0
– node v22.11.0

## 試したこと

当然ですが問題が生じてからは
送受信する文字列が関わる処理に片っ端から`console.log()`をおいて確認しました。

コードを全て載せると煩雑になるので
ひとまず重要っぽいとこ

元記事を表示

初心者向け!毎日の天気予報をLINEに通知し、Googleスプレッドシートに記録するアプリを作成しよう

## はじめに
こんにちは!今回はプログラミング初心者の方向けに、少しでも楽しく感じてもらえるように簡単なアプリを一緒に作っていきます。「プログラミングってつまらないな…」と思っている方も多いかもしれませんが、私も同じような気持ちになったことがありました。だからこそ、わかりやすく楽しく学べるように説明していきます。

今回作るのは、毎日の天気予報をLINEに通知し、Googleスプレッドシートに記録するアプリです。このアプリを使うと、毎日決まった時間に自動で天気予報を取得し、その情報をLINEで通知したり、Googleスプレッドシートに自動で保存したりすることができます。日記やレポート作成、さらにはお店の売上データを分析する時にも役立つかもしれません!

## 完成イメージ
このアプリでは、毎日、指定の時間帯に天気予報を自動取得し、それをLINEに通知し、さらにGoogle Spreadsheetに以下のように記録します。

ilasmでstack machine その40

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

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

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/5a264dc7-fd9f-918d-d8f6-87fa376c399e.png)

# 投入したソース

“`
10 a=0
30 b=$
50 #=b<1*100 60 ?="zun " 70 a=a+1 80 #=a>3*130
90 #=30
100 ?=”doko ”
110 a=0
120 #=30
130 ?=”doko ”
140 ?=”kiyosi!”
“`

# 実行結果

“`
.assembly extern mscorlib {}
.assembly zundoko {}
.method static void main() {
.entrypoint
.locals init (class [msco

元記事を表示

RustでV8を再利用してWasmランタイムを作ってみた

# TL;DR

ChromeやNode.jsで使われているJavaScriptエンジンであるV8は、WebAssembly(Wasm)の実行環境も含んでいます。頑張れば、このWebAssemblyの実行環境を利用して、非Web向けのWasmランタイムが作れるんじゃないかと思ったので、実際に作ってみました。作ったものは以下で公開しています。

https://github.com/tamaroning/lv8

# V8について

[V8](https://v8.dev/)は、オープンソースで開発されている高速なJavaScriptエンジンです。
Wasmが発表された頃の2015~2016年には、V8の最適化コンパイラを再利用してWasmランタイムを実装する取り組みがなされ、現在では、LiftoffとTurboFanという2つのコンパイラによって、Wasmの実行を高速化しています。[1] それぞれの役割は以下の通りです。
– Liftoff: Wasm命令に対してワンパスで簡単な最適化と機械語へのコンパイルを行う軽量なコンパイラ
– TurboFan: ホットな関数に注目して、重めの最

元記事を表示

ilasmでstack machine その39

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

# 練習問題
日本語をilasmに変換するコンパイラを書け。
数9を4個つかって1から15までの数を表す式をコンパイルせよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/f66d0af1-dc75-30bb-8a92-e229b0aa9867.png)

# 投入したソース

“`
d1:
数値 9 を積み
数値 9 を積み
引く
数値 9 を積み
数値 9 を積み
割る
足す
数値印字し
d2:
数値 9 を積み
数値 9 を積み
割る
数値 9 を積み
数値 9 を積み
割る
足す
数値印字し
d3:
数値 9 を積み
数値 9 を積み
足す
数値 9 を積み
足す
数値 9 を積み
割る
数値印字し
d4:
数値 9 を積み
数値 9 を積み
足す
数値

元記事を表示

ilasmでstack machine その38

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

# 練習問題
ilasmを日本語に変換するコンパイラを書け。
数9を4個つかって1から15までの数を表す式をコンパイルせよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/fb0b1559-cda9-b0ca-8ee2-aa377461c0ef.png)

# 投入したソース

“`
d1:
ldc.i4 9
ldc.i4 9
sub
ldc.i4 9
ldc.i4 9
div
add
call void [mscorlib] System.Console::WriteLine(int32)
d2:
ldc.i4 9
ldc.i4 9
div
ldc.i4 9
ldc.i4 9
div
add
call void [mscorlib] System.Console::WriteLine(int32)
d3:
ldc.i4 9
ldc.i4

元記事を表示

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

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

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





いいねボタン


元記事を表示

ilasmでstack machine その37

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

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

# 方針
Plunker使う。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/7ca77183-e783-12fe-f37a-03bcbc2a83d3.png)

# 投入したソース

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

元記事を表示

ilasmでstack machine その36

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

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

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/19560d55-5130-c4e1-7948-85e26abb4ed4.png)

# 投入したソース

“`
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使う。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/9d750f4e-6800-d1ac-3f15-6db928d0c629.png)

# 投入したソース

“`
乱数召喚し
変数 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 を活用して、ページを再読み込みしたり、アプリケーションの状態を損失することなくコードの変更を反映できる。
この機能によって、開

元記事を表示

OTHERカテゴリの最新記事