LWCのlightning-record-pickerの検索ボックスを初期化する方法

## 概要
LWC開発で[lightning-record-picker](https://developer.salesforce.com/docs/component-library/bundle/lightning-record-picker)を使用したが、検索ボックスを初期化する方法にて少し手間取ったので、こちらに備忘として記録しておく。

## 対象
lightning-record-pickerを使用していて、検索ボックスの初期化方法にて詰まっている人

## やりたいこと
lightning-record-pickerで設定した検索ボックスを初期化したい

## 説明
– 他のinput要素と同様にvalue属性に初期化処理を施そうとしたが、検索ボックスの初期化がなぜかうまくいかなかった

“` javas

P5.js 日本語リファレンス(normal)

このページでは[「P5.js 日本語リファレンス」](https://qiita.com/bit0101/items/91818244dc26c767a0fe) の normal関数を説明します。

## normal()

### 説明文

形状の頂点の法線ベクトルを設定します。

beginShape() と endShape() の間で vertex() を使用して指定される頂点の法線ベクトルを定義します。
法線ベクトルとは、光が形状からどのように反射するかを制御するものです。

normal() で、法線ベクトルの定義方法には2種類あります。
– normal(1, 2, 3) のように x、y、z の 3 つのパラメタ指定すると、法線ベクトルの x、y、z 成分が設定されます。
– normal(myVector) のように1つのパラメタを指定すると、それは p5.Vector オブジェクトが指定されたと認識してそのまま法線ベクトルの設定に使用されます。

normal() は、vertex() と同様に、beginShape() 関数と endShape() 関数の間で呼

export defaultって何が嬉しいの：開発の困難を解決する具体例

### 便利な`export default`：開発の困難を解決する具体例

**1. 名前の衝突を防ぐ**
– **問題**: あるプロジェクトで、異なるライブラリから`Button`という名前のコンポーネントをインポートしたい場合、名前が重複してしまうとどちらの`Button`かわかりにくくなります。
– **解決策**: `export default`を使用して、インポート時に名前を`ボタン１`と`ボタン２`に変更します。
“`javascript
// Button1.js
export default function Button() {
return ボタン１;
}

// Button2.js
export default function Button() {
return ボタン２;
}

// App.j

JavaScript 関数の作り方

JavaScriptで関数を作る方法はいくつかあります。ここでは主な方法をいくつか紹介します。関数を作るときは、その機能や目的に応じて最適な形式を選ぶことが重要です。

### 1. 関数宣言 (Function Declaration)
関数宣言は最も一般的な形式で、`function` キーワードを使って関数を定義します。この方法で定義された関数は**関数宣言の巻き上げ**（hoisting）が行われ、定義より前のコードからでも呼び出すことができます。

“`javascript
function greet(name) {
return `Hello, ${name}!`;
}

console.log(greet(“Alice”)); // “Hello, Alice!”
“`

### 2. 関数式 (Function Expression)
関数式では、関数を変数に割り当てることで定義します。この方法では関数は巻き上げられません。関数式は匿名（名前のない）関数を使うこともできますが、名前付き関数を使うこともできます。

“`javascript
const

await sleep.js【async 1行JavaScript】コピペ可

“`javascript
const sleep = s => new Promise(resolve => setTimeout(resolve, 1000 * s))

// 1秒待つ
await sleep(1)

// 5秒待つ
await sleep(5)

// 500ミリ秒待つ
await sleep(.5)
“`

“`javascript
await new Promise(resolve => setTimeout(resolve, 3000)) // 3秒待つ
“`

https://qiita.com/asa-taka/items/888bc5a1d7f30ee7eda2

https://qiita.com/suin/items/99aa8641d06b5f819656

Webアプリ開発 ユーザー新規登録編

# 初めに
webアプリの開発ができたので、開発中に考えたことを書いていきます。
今回はユーザー新規登録についてです。

# 開発環境

macOS Sonoma 14.4.1
PHP 8.3.3
Laravel Installer 5.2.0
Laravel Framework 11.0.5

# ソースコード

https://github.com/opatu07/portfolio

# 考えたこと

## ユーザー新規登録編

### ビュー

ビューで意識したことは
新規登録フォームのコンポーネント化です。

フォームの外枠の設定をする
panel.blade.php

フォーム欄の名前をつける
label.blade.php

バリデーションエラーを出す
error.blade.php

フォームでよく使われるものはコンポーネント化をすることで機能修正する際に該当箇所を見つけやすくしました。

### ルート

次にルートは
“`web.php
Route::get(‘register’, [RegisterController::class, ‘create’])->

JSでスタイル情報を取得する【classList / getComputedStyle】

# はじめに

JavaScriptで、HTML要素のstyle情報（CSS）を取得したいときは
主に `classList` か `getComputedStyle` を使用すると良いらしいです。

# 1. `classList` を使用する

使用ケース：**HTML要素のCSSクラスについて`DOMTokenList` のメソッドを使用したい時**

– HTML要素にCSSクラスを追加したい・削除したい
`add()` / `remove()` / `toggle()` / `replace()`
– HTML要素に特定のCSSクラスが含まれているかを知りたい
`contains()`

以下の例は `add()` / `remove()` / `toggle()` によってCSSクラスを追加・削除できることを示しています。

CodePenの使い方

| |
|:–:|
|![スクリーンショット 2024-05-04 8.45.05.png](https://qiita-image-store.s3.a

【React環境構築編】個人開発ログ #1

# 動作環境
OS: macOS
CPU: Apple M1チップ

# Reactの環境構築
まずは、Node.jsをインストール
以下のサイトから行いました。
[nodejsインストールサイト](https://nodejs.org/en/)
「Download Node.js(LTS)」というボタンをクリックするとダウンロードされます。

ダウンロードされたインストラーを起動するとインストールが始まったので
全てデフォルトで進めてインストールを完了しました。

“`sh
node -v
v20.12.2
“`
上記のように表示されたのでインストール完了

# テストプロジェクトを作成
任意のフォルダで以下のコマンドを実行

“`sh
npx create-react-app test-app
“`

上記でReactプロジェクトが

エラーが出たら喜べ。エラーをちゃんと出せ。

どうもエラーを出すもしくはエラーが出るのが怖いという人がいるみたい。例えば改修を行うときに既存部分でエラーが出ないことを最優先にして増築を行いいびつな構造を生み出すとか、単純に例外を全然使わないとか。エラーが出ると、「うわ、エラーになった。手間かけさせやがって面倒だなぁ…」みたいな感覚があって、とにかく自分がコードを書くときも一切例外を投げないというスタンスをとりがちなのかもしれない。

私はここで、適切にエラーが出てくれるのはむしろ喜ばしいことであり、自分がコードを書くときも積極的にエラーを出すようにすべきだ、という主張をする。

# 関数定義のドキュメンテーションの一部
ある関数の中身で一番最初に書くべき処理は何か、それは引数のチェックをして条件を満たさなければエラーを出すことである。例えば文字列は特定の形式になってなければならないとか、数値に最大値最小値があるとか、これらは関数の入力の前提条件としてよくあることだが、それをちゃんとチェックする。

“`typescript
function f(s: string, o: { isHoge: boolean, fuga?: nu

JavaScript 関数

JavaScriptを学習した内容のメモ

#### クロージャ

クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせです。
言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供します。
JavaScript では、関数が作成されるたびにクロージャが作成されます。

#### 関数コンテキスト

実行中の関数内の変数・関数
arguments super this 外部変数

関数は実行可能なオブジェクトである

#### コールバック関数

他の関数に引数として渡される関数

“`
function a(b) {
b();
}

function b(){
}
“`

#### this

呼び出し元のオブジェクトへの参照を保持するキーワード

オブジェクトのメソッド
として実行される場合

“`
‘this’ => 呼び出し元オブジェクト

関数
として実行される場合
‘this’ => グローバルオブジェクト
“`

#### メモリ空間

“`
hoge
hello → function

Markup言語の備忘録 (超初心者)

HTML fileを作成して、簡単なウェブページを作ってみた

HTML (HyperText Markup Language)

1) 基本的な構造:

“`html
: HTML文書のバージョンとタイプを指定します。
“`

“`html
: HTML文書のルート要素です。
“`

“`html
: ページのメタ情報や外部リソースの参照など、文書のヘッダーを定義します。
“`

“`html

“`

“`html
: メタデータを定義します。
“`

“`html
: ページの本文を定義します。
“`

2) テキスト:

“`html

: h1見出しを定義します。

: h2見出しを定義します。

: h3見出しを定義しま

GitHubのIssueをJavascriptから作る方法

# はじめに
JavascriptでGitHubのIssueを作成したい！
そんな事よくあると思います()
それを調べるのにかなり苦労したので、
備忘録として書くことにしました。

# トークンの取得
GitHubをJavascript側から操作する為、
GitHubへのアクセストークンを取得する必要があります。
アクセストークンには様々な権限を付与する事ができますが、
詳しくは他の記事などを参照してくださいな….

## アクセストークンの作成
GitHubアカウントを持っている。
ログインしている事が前提になります。

まず最初はSettingsに移動しましょう。

少し下がった所にあるDeveloper settingsに移動しましょう。
htmlのli要素をドラッグして順序を変更できるようにする

# はじめに
Chromeの機能拡張を作っていて、`li`要素を変更できる機能を実装しようと思いました。
その部分だけを抜き出して説明します。

ソースは下記にあります。（この記事中ですべて説明できていますが、一応）

https://github.com/yo16/html_li_draggable_prac

動作サンプルと最低限必要な全ソースはこちら

See the Pen [JaveScript]エラー処理について

## はじめに
JavaScriptのエラー処理について学習したことをまとめていきます。

## エラーハンドリングとは
例外が発生した時、そのエラーや例外を適切に処理するプロセスや手法のこと(**例外処理**と呼ぶこともある)。
エラーハンドリングが組み込まれていないと、例外が起きた場合に予期せぬ動作をしたり、クラッシュしてしまう。

## エラー処理の基本
エラー処理の書き方は3つ
1. try…catch
1. throw
1. エラーオブジェクト

## try…catch
`tryブロック内`で例外が発生した時に、その例外を`catchブロック`で受け取ることができる
※例外が発生しなかったらcatchは行われない
`finallyブロック`は例外が発生した・しないに関わらず最終的に必ず実行されるブロック
“`JavaScript:try…catch
try {
// 実行される処理
} catch(error) {
//例外が発生した場合に実行される処理
} finally {
//必ず実行される処理
}
“`
**注意点**
この処理には必要最低限1つ

元記事を表示

[JavaScript] JSXとは

# まとめ
JSXとは、JavaScriptの構文拡張であり、React.jsのコンポーネントを記述するために使用されます。**HTMLのような構文を使用してUIを記述できる**ため、React.jsでの開発がより直感的になります。

# 目次
– [参考ソースコード](#参考ソースコード)
– [JSXの利点](#JSXの利点)
– [JSXの基本構文](#JSXの基本構文)
– [JSXのコンパイル](#JSXのコンパイル)

# 参考ソースコード

~~~index.js

Vueのref()についてクイックに解説

### refについての概要

Vue.js公式には以下の通りにあります。

–引用–

>テンプレート内で ref を使用し、後から ref の値を変更した場合、Vue は自動的にその変更を検出し、それに応じて DOM を更新します。これは、依存関係追跡ベースのリアクティビティーシステムによって実現されています。コンポーネントが初めてレンダリングされるとき、Vue はレンダリング中に使用されたすべての ref を追跡します。その後 ref が変更されると、それを追跡しているコンポーネントの再レンダリングがトリガーされます。

https://ja.vuejs.org/guide/essentials/reactivity-fundamentals.html#ref

つまり、jsの変数の変化はDOMが感知できないわけです。そこでref()関数の登場というわけですね。
refで定義した変数に変更があれば、実際のDOMに即時反映します。

### 例1:refを使わない場合

下記は、vue内で定義した変数をtemplateに埋め込んでいる例です。change stateボタンを押

JSX・クラスコンポーネントと関数コンポーネント [5日間でReactの基礎を習得したい 2/5日目]

# はじめに

5日間でReactの基礎を習得する試みの2日目です。2日目は、Reactでよく使われるJSXの記法、クラスコンポーネントと関数コンポーネントについて学びます。

https://qiita.com/MichaelHashimoto/items/f3ad9f56081a40b9b788

私はC#やPythonを仕事で使っているため、オブジェクト指向の言語的な考え方や、Pythonでの例えを使って理解を進めます。同じような境遇の方の理解の助けになれば幸いです。

# JSX

次のような記事を作りたいとします。

この記事を作るために、ただのJavaScriptの構文でReactのHelloWorldクラスコンポーネントを作ると、以下になります。

“`js
class HelloWorld extends React.Comp

VSCodeの機能拡張を作った

今回は、Visual Studio Code(VSCode)の機能拡張を作っていきます。
ESP32で動くJavascript実行環境を作っていまして、普段使っているVSCodeからそのJavascriptの実装とアップロードができるようにしたかったのがモチベーションです。

コマンドとしては、5つ作ります。また、VSCodeの画面の左下のステータスバーに、1つのテキストのボタンと3つのアイコンのボタンを作ります。


[VScode Extension Guide]

https://code.visualstudio.com/api

# 開発

・環境構築
・ひな型作成
・コマンドの実装
・ステータスバーのボタンの実装
・メッセージトーストの表示
・入力ダイアログ
・選択ダイアログ
・コマンドの実行
・クリップボードへのコピー

## 環境

Webアプリ開発 ログイン編

# 初めに
webアプリの開発ができたので、開発中に考えたことを書いていきます。
今回はログインについてです。

# 開発環境

macOS Sonoma 14.4.1
PHP 8.3.3
Laravel Installer 5.2.0
Laravel Framework 11.0.5

# ソースコード

https://github.com/opatu07/portfolio

# 考えたこと

## ログイン編

### 作りながら考えたこと

まずはビューで意識したことは
ログイン機能のコンポーネント化です。

フォームの外枠の設定をする
panel.blade.php

フォーム欄の名前をつける
label.blade.php

バリデーションエラーを出す
error.blade.php

フォームでよく使われるものはコンポーネント化をすることで機能修正する際に該当箇所を見つけやすくしました。

次にルートは
“`web.php
Route::get(‘login’, [SessionsController::class, ‘create’])->middleware(‘g

【React】scriptタグを埋め込んで動かしたい！！

# はじめに
先日、4月頭にリリースしたサービスの広告審査が通りました。「よっしゃ、実装するぞ！」と意気込んだものの、対象画面内に`script`タグを埋め込む必要があり、どうやら単純に実装しても動かないようでした。
自分なりに色々調べて、`ChatGPT`や`Bard`に聞いたりしてうまいこと動いたのでメモとして残します。あまり必要としないかもしれませんが、同じく悩んでいる方の力になればと思います。

# ちょっと宣伝
審査が通ったサービスというのがこちらです。

https://wikimiru.com/

wikimiru（ウィキミル）という、時間経過でランダムに流れるWikipediaの情報を眺めることができるサービスです。

**本当にただそれだけです。**

通勤時間などに使ってもらえると嬉しいです（個人的には歯磨きをしながらよく見ています）！

# 実装
本題に入ります。
私の場合、以下のような構成にする必要がありました。

“`html

/* 実際はconsol