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

論理演算子「&&」や「||」の挙動について理解する

## はじめに
初学者向けの記事となっております。
本記事ではJavaScriptを用いて説明します。他言語とは実際の挙動が異なる可能性があります。あらかじめご了承ください。

## `true && hoge()` はどうなる？
突然ですが、以下のコードをご覧ください。

“`javascript
function hoge() {
console.log(“hoge”)
return 123;
}

const result1 = true && hoge()
const result2 = false && hoge()
const result3 = true || hoge()
const result4 = false || hoge()
const result5 = true && hoge() && false
const result6 = false || hoge() || true
“`

これらの変数には何が入るでしょうか？またどのような処理が行われるでしょうか？
“hoge”という文字列が出力され、最終的に **123** という数値を返す `

即時関数でconstにあらゆる値を格納できるしthenメソッドチェーンも使えることにJavaScript初心者が気付いたのでサンプルを作ってみた

## Q.そもそもどんな書き方なの？
A.例えばこんな感じで書けます。

~~~JavaScript:sample.js
const a = (() => {
function1(handle1)
.then(x => functionSuccessful(x)
.catch(() => {
function2(handle2)
.then(y => functionSuccessful(y))
.catch(e => functionError(e))
}();
}();
}();
~~~

即時関数の中なのでもちろんtry…catch構文も使えます。

~~~JavaScript:sample.js
const a = (() => {
try {
return x;
} catch {
return y;
}
})();
~~~

try…catch構文のほうは見たまんまなので、まぁそのままの動きしかしないのですが、上の

【Nuxt 3】基本機能をなんとなく理解する


## Nuxtとは


Nuxtとは、一言で言うと「**Vueを便利にしたヤツ**」です。

コンポーネント内のルールは基本的にVue.jsと同様です。

なので、Nuxtの学習をする際は、「プレーンなVue.jsと比較して何が違うのか」という点を理解することが重要です。

## 新規アプリケーションの作成

以下コマンドを実行することで、Nuxt3の新規アプリケーションが作成されます。
“`
npx nuxi@latest init アプリケーション名
“`

【個人開発】ホームページ制作 #1　概要とレイアウト

## はじめに
今回から数回の記事に分けて、個人開発したホームページの紹介をしたいと思います！

2024年から本格的にフロントエンドを学び始め、一番最初の成果物になります。

間違った技術の使い方をしている部分等ありましたら、ぜひコメント等でご指摘いただければ幸いです！

## 成果物
早速ですが、こちらが成果物です！
友人（ラクロス選手）のホームページを制作しました！！

https://ty-official-hp-14.vercel.app

### プロジェクト名
Tetsuya Yamada Official Home Page

### きっかけ
プロジェクト名にもあるTetsuya Yamada(以降、ヤマディー)は、私の高校からの友人です。

ヤマディーは大学卒業後、某メガベンチャーに入社しましたが、
2028年LA五輪のラクロス代表を目指すために、1年未満で退社し、カナダに渡り、ラクロスに専念する道を選びました。

彼の行動力と夢に向かって挑戦する姿は、ソフトウェアエンジニアを目指す自分の行動のきっかけにもなりました。

どうせ何かを作るなら自分の技術力アップだけ

JavaScript: 文字Code自作講座

Shift-JISとかUnicodeとかLatin1とかいう類の文字Codeの話です。できるだけ多くの文字を表現でき、bit数も少ない独自形式を作っていきます。

## Escaped UTF16(EU16)
escape文字でUnicode区間を切り替えていく。復号が簡単で快速。符号の種類が少なく、Unicode番号が近い文字が密集していれば符号文は短くなる。

## Escaped UTF16a(EU16a)
Shift JISで扱う文字は殆ど1～2 Bytesで表現可能。JIS漢字も殆ど2Bytesで扱える。上記EU16も復号可能。

## Shift JIS + UTF16(SJU)
ASCII文字は1 Byte、いわゆるJIS漢字は殆ど2Bytesで表現し、Shift JISっぽい符号になる。それ以外は3 Bytesで符号化。

## 実装編
念の為UTF8のようなものも実装。
“`js
if(!this.CharCoder)this.CharCoder={
eEU16(S){
for(var a=0,b=0,c,d,k=128,n,z=S.length,A=[];a

[JS] なんとなく分かった気になっているJSをはっきりしておく ~ Object オブジェクト Part 1 ~

# Object
JSはオブジェクト指向のプログラミング言語なので、Objectの知識は欠かせない！

Objectはそれ自体でオブジェクトで、全てのオブジェクトの最終prototypeとなります。
すでに実装されているオブジェクトのprototypeを確認するときは
~~`__proto__`~~ `Object.getPrototypeOf`を使います。
“`js
Object.getPrototypeOf(Math); // Object { … }

function Person(name) { this.name = name; }
Person.prototype.sayHello = funtion() {
alert(`Hello! ${this.name}!`);
};
var yuchan = new Person(‘yuchan’);
var yuchanProto = Object.getPrototypeOf(yuchan);

yuchanProto; // { sayHello: function() }

Object.getProto

イベント操作で画像を表示できるようにするー2

お疲れ様です。

今日は昨日の続きをやっていきました。
昨日は画像表示する手前で、エラーが出てしまうところでしたので、エラーを解決しつつ、あと残り2つのボタンにも別の画像を紐づけして、選択されたときに表示されるようにJavaScriptのコードを書いていきました。



画像が残っておりませんが、昨日出たエラーは定数名の設定でひっかかりがあったようです。

調べても分からなかったので、chatGPT先生に教えていただきましたが、getElementByClassName(“btn”)の定数名を Btn としてい

React(TypeScript)でcanvas要素を扱う

## 背景
React(TypeScript)でcanvas要素を扱いたいと思ったところ、
Reactの場合だとどんなふうにコードを書けばいいか分からず、
色々と苦戦したので備忘録として残します。

## ゴール
canvas上で図形をドラックして動かせるようなサンプルを作ります。

## 結論
このように書くと、canvas上で赤い四角形をドラックして動かせるサンプルができます。
“`typescript
import React, { useEffect, useRef, FC, useState } from “react”;

export const Canvas:FC = () =>{

const canvasRef = useRef(null);//canvas要素取得
co

JavaScriptで、宣言した関数がコンソールに関数がそのまま表示される

# はじめに

JavaScript初心者です。
変数に入れた関数がそのままコンソールに表示されてしまう現象で詰まりました。

### 実際にコンソールに出てきた表示

# 問題

発生したコードは以下です。

“`javascript
const getStudyRecord = async () => {
const data = await supabaseClient
.from(‘study-record’)
.select(“*”);
return data;
};

console.log(getStudyRecord); // # はじめに で表示されてしまった箇所
“`

# 原因

**関数を代入した変数に`()`をつけ忘れていました。**

“`j

JSF**k チートシート

# この記事

この記事はJSFuckについてのチートシートです
本編の記事と同時並行で更新していきます

# アルファベット

アルファベットたち

小文字

a

“`js
(![]+[])[+!![]]
//”false”[1]
“`

d

“`js
(([]+[[]])[+[]]+[])[+!![]+!![]]
//”undefined”[2]
“`

e

“`js
(!![]+[])[+!![]+!![]+!![]]
//”true”[3]
“`

Google AppScriptを使ってスプレッドシートをWebサイトで見れるようにする

スプレッドシートをWebサイトで見れるようにしました。
こちらのサイトを参考にしているのでこちらも是非参考にしてください。

https://www2.kobe-u.ac.jp/~tnishida/programming/GAS-02.html

Code.jsのスクリプト
“`
function doGet() {
// (2) Spreadsheet からデータを読み込む
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var templateSheet = spreadsheet.getSheetByName(“シートの名前”); //シートの名前が一致するものを取得

// セルの値を取得
var range = templateSheet.getRange(‘A1’); //セルの座標を指定
var value = range.getValue();

// (3) テンプレートを使ってHTML文書を作って return
let template = HtmlServic

お互いの type を union type としますが、お互いの property を never にしたいとき

## はしがき
仕事をしながら、api 取得からこのような jbuilder をみました。
“`ruby
if @hello?
json.hello 1
json.world hello_world
return
end

json.ohaiyo ‘asa’
json.sekai ohaiyo_sekai
“`

このような感覚なので、typescript は以下のように書きました。

“`typescript
interface Hello {
hello: number
world: object
}
interface Sekai {
ohaiyo: string
sekai: object
}
type ApiResponse = Hello | Sekai
“`

単純に `A|B` しても問題ありません。
しかし、以下のようなコードは許されたので、もっと完璧に許可したくなくて、細かく設定するようにしました。

https://www.typescriptlang.org/play/?ssl=15&ssc=2&pln=11&pc=1#cod

タイムゾーンを跨ぐ時間コンポーネントの実装ガイド

まずは、Ptengineの時間コンポーネントを見てみましょう。今日を選択すると16日が表示されますが、右上のローカル時間は17日になっています。これは私のローカルタイムゾーンがAsia/Shanghaiで、時間コンポーネントのタイムゾーンを手動でPacific/Honoluluに設定したためです。これがいわゆるタイムゾーンを跨ぐ時間コンポーネントです。
そのために、上記のような時間コンポーネントを実現するには、タイムスタンプ、タイムゾーン、および日付がそれぞれ何を意味し、それらの間の関係を理解する必要があります。

### 一、タイムゾーン
タイムゾーンとは、地球の自転によって生じる位置の違いによる時間差のことです。

時間に関する問題を処理するには、UTC（協定世界時）という概念を無視することはできません。協定世界時（UTC）は

Chart.js を使用したグラフの表示確認手順

以下に手順を説明します。

#### 手順

1. **HTMLファイルの作成**
– まず、上記のサンプルコードをテキストエディタにコピーし、ファイルとして保存します。ファイル名は `test.html` など、任意の名前で構いません。

2. **ファイルを保存**
– テキストエディタでファイルを保存します。例えば、デスクトップや任意のフォルダに保存します。

3. **ブラウザでファイルを開く**
– 保存したファイルをブラウザで開きます。以下の手順で行えます。
1. ファイルが保存されたフォルダを開きます。
2. `test.html` ファイルを右クリックし、`開く` もしくは `ブラウザで開く` を選択します。
3. または、ブラウザを開き、アドレスバーに `file:///` を入力してファイルパスを指定する方法もあります。

4. **表示の確認**
– ブラウザに表示されていることを確認します。

これで、Chart.jsを使ったグラフがブラウザに表示されるか確認できます。

jQueryのメソッド

jQueryを勉強中（ど素人）なのですが、復習も兼ねて学んだメソッドを下記にメモとして記述していこうと思います。
随時更新していきます。

# jQueryとは
* [ **jQuery** ]とは、効果やアニメーションを簡単に実装できるJavaScriptライブラリ
* jQueryを使うとWEBページにアニメーションや効果を簡単につけることができる


# css
CSSプロパティを変化させる

# on
イベント発生時に実行する関数を割り当てる

# fadeOut
要素を徐々に薄くして消していく (=フェードアウトさせる)

# fadeIn
要素を徐々に表示していく　(=フェードインさせる)

# text
指定した要素の文字列を取得したり、書き換えたりする

# slideTo

JSF**k講座 2限目【最初の文字たち】

# 初めに
[1限目](https://qiita.com/shimgo2008/private/b7421974a1aab8131b43)の復習をしっかりとしておきましょう
1限ではJSの型の変換などの基礎的な話をしています
# 第二回の内容
今回はJSFで文字を書く仕組みと、
`false`, `true`, `undefined`, `NaN`, `Infinity`,から取れる文字と`0~9`の数字たちを得る方法を教えていきます

>説明の都合上被る文字がありますが
[チートシート(作成中)]()に最適化した文字の出力方法を記入していくのでそちらをご参考ください

>1限でも言いましたがfuckと何度も言うのもアレなのでJSFでいきます
【定期】JavaServer Facesではありません

# まずは`helloworld`と言いたいところですが….

肩慣らしにhelloworldを書こうと思っている方もいるかと思いますが
f**k(伏せ字なし)を書く方が数十倍楽です

下にhelloworldのコードを置いておくので開く人は心してみてください

>私の技術力が未熟

Cannot read properties of null (reading ‘getRange’)の対処法

GASを使用して、arrayをスプレッドシート内に書き込む記述をした際、タイトルで表示されているエラーが表示された。

初歩的なエラーであるが、スプレッドシートの名前がない場合に生じるらしい。

その名前やIDを再度確認してほしい。

object.map() is not a functionの解決策

jsonファイルをスプレッドシートにいれる際、必要データのみを取り出すためにmap()を使用した。

その際に、object.map() is not a funcitonというエラーに悩まされたが解決したので方法をメモしておく。

mapはarray(配列)でなければ操作をできないが、jsonのデータはobjectらしい。

その違いは、{}で囲まれているか、[]で囲まれているかである。

つまり、array型にすれば解決するのである。

したがって、元の記述を以下のようにしていたら
“`
weatear.map(d => {
add_values.push([d.firstDay, d.lastDay, d.temp]);
“`

以下のように変えればよいのである。
“`
Object.values(weather).map(d => {
add_values.push([d.firstDay,d.lastDay,d.temp]);
});
“`

要するに、
“`
Object.values(“ここにオブジェクトデータを入れ

GASとGoogleフォームを使ってクイズラリー

今度、彼女と金沢へ旅行に行くのですが、それのためにGoogle Siteを使用して、観光地や日程をまとめたサイトを作成しました。

それだけではわざわざサイト作成した意味がないとGoogleフォームを使用してクイズラリーを作成しました。
なぜ、Googleフォームを使用したのかというとそのときはプログラミング不要でクイズラリーを作成できると思ったからです。

しかしながら、Googleフォームではその回答に応じて返信を変化させることができないので、
GASというGoogleのサービスをスクリプトで操作できるサービスを使用して、
Googleフォームでの回答に応じて正解であれば、次の問題のフォームを送信し、不正解であれば不正解であるという通知を送る。
そして、ヒントと送信されれば、ヒントを送信するという仕組みを操作しました。

以下にはそのGAS内のスクリプトを記述します。

“`
function sendemail(e) {
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = Spread

[JS] なんとなく分かった気になっているJSをはっきりしておく ~ 数字とMathオブジェクト ~

# 数字に関して
簡単な例題を一つ解いてみよ！
“`js
var a = 0.1;
var b = 0.2;
a + b ?
“`
え、めっちゃ簡単！そんなの0.3ですよ！
しかし！
答えをコンピューターに聞いてみたら、、？

“`js
a + b // 0.30000000000000004
“`
あれ？なんかコンピューターさん計算おかしくない。。？

この様にJSを含めいくつかのプログラミング言語は小数をちゃんと計算できないよくわからない仕様となっております。

なぜ、コンピューターはこんな簡単な計算を間違えてしまうのでしょうか？
その理由は、コンピューターは小数を2進法に変換して計算していて2進法で変換すると上記の様な小数は無限の小数の値になります。

それで、貯蔵できる容量があらかじめ決まっているコンピューターはこの無限値を貯蔵しきれずに端っこを切り捨てて有限な小数にしてしまいます。

これにより計算に誤差が発生してしまうのです！
この仕様のせいで昔、どこかの国ではミサイルを迎撃するためのプログラムで小数の計算誤差により迎撃に失敗してミサイルに打たれたとか。。

なの