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

今日から始めるAngular！さくっと環境構築

# はじめに
Angulerの環境構築の手順について、解説します。

1. Angular CLIのインストール
2. 新しいプロジェクトの作成
3. プロジェクトの実行

# 前提条件

ngularプロジェクトを始める前に、以下のソフトウェアがインストールされていることを確認してください。

– Node.js (最新のLTSバージョン)
– npm (Node.jsに含まれています)

これらはAngular CLIとプロジェクトの依存関係管理に必要です。

# 1. Angular CLIのインストール
Angular CLIは、プロジェクトの作成、開発、ビルド、デプロイを効率化するためのツールです。コマンドラインで以下のコマンドを実行してインストールします。

“`
npm install -g @angular/cli
“`

このコマンドは、Angular CLIをグローバルにインストールし、どのディレクトリからでもアクセスできるようにします。

# 2. 新しいプロジェクトの作成
Angular CLIを使用して新しいプロジェクトを作成するには、次のコマンドを実行し

【初学者用】JavaScript学習教材(DOM操作、アニメーション、非同期処理etc)

# はじめに
以前Reactのアプリ作成学習教材を作成したのですが、今回はJavaScriptバージョンです。
HTML,CSS,JavaScriptだけで構成されてますので、初心者の方も安心してください。

# 学習の仕方
各プロジェクトのコードは下記のGitHubにあげてます。
READMEファイルに学習手順を記載してますので、その通りに実施していきましょう。

https://github.com/Kroro1208/js-beginner-projects

# 作成するプロジェクトの一部
全部で11個のプロジェクトを作成します。
JS初学者がDOM操作に慣れることを主眼に置いてますので、DOM操作や苦手だな～という方は是非やってみてください:point_up:

## ポモドーロタイマー

## テキストカウンター
![8.gif](ht

MARQUEE好きに送る最高にマーキーなアナウンスメントをしてくれるHTML

## 世の中の人は意外とMARQUEE好き

こんにちは！私はプログラミングをたまに教えたりしているような男です。

基本的には毎日リラックスして生きています。

## どんなできる人材も手が3本も4本もあるわけではない

実はわたくし自身のプログラミングのピークはIT業界に入る前でした。

その頃の私は何も知識がないので、ただやってみることを繰り返していて、その結果自分にとって役立つアプリをいくつも制作することができていました。

現在の仕事はできる人の横でその人が忙しすぎて着手できない仕事をかわりにやってあげるハイエナのような仕事ぶりを発揮しています。

## IT業界に転職し想像をはるかに超えるやりがいのなさに絶望する

私は主にPHPとフロントエンドについて学んできました。

そのほかに学生時代はJavaについても学び、百科事典のように分厚いテキストを片手に様々なアプリの制作に挑戦していました。

実はその頃こそがプログラマとして1番輝いていた時期だったんです。

実際IT業界に転職するとほとんどソースコードを触る機会はありませんでした。

既存のソースコードの修正と**テスト

XXXリテラルについて整理する

## リテラルとは
プログラム上で数値や文字列など、データ型の値を直接記述できるように構文として定義されたものである。

## リテラルの種類
リテラルの種類についていくつかピックアップし、紹介する。

#### 文字列リテラル
頻繁に使用され、見慣れているであろうリテラル。シングルクォーテーション（’）またはダブルクォーテーション（”）で文字列を囲んだものを指し、文字列型のデータであることを表現する。
なおシングルクォーテーション（’）またはダブルクォーテーション（”）で差異はない。

“` javascript: sample_text.js
const str = “こんにちは”;
“`

#### 整数リテラル
こちらもよく見慣れているであろうリテラル。10進数の数字を表現したいのであれば、単にその数値だけを書く。

“` javascript: sample_num.js
console.log(255); // => 255
“`

#### テンプレートリテラル
バッククォート（\`）で囲んだ範囲を文字列とするリテラル。本リテラルでは`プレースホルダー（${変数名

インスタンスメソッドとは何なのか、整理してみる。

## インスタンスメソッドとは
それぞれのクラスのオブジェクト（インスタンス）に紐づけられている、専用のメソッド（関数）を指します。
インスタンスメソッドができることのひとつとして、後述のDateオブジェクトの例のように、オブジェクトの情報を返すといった機能が挙げられます。

#### クラス・オブジェクト・インスタンスとは？
「`クラス`をインスタンス化して生成した`オブジェクト`」のことを`インスタンス`と呼びます。
また`インスタンス`は`オブジェクト`でもあるため、`オブジェクト`と呼ぶこともあります。
なお`クラス`はオブジェクト（インスタンス）の設計図にあたり、以下のように`new演算子`を用いることで、`クラス`からオブジェクト型のインスタンスを生成できます。

“` javascript: sample.js
const now = new Date()
“`

## インスタンスメソッドの具体例
以下はDateオブジェクトのインスタンスメソッドの一例です。★を参照ください。
インスタンスメソッドは多数あり、すべて挙げるときりがないため一部の紹介とします。
一例にあ

【Figma Plugins】業務を効率化するためにFigmaのPluginを作った話

## はじめに

みなさんは、デザインする業務をもっと効率的に行いたいと思ったことはありますか？
今回は、Qiitaで作ったFigmaのPluginを紹介しようと思います。

## IssueSynker

今回作ったFigmaのPluginは、「**IssueSynker**」 というプラグインです。

IssueSynkerでは以下のことができます。

+ Figmaファイルのテンプレートをボタン1つで生成してくれる
+ Figmaのサムネイルをボタン1つで変えてくれる

### ○ Figmaファイルのテンプレート

Dateオブジェクトを使って、日時情報を取得しよう

## 現在の日時を取得する
`Date`オブジェクトの引数を指定しない（空）ことで、現在の日時を取得する`Date`オブジェクトのインスタンスを作成します。
“` javascript: sample.js
const currentDate = new Date()
console.log(currentDate)
“`
“` javascript: 出力結果（2024-07-06 08:15:51現在）
Sat Jul 06 2024 08:15:51 GMT+0900 (日本標準時)
“`

## 特定の日時を取得する
`Date`オブジェクトのインスタンスを作成します。
このとき、特定の日時を表す引数を指定します。
“` javascript: sample.js
const dateObject = new Date(2022, 9, 27, 17, 20, 15)
console.log(dateObject)
“`
::: note warn
Dateオブジェクトの第2引数では月を指定しますが（上記例の「9」）、
0（=1月）から始まることに注意。
そのため、

JOSNデータからJavascriptオブジェクトを作成してみよう

::: note warn
「Jsonデータ」と「Javascriptオブジェクト」の構造は大変似ているが、両者はあくまでも別ものであることに注意。
「Jsonデータ」は文字列であり、「Javascriptオブジェクト」はオブジェクトである。
:::
## JSONデータを作成する
以下の通り、記述方法は３通りある。

“` javascript: sample_singleQuote.js
// シングルクォートで囲む場合
const userA = ‘{ “name”: “John”, “age”: 30 }’
“`

“` javascript: sample_backQuote.js
// バッククォートで囲む場合
const userB = `{ “name”: “John”, “age”: 30 }`
“`

“` javascript: sample_doubleQuote.js
// ダブルクォートで囲む場合
const userC = “{ \”name\”: \”John\”, \”age\”: 30 }”
“`
補足事項
1. 一対の`キー`（例：na

プログラミング初心者がwebサービスを作ります。

プログラミング始めました！これからwebサービスを作りたいと考えております！
まだ、具体的に内容は決めていませんが、ゲーム募集の掲示板みたいなものを作ろうと考えております！
良ければですが、助言などしていただけると幸いです:eyes:

JavaScript で色情報を様々扱えそうな「Color.js」を p5.js で使ってみる

JavaScriptライブラリを検索したりする中で見かけた、以下の「Color.js」を試してみたという話です。

●Color.js: Let’s get serious about color • Color.js
　https://colorjs.io/


過去に似た位置付けのライブラリで「chroma.js」は試したことがあったのですが、今回、それと似た「Color.js」も気になって試してみました。

●「chroma.js user:youtoy」の検索結果 – Qiita
　https://qiita.com/search?q=chroma.js%20user%3Ayoutoy&sort=created

## ライブラリの読み込み
ライブラリの読み込みは、以下から行えるようです。

![image.png](https://qii

VFページ経由でビューステートエラーを回避して大容量CSVをSalesforceに登録する方法

普通にAPIで叩けばいいんじゃないのって話なんですが、APIコール数の問題だったり、~~そもそもお金がなかったり~~ 、要件として度々話題に上がるので、自分のデベロッパー環境で試行錯誤したことをここにまとめます。
## そもそもVisualForceページ経由だとなにが問題になるのか
よく起きるエラーはこの辺:
* ビューステートエラー（Apexクラスに値を渡すときに落ちる）
* ヒープサイズエラー or CPUタイムアウトエラー（取得したデータの処理中に落ちる）
* ``のファイルインプット上限が5MB
※LWCならlightning-file-uploadで回避できる
　しかし、それで実装出来ればこの記事を2024年に書いていないのである
* 文字コード変換問題（SJIS→UTF8やUTF8→SJISなど）

## 動いているサンプルコード
ApexクラスだけではどうしようもなかったのでJavascriptで書きました。
とりあえず120MB程度のSJISのCSVファイルで問題なく動いているコードを置いておきます。
みんな大好きKenAll.csvでチェッ

定期的に処理を実行する拡張機能_Edge

ブラウザ拡張機能をつくっていて、定期的に処理を実行したい時の方法に苦労したのでまとめておきます。
content_scriptsだけではなくて、background/service_workerも必要なので、この通信のやり取りをするのに悩みました。

# 拡張機能
## マニフェスト
ブラウザはEdgeを使用。
マニフェストはv3。
検索するとv2の情報が多いけど、現在はv3じゃないとダメ。
permissionsに、今回使うAPIのalarmsとtabsを追加。

v3への移行について
https://developer.chrome.com/docs/extensions/develop/migrate?hl=ja

“`manifest.json
{
“name”: “ExtentionEdge”,
“description”: “定期実行する拡張機能”,
“version”: “1.0”,
“manifest_version”: 3,
“permissions”: [
“alarms”,
“tabs”

varとletの違い

## varは何回でも宣言できる
varは何回でも宣言できる
letは一回のみ宣言できる

## varはブロック文の外側からアクセスできる
※ただし関数の場合は外側からアクセスできない

## 全てのvarで宣言された変数は”巻き上げ”される
ただし初期値の値は入らない。

JavaScript: ほのかに気持ち悪いもの

過剰な空白さん
“`js
a=function () {}
a[ b ]=c
a= ( ) => {}
“`
波括弧の位置に違和感
“`js
if(a)
{
if(b)
{
c()
}
}
“`
空白4個で字下げするならtabで良くない? 空白何個かずれてるのをたまに見掛ける。気付きにくい。
“`js
if(a){
if(b){
c()
d()
}
}
“`
空行に空白類を無駄打ち(範囲選択すると正体が浮き彫り)。これは編集program側の字下げ補完機能の弊害か?
“`js
if(a){
let b

if(c){
let d

e()
}
}
“`
適度に空白改行挿入をさぼる奴。変数名1文字。code golf愛が憎らしいほど伝わってくるゴミ。
“`js
function a(){
for(var a=0,b=0;a>>0;)b+=a++;return++b
}
“`
## 閲覧上の注意
執筆者がgolf中毒であるが故……
**Java

React19で新たに追加された「use」APIの概要とその使い方について

## はじめに
React19では、新しいAPIである`use`が導入されました
このAPIは、[プロミス](https://qiita.com/Saayaman/items/7ba82c8f1b2a181d5653)や[コンテキスト](https://qiita.com/hinako_n/items/0f1e9e9b56a888d86641)などのリソースから値を読み取るためのものです
この記事`use`の基本的な概要、具体的な使用例。以前のバージョンとの違いについて説明していきたいと思います

## 基本的な概要
`use`APIは、非同期または同期リソースからのデータ取得を簡素化するためのものです
従来の方法では、プロミスからデータを取得するために多くのコードが必要ですが、`use`を使用することでこれが大幅に簡略化されます
具体的な機能は下記の通りです
– プロミス（Promise）から値を読み取ります
– コンテキスト（Context）から値を取得します
– 他の非同期リソースからデータを取得します
– useに渡されたプロミスが未解決の場合、コンポーネントはサスペンドされま

【Salesforce/LightningWebComponent】チェックボックスの値取得は event.target.checked を使う

チェックボックスの値が取得できずに少し詰まったため、解消法を記録しておく。（他の方々も上げているとは思うが）

## 取得できなかった原因

`evnet.target.value` で値を取得しようとしていた。

## 解決法

`event.target.checked` で値を取得する。

## 実例

– html
“`

“`

– JavaScript

“`
import { LightningElement } from ‘lwc’;

export default class CheckboxComponent extends LightningElement {
onClickCheckbox(event) {

HTMLから、不意に何度呼ばれても安心なJavaScriptを書いてみる

## やりたいこと

外部からGETなどで読み込んだHTMLなどに、すでに読み込んだjavascriptが含まれていることがある。
そのときに例外が発生してしまい、処理が中断されるような状況を回避したい。

## 回避できる問題

– 変数や関数の再定義を回避する
– 公開したくない処理を隠蔽することで、意図せず他の処理に影響を与えることを防ぐ
– 値をグローバルに公開したいとき、スクリプトが呼び出されるたびに初期化されることを防ぐ

## 実装例

“`sample.js
// 無名関数を即時実行することで、グローバルスコープに何も残さないようにしている (後述)
(() => {

/**
* 初回だけ初期化して、意図せず値が失われることを防ぐ
* 例としてこの型を使っているが、実際には何でも良い
*
* @type { Set }
*/
const sharedData = (() => {

// すでにデータが存在する場合はそれを返す
if (window.__sharedData) {
retur

（Javascript）スプレッド構文（…）を使ってオブジェクトを展開してみよう

:::note warn
初投稿の記事になります。
:::

### 1つのオブジェクトを展開し、変数に代入してみる

“`a.js
const userObject = { userName: ‘John’, age: 20, city: ‘New York’ }
const userObjectCopy = { …userObject }
console.log(userObjectCopy)
“`

“`
{ userName: ‘John’, age: 20, city: ‘New York’ }
“`

### 2つのオブジェクトを展開し、変数に代入してみる

“`b.js
const personObject = { userName: ‘John’, age: 20 }
const dataObject = { city: ‘New York’, job: ‘Engineer’ }
const mergedUserObject = { …personObject, …dataObject }
console.log(mergedUserObject)

pulldown_cmark使ってMarkdownEditor作ってみた

# はじめに

前回まではRustとWebAssembly使ってFavicon生成などの画像処理を学習していたが、

今回はユーティリティ系アプリの作成もしてみたいので、pulldown_cmarkを使ってマークダウンエディタを作ってみる。

以前作成したfaviconツールについて

https://qiita.com/shisojuice/items/2ce43d25ec48c2c36486

pulldown_cmarkについて

https://docs.rs/pulldown-cmark/latest/pulldown_cmark/

# プロジェクトの作成

pulldown_cmarkを使うと簡単にマークダウンの処理が可能。

下記のようにOptionと入力文字でParserを作成し、

Parserをpush_htmlのメソッドにいれるだけでHTMLに変換される(便利すぎる😎)

“`rust:lib.rs
// 省略

#[wasm_bindgen]
pub fn md_preview(input: String) -> String {
let m

【初学者-備忘録】immutableとmutableの違い

# immutable(イミュータブル)
書き換えができないもの。
プリミティブ型の値が該当する。
> 文字列、数値、BigInt、真偽値、undefined、シンボルなど

何か変数の値を変更した際に、参照が新しい値に向くことになる。
新しい値がどこかのメモリ領域に追加され、そこに参照先が切り替わる。
参照先が変わるような操作のことをイミュータブルは操作という。
元の値を上書きしたことにはならない。

# mutable(ミュータブル)
書き換えが可能なもの。
イミュータブルな値以外、オブジェクトなど
元の配列が定義されていて、そこに新しい値が追加されたとき、配列に対して参照が貼られていて、その配列から新しい参照が追加されるイメージ。
変数の参照する先が変わらない状態のこと。
元の配列の中身が変わっている＝値が上書きされている。