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

なんで左辺に?.があると代入できないの？（半年前の俺へ）

## はじめに
VSCodeを使用していると、自動で?.(オプショナルチェーン)を付与してくれます。半年前の自分は「オプショナルチェーンでundefined(null)対応ができてるんだなー」というふわふわ認識だったので、この記事を贈ることにしました。

タイトルにある「左辺に?.があると代入できない」とはこういうことです。
“`javascript
// 代入式の左辺には、省略可能なプロパティ アクセスを指定できません。ts(2779)
hoge.?property = ‘fugafuga’
“`

この式の意図は「hoge.property に ‘fugafuga’ を代入したい。」ですね。もっと付け加えると、「hoge.property に ‘fugafuga’ を代入したい。**ただし、hogeがundefinedかnullのときは何もしない**」です。
「オプショナルチェーンでundefined(null)対応ができてるんだなー」の認識だった自分はなんでこれで怒られてるのかわかりませんでした。

## 結論
~~hogeがnullもしくはundefinedのとき、

【Next.js14】×【GCS】最新のNext.js機能AppRouterに対応した非公開GCSからの画像取得を実装してみました

最新のNext.js機能App Routerに対応したGCSからのデータ取得の記事が見つからなくて困ったので書いてみました！
すでにGCS上にデータのアップロードが完了しているところからの説明になります。参考になれば嬉しいです！

# この記事でわかること
最新のNext.js機能App Routerに対応した
* APIルートの作り方
* リクエストBodyの書き方
* 非公開GCS(Google Cloud Storage)から認証してもらう方法

# １.APIルートを作る
### 1-1.APIルートを作るためのフォルダを用意する
AppRputerではこれまでと違い、下記のようなフォルダ構成にするとAPIルートになります
“`app/api“`フォルダ内に任意のフォルダを作り、そのフォルダの名がAPIからデータを取るときのURL名になります(今回は“`getProfImage“`)
フォルダに保管するデータは共通で“`route.js“`にするところもこれまでと違いますね
“`
my-app //名前は自由につけていいです//
├─ src
│ ├ app

RPAソフト不要！ブックマークレットで作業を自動化

# 概要
* ブックマークレットを用いて、RPA Challengeの入力作業を自動化するコードです。以下の動画で使われているものです。

# 実行環境
* Windows11

# 注意点
* プログラムの実行については、すべて自己責任で行ってください。実行により発生した、いかなる直接的または間接的被害について、作者はその責任を負いません。

# 結果
* 待機処理ありバージョンの実行結果は以下のとおりでした。


# コード
“`javascript:待機処理なし

(function(){
var employees = [
// 各値を配列として入力する。
{
姓: ”,
名:

JavaScript (TypeScript) のいろんな条件の書き方まとめてみた

## 記事の概要
JavaScript（TypeScript）にはいろんな条件の書き方がありますが、初心者にとっては最初見た時どういう意味なのかよくわかりませんよね。自分も最近知った部分があるので、今更ですがまとめてみました。

## 説明する内容
* 三項演算子
* オプショナルチェーン演算子`?.`
* 論理演算子`&&`
* 論理演算子`||`
* Null 合体演算子

## 前提条件
こちらの説明は、`2024年5月`時点での仕様をもとにしています。今後のアップデートによって、ここに掲載している内容ではできなくなるかも知れません。

## 1. 三項演算子
“`sample.js
条件式 ? 当てはまるとき(真)の処理 : 当てはまらないとき(偽)の処理
“`
変数に、条件に応じて別の値を代入したい時に便利です。
例）
“`
const drink = age >= 20 ? “お酒” : “ソフトドリンク”;
“`
この場合、`age`が20以上の時は”お酒”が、そうでない時は”ソフトドリンク”が、`drink`に格納されます。

参考）

https://deve

ラムダクロージャとは？ JavaScriptで状態を保持する関数を学ぶ

## はじめに
ラムダクロージャは、関数内で定義された変数の状態を保持する能力を持つ特殊な関数です。JavaScriptにおいて、ラムダクロージャはよく使われる概念の一つです。この記事では、ラムダクロージャの基本的な概念から実際のコーディングでの活用までを解説します。

## ラムダクロージャとは
ラムダクロージャは、外部のスコープから変数を参照する関数を指します。これにより、関数内で定義された変数の状態を保持し、関数が再度呼び出されたときに前回の状態を覚えておくことができます。これは、関数をオブジェクトとして扱う関数型プログラミングの一部です。

## ラムダクロージャの活用例

“`js
function counter() {
let count = 0;

return () => {
count++;
console.log(count);
};
}

let increment = counter();

increment(); // 1
increment(); // 2
increment(); // 3
“

chatGPTふうな出力．

chatGPTふうな出力．
実際に出力したらこんな感じになります(YOUTUBE動画参照)．
***※リアルタイムなイベント処理(input)には対応していません．***

“`javascript:moji-v1.0.0.js
let moji = {
‘fn’:function(txt=’#txt’,view=’#view’){
document.querySelector(view).innerText = ”;
(async function viewText(view,txt) {
document.querySelector(view).innerText = ”;
for (const element of txt) {
await pause(50);
document.querySelecto

Dayjsを使って時間表示を簡単にしよう！

# 1. はじめに
自分は10月よりAPPRENTICE SHIP(内定直結型エンジニア学習プログラム)のカリキュラムに２期生として参加しています。

https://apprentice.jp/lp

この記事はオリジナルアプリ開発の備忘録として書いています。
間違いがありましたらご指摘いただけると幸いです

# 2. 今回の内容
今回は、オリジナルアプリを開発する際に使用したDay.jsについて紹介します。
このライブラリを採用するまでは、JavaScriptの標準機能を使って日本時間と世界標準時（UTC）の時間差を計算していましたが、Day.jsを使うことで、その煩わしさから解放されました。
とても効率的に時間周りのことが実装できたので、共有したいと思います。

# 3. まずタイムゾーンとは？
タイムゾーンとは、地球を24の時間帯に分け、それぞれの地域で標準時を定めるシステムのことです。タイムゾーンを使用することで、地域ごとに異なる時間を一貫して管理することが可能になります。

### UTC (協定世界時)
– UTC（Universal Time Coordinated）は

Goでwebアプリケーションを作成してみよう！　~サーバーの立ち上げ~

この記事では4回に分けてwebアプリケーションの作り方を説明していく
第1回
[　webアプリケーションの構成、仕組み](https://qiita.com/Yutosaki/items/0c6f9349b427d4aee08e “第１回”)
第２回
　サーバー立ち上げ(この記事)
第３回
　フロントエンドの実装
第４回
　 バックエンドの実装

実際に作ったアプリケーション

https://github.com/Yutosaki/WiFiRader
# やること
今回のではサーバーの立ち上げ、アプリケーションサーバー(Go)に情報を送る。そして、以下のような画面構成にする。これらについて解説していく。


# 実際に書いていく
まずサーバーの設定と立ち上げ、その後、地図の初期化やバックエンドの情報を送るためのコードを書いていく。

では、

JSで進数変換

お手軽な進数変換ツールが無かったので自作しました。
該当の進数に数値を入力すれば、それ以外の進数を自動計算してくれます。例えば、2進数に数値を入力すれば、自動で8、10、16進数に変換して表示されます。
数値を入力するだけで変換してくれるので、簡単です。
“`html

2進数

8進数

10進数

16進数

TypeScriptでオブジェクトの値をブラケット記法で動的に取得する

## はじめに
業務でTypeScriptを使い始めて少しずつ勉強中なのですが、先日タイトルの通りオブジェクトの値を動的に取得するのに苦戦したので、備忘のためにその手法を残しておきます。

前置きがかなり長いので、やりかただけ確認したい場合は「[対処方法](#対処方法)」からご確認ください。

## 前提 – オブジェクトの値の取得方法の話
TypeScriptの話の前に、そもそものJavaScriptの機能としてオブジェクトの値を取得する方法が2種類あります。
一般的には以下のように`オブジェクト名.プロパティ名`のように「.(ドット)」を使用します。
これはドット記法やドット表記法と呼ばれます。
“`javascript:ドット記法
const obj = {
firstName: “John”,
age: 25,
country: “America”,
};

console.log(obj.firstName); // John
“`

もう一つが`オブジェクト名[プロパティ名]`のように「\[](ブラケット)」を使って値を取得する方法です。ブラケット記法やブラ

ECMAScript 第2部 Conformance【JavaScript】

# はじめに

https://tc39.es/ecma262/multipage/conformance.html#sec-conformance

ECMAScript 第2部 Conformance の概要と補足についてまとめます。

「Conformance」は直訳すると「準拠」です。
「ECMAScript準拠の実装における注意事項」が記載されています。

# ECMAScript準拠の実装における注意事項

– ECMAScriptに記載されている以下のすべてを提供し、サポートする必要がある
– 型
– 値
– オブジェクト
– プロパティ
– 関数
– プログラム構文
– セマンティクス（コードの意味）
—
– 以下の国際標準の最新バージョンに準拠してソーステキスト入力を解釈する必要がある
– Unicode Standard
– ISO / IEC 10646
—
– APIを提供する場合は、最新の ECMA-402 仕様に準拠して実装する必要がある
※ ECMA-402 は、ECMAScript 言語仕様を定義した EC

【初めてのAWS】チームの勤怠管理システムを作ってみた（その３）

# 1. 初めに
勤怠管理システムの全貌としては以下の3つである。3本に分けて残していく。今回はその３、とうとう最終回！
[その１：名前を選択して「出勤」or「退勤」ボタンを押し、記録する](https://qiita.com/waiiioss/items/6c2ca747a55d3dca9224)
[その２：勤怠記録のデータを可視化する](https://qiita.com/waiiioss/items/f35c1729bb3d17cfbc9e)
その３：過去の勤怠を編集できるようにする <-MOUKOKO **本Qiitaの内容** * LambdaでDynamoDBに過去の勤怠を記録 * LambdaでDynamoDBの直近の記録を削除 * 入力のUI試行錯誤 # 2. LambdaでDynamoDBに記録 その１で書いたLambdaは開始時にその時間のTimestampを記録して、終了時にその時のTimestampを記録するものだった。今回のコードは、名前と過去働いた日時を入力し、記録するというものなので、大きく異なる。Lambda関数はそこまで変わらないけど。eventの

ブラウザ上で AlaSQL を利用するための下調べ（簡単なメモ）

ずいぶん前に見かけて、それから気になりつつも手をつけてなかった「[AlaSQL](https://alasql.org/)」に関する記事です。

●AlaSQL/alasql: AlaSQL.js – JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel.
　https://github.com/AlaSQL/alasql

まずは、ブラウザで扱う想定で、その下調べをしてみました。

## AlaSQL について
AlaSQL は、上記のリポジトリの説明にあるとおり、以下の内容のものです。

– ブラウザでも Node.js でも使えるデータベース
– リレーショナルなテーブルにも ネストされた JSON のデータ（NoSQL） にも対応
– データベースの元に

【JavaScript】アニメーション完了後にstyleの一部を変更する方法

以下のように記述するとアニメーション完了後に一部のstyleを更新できます。

“`js
const animation = element.animate(
[
{ height: ‘0px’, width: ‘100px’ },
{ height: ‘200px’, width: ‘100px’ },
],
{
duration: 200,
easing: ‘ease-out’,
fill: ‘forwards’,
}
)
// アニメーションの完了を待つ
animation.finished.then(() => {
animation.commitStyles() // アニメーション完了時のスタイルをstyle属性に反映
animation.cancel() // アニメーションをキャンセル
element.style.height = ‘auto’ // style の height を auto に変更
})

“`
`animation.commitStyles（）`を実行してstyle属性

複数のサーバーでobnizが動いてしまっている時

Node-REDでobnizを使っていると、obnizがこんな感じでconnecting…から動かないってことがたまにあります。

> 

他のサーバーを見てみるとつながっていることが分かりました。

> 

これをどうやって見つけるか。

## obnizのコンソールか

React 19 Betaリリース！新HooksとAPIの機能紹介とサンプルコードで学ぶ使い方

## はじめに

4月の下旬に、React19のBeta版が公開されました！
React 19に関する紹介記事の中で、3つのHooksと1つのAPIが紹介されていたので、codesandboxでコードを作ってみました。

本記事では、それぞれどのように記述できるのかをサンプルコードと共に紹介していきたいと思います。

実際に動かしてみたい場合はサンプルコードの右下に表示されているOpenSandboxを押す事でOpensandBox上で動いている様子を確認したり、コードを変更したりすることができますので、ぜひご活用ください。

## hooks : useTransition (async)
まず一つ目はstartTransitionです。
このHooksはReact 18で新たに使える様になったHooksではあるものの、これまでは非同期で利用することはできないという制約がありましたが、React 19では非同期で利用する事ができる様になりました。

https://codesandbox.io/embed/2wyfl7?view=editor&module=%2Fsrc%2

JavaScriptのコードをobnizノードで使えるように書き換える

Node-REDのobnizノードの使い方は少しクセがあるのでクセを把握しておきましょう。

## obnizノードの使い方概要

– 設定ノードという裏側のノードがいて、ここでピンアサイン（各ピンに何を設定するのか）などの初期化処理を記述すること
– 表側に見えて使えるノードは`obniz repeatノード`と`obniz functionノード`の2種類
– 2種類のノードは使い分けが必要で、それぞれのノードの中にJavaScriptノードを記載する
– センサーなどの数値を常に取得したいインプット系の処理はobniz repeatノードを使う
– LEDやスピーカーなどアクチュエーターやインジケーターを操作したいアウトプット系の場合は`obniz functionノード`を利用

といった流れです。

## 書き換え例

### 例1. スピーカーの利用

例えば以下のようなスピーカーを扱うコードがあった場合

#### 元のスピーカー利用のコード

[公式ドキュメント](https://docs.obniz.com/ja/sdk/parts/Speaker/README

Vue.jsを使ってみた録No.01

初めまして、tktkです。
こうしたブログを書くのは初めてですが、備忘録として書き残していければと思います。

まず、Vue.jsの名前は聞いたことがあり、jsのフレームワーク的なもの？くらいの知識しかなかったので公式のドキュメントを確認していきます。


基本的なフレームワークの考え方がもとある言語のコーディングを楽にしようぜ的なノリだと思っているのでそうゆうものなのでしょう（難しく考えずに学ぼうとしてるので若干言葉がてきとうになると思います。）

・コンポーネントベース
聞きなれない言葉なので調べたところ汎用性抜群再利用部品といったところでしょうか
この辺の理解はアバウトにいき追々理解を深めていくとします。

![image.png](https://qiita-image-store.s3.ap

file_fieldのデザインを変更する

### きっかけ
file_fieldのデザインをデフォルトのものから変更したいと思いましたが、
UIkitでは単数のfile_fieldのclassは用意されているものの、
複数用のfile_fieldは用意されていなかったので、
自分で変更する方法を調べて変更してみました。

初学者のため、誤りがありましたらご指導いただけると幸いです。

### 環境
Rails7.1
UIkit
ActiveStorage
stimulus

前提として
すでにmodelやdb等は作成してあるとして進めさせていただきます。

### 完成系のイメージ
送信ボタンにはUIkitのデザインをあててます。

file選択ボタンの部分をデフォルトから
![スクリーンショット 2024-05-11 14.08.53.

JavaScriptにおけるカリー化と部分適用

## はじめに
カリー化（Currying）は、関数を複数の引数を取る一連の関数に分割するプログラミング手法です。この記事では、カリー化の概念とその一部である部分適用について解説します。

## カリー化と部分適用の基本的な概念
以下のような特性を持ちます。

– カリー化: 複数の引数を取る関数を1つの引数を取る関数の連鎖に変換する
– 部分適用: カリー化された関数の引数の一部だけを指定して新しい関数を作成する

## 部分適用の利点
部分適用を行うことで、以下のような利点があります。

1. **柔軟性**: 部分的な引数指定で新しい関数を作成し、柔軟な組み合わせが可能になる
2. **再利用性**: 同じパターンの処理を部分適用した関数で使い回すことができる
3. **メモリ効率**: 不要な引数を指定せずに新しい関数を生成できるため、メモリ効率が向上する

## 部分適用の実装方法
JavaScriptでは、手動で部分適用を行う方法や、ライブラリを使用する方法などがあります。ここでは手動での部分適応の例をあげます。

### 手動での部分適用
“`javascript
fu