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

（1冊ですべて身につく）カラーピッカーを作成する　作り始め

お疲れ様です。

今日は早い時間の更新です。
そして学習内容は以前紹介した、「1冊ですべて身につくJavaScript　入門講座」という本を読みながら、実際に手を動かしてカラーピッカーを作っていきます。
完成したら、自己紹介ページに載せようと考えています:relaxed:


HTMLで **input id=”colorPicker”**　と入力し、1枚目の画像のようにカラーピッカーを設置します。idは後からカラーコードを取得するようなので、すでに設定しておきます。
（input=”color”　であれば設置

我が家のUtil.js

# JavaScriptには、今欲しい関数がない
PHP + JavaScriptの組み合わせで作業をしていると、
PHPは使いそうなものは、用意しておく。
他方jsは、作れるものは、用意しない。
という印象です。（個人的な感想です）

PHPの関数や他の言語から、ヒントを得てUtilクラスを作って、使っています。
今回は、その中でも自分が多用する関数たちを紹介したいと思います。
もし有用なものがあれば、どうぞ自由ご利用ください。

こんなのも便利だよ。とか、
それはない。こうすればいい。とか
あればぜひコメントください。

## 前提
今回のUtilクラスは、静的メソッドだけがたくさん入っているクラスです。
以下のようなファイルで、これから紹介するメソッドが `static method(){}`のように書かれています。
“`js
class Util{
static method(){

}
}
“`

## PHPからの移植群
### nl2br 改行を\
に変換
textareaから入力されたものをプレビューしたいとか。
DBから読み込んだ改行付きの

バックエンドって何してるの？関数と何が違うのか

### バックエンドの仕組みとは？

バックエンドは、ウェブアプリケーションの裏側で動作し、ユーザーインターフェースとデータベース間の通信や処理を担当する部分です。ここでは、JavaScriptを使ってバックエンドの基本的な仕組みについて解説します。

#### 1. 関数呼び出しとバックエンドの問い合わせの違い

– **関数呼び出し**:
“`javascript
function calculateSum(a, b) {
return a + b;
}

// 関数の呼び出し
let result = calculateSum(3, 5);
console.log(result); // 出力: 8
“`
上記の例では、`calculateSum` 関数が定義され、引数 `3` と `5` を渡して呼び出されています。

– **バックエンドの問い合わせ**:
“`javascript
// クライアントからのリクエストを模した例
fetch(‘/api/data’)
.then(response => r

【情報】2024年7月12日を過ぎるとGemini 1.0 Pro Vision を指定した API 呼び出しはエラーになるそうです

メール通知されているので知っている人多いとは思いますが、一応メールを画像にして共有しておきます。

多分、gemini-1.5-flashに置き換えてねってことなんだと思います。


以上です。

mjsとcjsの違いって何？　普通のjsとどう違うの？　ChatGPTに聞いてみた

## `mjs` と `cjs` の違い

JavaScriptのモジュールシステムには、主に`mjs`（ECMAScript Modules）と`cjs`（CommonJS）の2種類があります。この記事では、これらの違いについて詳しく説明します。

### 背景

JavaScriptはもともとブラウザ上で動作するスクリプト言語として開発されました。初期の頃は、モジュールという概念が存在せず、全てのコードはグローバルスコープで実行されていました。しかし、プロジェクトが大規模化するにつれて、コードの再利用や分割が求められるようになり、モジュールシステムが導入されました。

#### CommonJS (cjs)
CommonJSは、サーバーサイドJavaScript（特にNode.js）でのモジュール管理のために開発された標準です。Node.jsは2009年に登場し、そのモジュールシステムとしてCommonJSを採用しました。CommonJSはシンプルで直感的な設計が特徴です。

#### ECMAScript Modules (mjs)
ECMAScript Modulesは、Jav

フロントエンドエンジニアのWeb開発アクセシビリティ入門②｜CSS/JavaScript

## 初めに
### 記事を書いた人について
2022年3月からフロントエンドエンジニアとして働き始めました。
2024年6月現在、約2年ほどフロントエンドエンジニアとしての実務経験を積んでいます。

### この記事について
上記の通り、約2年実務経験を積み、そろそろアクセシビリティについてしっかり学ばなければならないと感じました。
自分と同じようなフロントエンドエンジニアとしてアクセシビリティを学び始める方に向けて、自分が学んだことを以下の3つの記事に分けて公開します。
– [フロントエンドエンジニアのWeb開発アクセシビリティ入門①｜HTML](https://qiita.com/msuzuna/private/2b0114d4f76b62b95c7a)
– フロントエンドエンジニアのWeb開発アクセシビリティ入門②｜CSS/JavaScript（この記事）
– フロントエンドエンジニアのWeb開発アクセシビリティ入門③｜WAI-ARIA（公開予定）

なお、この記事は主に以下のページを自分なりにわかりやすくした内容です。

https://developer.mozilla.o

ViteとReactを使用してSupabaseからレコードを取得する(準備編)

## Supabaseからレコードを取得する
https://supabase.com/docs/guides/getting-started/quickstarts/reactjs

取得までの一連の流れは上記Docsに書いてあります。が

“`src/App.jsx
const supabase = createClient(“https://.supabase.co”, ““);
“`
ここではSupaBaseクライアントを作成する際にプロジェクトのURLと匿名キーを渡しています。

:::note warn
環境変数の使用
匿名キーや他の機密情報は、環境変数などの安全な方法で設定し、クライアントサイドのコードでこれらの環境変数を参照するようにします。例えば、Viteの場合は.envファイルを使用して環境変数を管理し、import.meta.env経由でアクセスします。
:::

## 環境変数を使用してSupabaseからレコードを取得する準備
“`.env
//必ずプロジェクトのルートフォルダに作成すること
VITE_S

【Figma Plugins】FigJamのPluginで出来ること・出来ないこと

## はじめに
みなさんは、Figmaのプラグイン・FigJamのプラグインを作ったことはあるでしょうか？

作ったことがない方にとって、あまり違いが分かりずらいかなと思います。
そのため、この記事では、FigJamのプラグインの出来ること・出来ないことを中心に、FigmaとFigJamのプラグインの違いを紹介しようと思います。

## FigJamのPluginで出来ること・出来ないこと

### コンポーネント
FigJamでは、専用のステッカーがあるため、Plugin APIを使用して、有効なライブラリのコンポーネントやFigmaのデザインファイルからFigJamのファイルに貼り付けられたデザインにはアクセスすることができます。

また、Plugin APIを使用して、FigJamのファイル内にあるローカルスタイルやインスタンスにもアクセスできます。

た

【React】UIコンポーネントライブラリの作成・公開する方法

# はじめに

こんにちは、エンジニアのkeitaMaxです。

今回は、ReactのUIライブラリを作成して公開する方法についてを記事にさせていただきます。

以下の記事を参考にさせていただきます。

https://qiita.com/yohei_nakamura/items/fd1f2f418f24d4dea503

# プロジェクト作成

以下コマンドでReactのプロジェクトを作成します。

“`
npm create vite@latest
“`

色々聞かれると思うので、以下のように答えます。
“`
develop % npm create vite@latest
Need to install the following packages:
create-vite@5.3.0
Ok to proceed? (y) y
✔ Project name: … react-ui-components-example
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding pro

Reactでペット用の日記アプリを作ってみた

# はじめに
ご無沙汰しております(/・ω・)/
現在、フロントエンドの技術をキャッチアップしていますが、なにか自分で作りたいなと思ったので日記アプリを作成しました。
今回は、どのような技術を用いて作成したか、どういう点を工夫したかなど自分なりにまとめてみたいと思います。
そんなもん工夫もクソもねえ！当たり前だこの野郎！という意見もあるかと思いますが、初心者ゆえ温かく見守っていただけると嬉しいです(´・ω・｀)

# なぜ日記アプリにしたのか
Todoアプリや簡単なSNSなどいろいろ候補はありましたが、今回は日記アプリを選択しました。
現在、私はペットを飼っております。そうです。奴隷になっているということです。
ペットを飼っている人ならわかるかと思いますが、やはりかわいい存在、成長を記録したいなと思うことがあります。
そこで、Xやインスタなどではなく、あくまで個人の自己満で日記をつけられるものが欲しいなという理由で日記アプリを作ることに決めました。
ということでまずは私のご主人様たちを紹介するZe☆

### パポ
![2713.JPEG](https://qiita-image-st

Google App Scriptを自分のマシンで開発できる google clasp を使ってみる・前編

社内向け発表資料をQiitaに投稿。

# GAS (Google App Script) とは

## GASの特徴

ChatGPTさんに尋ねてみるとこんな事いってきます。

“`
Google App Script（グーグルアプスクリプト）とは、Googleが提供しているプログラミングツールです。
これを使うと、Googleのさまざまなアプリ（たとえば、Gmail、Googleドライブ、Googleスプレッドシートなど）をもっと便利にするためのプログラムを書けるようになります。
“`

– 定期的にスクリプトを実行でき、決まった処理を自動化することができる
– スプレッドシートに格納されたデータを処理することができる
– ウェブブラウザとGoogleのアカウントがあれば簡単に始められる
– 利用は基本的に無料
– Googleのサービスと簡単に連携することができる

## GASのデメリット

– 実行時間に制限がある
– スクリプトの実行時間は１回の処理につき最大6分
– 6分を超えたらスクリプトが強制終了される
– JavaScriptベースのプロ

[JavaScript] 借金返済と学ぶレキシカル環境、クロージャ

JavaScriptを触っていてレキシカル環境やクロージャでつまずいた人も多いはず。
そんなあなた(私)のために借金返済に追われるカイージくんと共に勉強していきましょう。
概要から話していくので、わからないとこがあってもスラーと読み飛ばしていただけると助かります。
## 登場人物
どこかでみたことがある方々ですね。~~物語始まってすらないのにすでに借金が385万あってかわいそうに。~~

後から数人増えます。多分。

## 関数の使い方
本題に入る前に、数点確認しておきましょう。関数といえば、`function`を使った関数宣言、関数式とアロー関数の3種類がすぐ思いつきますね。
~~~js:JavaScript
const func1 = function () {}; //無名関数での関数式
c

AIZU ONLINE JUDGEの提出前コードをVSCodeでテストする

アルゴリズムの勉強のため、AIZU ONLINE JUDGEを始めて使おうとしたら、提出前コードをVSCodeでテストするのに標準入力の受け取り方が分からなかったので、メモ。

## 環境
Mac
zsh

### プログラム
ファイル名(実行例): main.js
“`javascript
function Main(input) {
const data = input.split(“\n”);

《略》
console.log(hoge);
}

Main(require(“fs”).readFileSync(“/dev/stdin”, “utf8”));
“`

※標準入力のコードは　https://yukicoder.me/wiki/stdio を参考にしました。

### 実行と標準入力の受け取り
“`zsh
node main.js <

JavaScript: Improved encode URI

出力文字がやたらと多い`escape()`、`encodeURI()`、`encodeURIComponent()`とかいう組み込み関数があります。出力量を抑えるべく考案された模倣関数を本記事で紹介します。

そもそもなぜ本家3つの関数の排泄文字が多過ぎるのか? それは特定の文字を16進数化する上に、`接頭辞%`が付加されるからです。例えば`encodeURI(“ぁあ”)`→`%E3%81%81%E3%81%82`といった具合。
該当文字が連続する場合、`%`を省略しろと突っ込みたくなります。つまり`%E38181E38182`と言う具合にです(区切り文字も必要ですが)。更に言えば、UTF8の16進数列は長過ぎます。

## 実装編
また下らぬ前置きが短くなってしまったので、とっとと本題のprogramに話題をすり替えます。

%直後の文字	意味
_ 0 – 9 A – F(0-16)	[_0-9A-F][\w][\w]の3つの文字列でUnicode 0 ～ 65535を表現
G – W(17-33)	上 元記事を表示 【javascript】observerで絵本の表紙をリッチにしてみた # はじめに 前回、フィルターについてcodepen challengeを行った記事を書いたのですが、今回は新しくスクロールについてcodepen challengeに調整んしてみたので、そちらを記事にしていきます。 詳しくは前回の記事を参照してください。[被写界深度再現してみた](https://qiita.com/hayuse/items/2beb7db0bd2a63741f94) ## 今回作ったもの  今回作ったものは自分のお気に入りの絵本をスクロールアニメーションで紹介していくものです。 **0.25倍でみて** もらえるとちゃんと見えるかと思います。。。（レスポンシブ対応できてない。。。） 元記事を表示 Dockerが全然わからない人に向けて私こと山崎 令恩なりのこれ1本で0から学べる超丁寧なDocker入門 # はじめに 私のエンジニアとしての初仕事はDockerでした。辛かったのをいまでも思い出します みなさんこんにちは、山崎令恩です。 みなさんはエンジニア始めたての時にどんなことで苦労したでしょうか？ GitHub Docker Kubernetes AWS など色々あるかと思いましたが、「環境構築」というのは多くの人がつまづく箇所かと思います。 プログラミングの勉強をするにはそもそもの開発環境がないとできないことも多いです。 またAWSなどのクラウドを利用してデプロイをするときにも再度登場して苦しめられます。 今回はそんな初心者には考え方や使いどころがわかりづらいDockerについて例え話を活用しながら説明していきたいと思います。 Dockerが難しいと思うのは、「概念がよくわからない」「説明を読んでも使いどころのイメージがつかない」というのがあるかと思います。 この記事では「例え話」「ハンズオン」を駆使しながら解説しております。 エンジニアをやる上でDockerの技術は必須だと考えます。ぜひとも使えるようになっていただいてご自身の勉強に活用いただけたらと思います。 # 元記事を表示 RustとWebAssemblyで拡大鏡ツール作ってみた # はじめに 前回RustとWebAssemblyで電光掲示板ツール作った際に、拡大鏡ツール的なものも作ってみたいと思ったため、作成してみようと思う。🔎 (作り始めてから気が付きました、、、これ、わざわざWasm使わなくても CSSのscaleなどを使えば簡単に実装できる！！😮 と考えながらも、とりあえず作ってしまったので記事にします💪) 前回作った電光掲示板ツールについて https://qiita.com/shisojuice/items/0bd4663aed0a3152d1f6 # プロジェクトの作成 まず、画像を取り込み、imgタグに表示する。 取り込む際に、処理しやすいサイズとアスペクト比に画像をクロップしておく。(今回は1280pxベース) “`rust:lib.rs // 省略 #[wasm_bindgen] pub fn resize_img(image_data: &[u8]) -> String { let img = resize_image(image::load_from_memory(image_data).unwr 元記事を表示 ドラッグアンドドロップでファイルをアップロードができ、画像の場合はプレビューも見れるJS “`html