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

TypeScript初心者必見！ゼロから学べる実践入門

はじめに
—
TypeScriptはJavaScriptに型付けを加えた強力な言語で、より堅牢で保守性の高いコードを書くのに役立ちます。

TypeScriptとは？
—
Microsoftが開発したJavaScriptのスーパーセットで、静的型付けを提供します。
コンパイル時に型のエラーを検出しやすくなり、コードの品質向上とバグの発見が容易になります。

関数と型
—
関数の引数や戻り値に型を指定することもできます。これにより、関数の使い方がより明確になり、エラーの予防になります。
“`
function greet(name: string): string {
return `Hello, ${name}!`;
}
“`
クラスとインターフェース
—
TypeScriptでは、オブジェクト指向プログラミングのためのクラスやインターフェースもサポートしています。
“` .クラスの例
class Person {
name: string;
age: number;

constructor(name: string, age:

JSF**k講座 1限目

# 第一回の内容

今回はJSFuckには触れず、基礎知識です
これが理解できないとお話にならないんできちんと理解しましょう

# そもそもJSFuckってなんぞや？
JSFuckとは`[` `]` `(` `)` `+` `!`の6種類の文字だけを使ってjsをかくことです

一言で言うなら
### 縛りプレイ
　
ですね
語源はbrain fuckから来てるっぽいです

>あんまりfuckっていうのもアレなんで以降JSFと書きます
もちろんJava Server Facesではありません

# JSの型の変換について

“`Num+Str.js
10 + ”
//’10’
“`
`10`はNumber, `””`が空のStringです。

つまりやっていることは
`Number + String`
です。
この場合Stringで出力されます

内部的には`10`と`”`(空String)の二つを結合しているため、Stringで出力される、と言うわけです。

“`+(-)Str.js
+’10’
//10
“`
`+`は単項演算子, `’10’`が10のStr

CORSって何？

CORS(Cross-Origin-Resource-Sharing)とは、異なるオリジンとのデータ交換を可能にするもの。

## オリジンって？

– URLのホスト
– プロトコル
– ポート番号

上記3つで構成されている識別子のこと

上記3つがすべて同一の場合、同一オリジン。

基本的に、同一オリジンでしかデータ交換はできない。

## 異なるオリジン間のデータ交換
クライアント側はreact、サーバ側はexpressで作成してみる。
“` javascript
import { useEffect, useState } from “react”;
import axios from “axios”;

function App() {
const [message, setMessage] = useState(“”);

useEffect(() => {
axios.get(“http://localhost:3000/api/message”).then((res) => {
setMessage(res.data);
});

expressとmongoDBを使って簡単なコミュニティーを作ろう！

expressとmongoDBを使って簡単なコミュニティーを作ろう

アプリの紹介

このアプリはコメントを残すアプリです
コメントを読んだり、作成したり、編集したり、削除することができます！

それだけです(笑)

目次

1. 事前設定
2. データベースのスキーマを作ろう
3. CRUDのR
4. CRUDのC
5. CRUDのU
6. CRUDのD
7. 動作確認

事前設定

このアプリではexpress, mongoose, ejsを使うため、node環境が整っていることと、mongodbがインストールされていることを前提にします。

まず、npmでexpress, mongoose, ejs,method-overrideをインストールします。

“`
npm i express mongoose ejs method-override
“`
そして、require

JavaScript初心者必見！ゼロから学べる実践入門

はじめに
—
JavaScriptは現代のウェブ開発において不可欠なスキルです。これからプログラミングを始めようとしている方や、基本からしっかり学びたいという方のために、本記事ではゼロからJavaScriptを学ぶための実践的なガイドを提供します。

JavaScriptとは？
—
JavaScriptは、ウェブページに動的な機能を追加するためのプログラミング言語です。クライアントサイドで実行されるため、ユーザーのブラウザで直接動作し、インタラクティブなユーザー体験を提供します。

JavaScriptの基本構文
—
“`1. 変数とデータ型
let message = “Hello, World!”; // 文字列型
let number = 42; // 数値型
let isActive = true; // 真偽値型
“`
“` 2.演算子
let a = 5;
let b = 10;

let sum = a + b; // 足し算
let difference = a – b; // 引き算
let product = a * b; // 掛け算
let q

JS/TSでRGBをPIXI JSのColorの数値型に変換するには?

# JS/TSでRGBをPIXI JSのColorの数値型に変換するには?

## 解説

まず、RGB値のR,G,Bの値を”toString(16)”で16進数に変換し、
その16進数の値が1桁の場合は、先頭に0をつける。
最後に、”0x”に16進数のR,G,Bの値をくっつけて”parseInt”で数字に変換したら完成!

### Javascript版
“`javascript
export function ToHex(R,G,B) {
function hex(rgb) {
const ret = rgb.toString(16);
if (ret.length == 1) return “0” + ret;
else return ret;
}
const r = hex(R);
const g = hex(G);
const b = hex(B);
return parseInt(“0x” + r + g + b);
}
“`
### Typescript版
“`t

デバッグ時に迂闊にalert()文を入れたための失敗例について

# はじめに
このような経験は誰にでもあると思います。
console.log()ならば、問題なくデバッグが進んでいたと思います。
なぜ、alert()文だとダメなのかについての失敗例を示したいと思います。

# 何をデバッグしていた時か
アメバのブログを作成しているときに、編集画面のサイドバーにyoutubeボタンがあります。このyoutubeボタンでクェリー入力して検索ボタンを押したときに発生しました。

実際の症状を具体的にご説明いたします。
このyoutube検索でやりたかったことは、アメバにyoutube動画を埋め込むことと同時に検索結果のリストをサーバーへ保存することです。このDB保存処理をプラグインで処理しようとしました。つまり、アメバ編集処理とプラグインの処理の2つの処理を実行したかったことです。

このデバックで、深く考えもせずにalert(“検索ボタンがおされました。”)文を以下のソースにあるように挿入していたことです。

# サンプルコード
“`
//アメバ編集画面のサイドバーの検索ボタンをクリック
$(“#js-searchButton-youtube”).

【JavaScript】ドット記法とブラケット記法について

## ドット記法とブラケット記法の違い
オブジェクトのプロパティの値を取得したり変更したりするために使う**ドット記法**と**ブラケット記法**は、使い方にどんな違いがあるんでしょうか？:thinking:

:::note info
**ドット記法**　
オブジェクト名.プロパティ名
:::

:::note info
**ブラケット記法**
オブジェクト名[‘プロパティ名’]
オブジェクト名[“プロパティ名”]
:writing_hand: 引用符の「シングル・ダブルクォーテーション」どちらでもOK
:writing_hand: プロパティ名は文字列で指定する必要がある
:::
| |ドット記法 |ブラケット記法 |
|:———–|:———–|:———–|
| プロパティ名を変数に使用　|できない|**できる**　|
| プロパティ名に制限　|ある　|**ない**　|

“`javascript:ドット記法
co

CodeSandboxのコンソール表記（HTML）のやり方

## 初めに
初めて使った[CodeSandbox](https://codesandbox.io/)のコンソールのHTML表記方法でつまづいたのでまとめます
## 問題
[CodeSandbox](https://codesandbox.io/)でコンソールを表示した際、HTMLの形で表示されず困りました
例）
“`JavaScript:exsample.js
const li = document.createElement(“li”);
console.log(li)
“`
↓ 理想のコンソール表記
“`:理想

“`
↓ 現実のコンソール表記
“`:現実
▶ HTMLLIElement

—————————–
”▶” から展開が可能で以下のようになる（一部抜粋）
type: “”
value: 0
ATTRIBUTE_NODE: 2
CDATA_SECTION_NODE: 4
COMMENT_NODE: 8
・
・
・
“`
## (一応）解決
Udemyを使って勉強をしていたため、Q&Aを見たところ答えがあ

JavaScript + React + Viteで.envファイルを参照する方法

# はじめに

.envファイルで環境変数を設定する際、Viteでの方法が少し異なるそうなので記録します

# 問題

.envを読み込むには「dotenv」というライブラリを使います（Viteにはデフォルトで入っているようです）
その際、通常は`process.env.`を用いて参照するようです。

“` javascript
const env = process.env.TEST;
“`

ですが、Vite環境下では`undefind`となってしまいます。

# 解決方法

Vite環境でEnvファイルを参照する際は、以下のルールがあるようです。

1. `import.meta.env.`を用いる
1. 定数名の頭に`VITE_`を付ける（例：VITE_URL）

“` javascript
const env1 = import.meta.env.VITE_ANPANMAN; // .envファイルの値が取得できる
const env2 = import.meta.env.CURRYPANMAN; // undifind
“`

https://stackb

JavaScriptで簡易チャットアプリを作成して学んだこと

# 目次
[はじめに](#はじめに)
[学んだこと](#学んだこと)
　[1.ボタンと入力値取得の流れ](#1-ボタンと入力値取得の流れ)
　[2.メッセージ出力の流れ](#2-メッセージ出力の流れ)
[ソース](#ソース)
[さいごに](#さいごに)

# はじめに
今回は「テッククルー / プログラミング学習」さんの下記動画をもとに、JavaScriptで簡易チャットアプリの作成をおこないました。

具体的な作成方法についてはこちらの動画で説明されているため、この記事では今回の簡易チャットアプリ作成で「学んだこと」を記録と復習のためにまとめてみようと思います。

※ これまでJavaScriptで作成したものの記事はこちら↓

https://qiita.com/osakanaaaa/items/d6a1b6184ad412e2a182

https://qiita.com/osakanaaaa/ite

【JavaScript】宝くじ (paizaランク C 相当) やってみたのと解説

これのやつです。

https://qiita.com/official-events/9ab96aa95d62fe3cbdd7

今回は、「どんな風に書いていこうかな」ってノリを模索するために書いてます。
書き方は他の人のを真似しています。

# 問題
https://paiza.jp/works/mondai/c_rank_skillcheck_archive/lottery

# 解答コード
“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
// 自分の得意な言語で
// Let’s チャレンジ！！
var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
lines.push(line);
});
reader.on(‘close’, ()

今日の発見 input要素にv-modelをしたときにstringになる

まずこちらをご覧ください。

https://play.vuejs.org/#eNp9kc1OwzAQhF/F8qWtVBIQnKq0EqAe4AAIOPoSpZs0xX+y16EoyruzdpTSA+rNmpmd/Vbu+b21WReAr3jhK9daZB4w2I3QrbLGIeuZg3pZGWUDwo4NrHZGsRnNzISujPbIdFBsHWPz68WkKd+QNo3N54v1Bn8smDqms66UAShb5ONSWlcgKCtLBHozVuxvUn7F+j51DUORk5a8VlMp666U2YFcC06NgrM8luRnLXzJ0RNN3TbZwRtNN/ZxXvCI1UpwrxZbohWc1kQneqWU5vs5aegCLCe92kP19Y9+8MeoCf7mwIPrQPCTh6VrAEd7+/ECR3qfTKIPktIXzHfwRobIOMYegt4R9lku0T6ln2p18+m3RwTtp6MiaEwOKS84fdrjhdP/cG+zuzQn9MCHX8LatqY=

`num`にはリアクティブな0が入ってて、`msg`には`num`の値の型を`computed

バッファレスレンダリングで25行から始めるWebGL2

WebGLが動くかどうか試そうと思った方、ちょろっとコードを書いてみようとしても、頂点バッファを用意するのって微妙に面倒ですよね。
WebGL2では、頂点シェーダで`gl_VertexID`という内部変数を使うことができます。

これをうまく使うことで、頂点バッファを使わずに三角形を描画することができます。

@cx20 さんの以下の記事のコードをベースに、さらに短い最短のWebGLコードを書いてみましょう。

https://qiita.com/cx20/items/0597cdbccdd370e05956

## 25行のWebGL2コード

こんな感じになります（２５行と言いつつ厳密には２６行なんだけど）。

“`javascript
let c, gl;
let v = ‘#version 300 es\nprecision highp float; void main() { float x = float(gl_VertexID – 1); float y = float((gl_VertexID & 1) * 2 – 1); gl_Position = vec4(x,

QBの学内順位を表示したい

# はじめに
Question Bankの国試問題を解いていると、問題数の進捗具合を示すグラフがありますが、その図には学内順位が載っていないと思います。今回はグラフのプロットを、Chromeの拡張機能を使って読みとり、自分の順位を把握できるツールを作ったのでメモしてます。

# 現在の環境
– Windows11
– Google Chrome バージョン: 126.0.6478.182
-Mac book pro M1でも動作確認済み
## ステップ1: ファイルの作成
以下のファイルを1つのフォルダにまとめます：

– manifest.json
– popup.html
– popup.js
– imagesフォルダ内の画像ファイル:
icon16.png
icon48.png
icon128.png
background.png


#

[初心者向け] JavaScript で AtCoder の問題を解く

# はじめに
JavaScript で AtCoder の問題を解く方法を教える機会があり Notion にまとめたので、どうせなら公開しようと思って記事を書いています。

※ JavaScript の関数やメソッドを学んだくらいの方を想定しています。

# 目次
[1.AtCoderとは](#1-atcoderとは)
[2.標準入出力とは](#2-標準入出力とは)
[3.基本の型](#3-基本の型)
[4.受け取った値](#4-受け取った値)
[5.とりあえずこれだけは覚える](#5-とりあえずこれだけは覚える)
[6.値の扱い方](#6-値の扱い方)
[7.全体のコード](#7-全体のコード)
[8.さいごに](#8-さいごに)

# 1. AtCoderとは
AtCoder は、**競技プログラミングコンテストを開催している国内サイト**です。
詳しくは↓のサイトで詳しく説明されているので、こちらでは割愛します。

https://and-engineer.com/articles/YfPo9xAAAB8ATGLv

# 2. 標準入出力とは
AtCoder では、**何らかの入

超初学者向け 関数宣言とアロー関数の違い(イメージ)

## 関数宣言の書き方

“`JavaScript
function greet(name){
return `Hello ${name}`;
};
 
console.log(greet(“John”));
“`
出力結果
“`
hello John
“`

## アロー関数の書き方

“`Javascript
const greet = (name) => {
return `Hello ${name}`;
};
 
console.log(greet(“John”));
“`
出力結果
“`
Hello John
“`

### 解説
どちらも同じ出力結果になっています。

2つの書き方について感覚的ではありますが、自分なりの解釈を書きたいと思います。

– functionの英語の意味は、機能，用途，目的；役割，任務など。
イメージとしては、「function」でこういう機能を持ちます！と宣言をするということ。
– アローとはarrow(矢印)という意味なので、関数を矢印 => で表現しますというイメージ。

どちらの方を使ったらいいのかは諸説あるよ

JavaScriptでvarが使われないかつ非推奨な理由

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var

https://typescriptbook.jp/reference/values-types-variables/vars-problems

https://qiita.com/ist-t-s/items/49ed558bd837452353b8

https://myprg.dev/posts/javascript-declaration-type