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

【fetch関数の使い方】RailsAPIを利用するためのフロントエンド実装

## はじめに
Rails APIなどの外部APIからデータを取得したり、フォームデータをサーバーに送信するために使用されるJavaScriptのfetch関数を学習しました。

しばらくJavaScriptから離れていたため、この機会にJavaScriptの基本文法を再学習し、さらに新しくfetch関数の使い方を習得しました。

この記事では、fetch関数の活用方法やその重要性について詳しく解説していきます。

## fetch関数とは何か

fetch関数は、JavaScriptでWeb APIやリソースにネットワークリクエストを送るための標準的な方法です。

リモートのサーバーからデータを取得したり、データをサーバーに送信したりできます。

### fetch関数の基本的な使い方
“`javascript
fetch(‘https://example.com/data’)
.then(response => response.json())
.then(data => console.log(data));
“`

このコードは、https://example.c

修正：haskellコードの理解（関数合成・複数の`.`）

# はじめに
[辺境のHaskell道場で、賢者におもっくそ鍛えられた件](https://qiita.com/kohki_takatama/items/ef77d30e2491fd5c1c65)で
“`hs
checkForFactor :: Int -> Int -> Bool
checkForFactor = (.) (== 0) . mod
“`
これをなんとか理解しました。
でも、微妙に納得いってない部分があったんですよね。
その答えがわかったので追記する形です。
# 問題
“`hs
checkForFactor :: Int -> Int -> Bool
checkForFactor x y = (.) (== 0) (mod x) y
“`
これが原型です。
1. `mod x`でカリー化した１引数関数（定数xを割る、引数yの関数）を返す。
2. 1の関数を、`(== 0)`と関数合成。
3. これで、`y`を受け取る→`mod x`により`x % y`が計算され、`(== 0)`に渡される→真偽値が返る、という関数が作れました！
問題は、ここからの変形です。
前

モダンJavaScript

## はじめに
フロント開発で、知らない記述のコードを見かけることが多くなりました。
サーバサイド開発が主担当なのですが、遅れをとらないように勉強を始めました。
参考になった資料や記事などを元にして、モダンJavaScriptについて、まとめていきます。

## モダンJavaScript
### 変数宣言
**var** による変数宣言では再宣言できる。複数個所で定義されていると、プログラムの実行順によっては、どこで定義された変数なのかが、判断が難しくなる。
ES2015で追加された **let** による変数宣言を使えば同じ名前の変数の再宣言を避けられる。定数を宣言する **const** もES2015で利用可能となった。

:::note warn
constで定義した変数がオブジェクトや配列、関数といったプリミティブ型以外の場合は、内部の値を変更や追加できてしまうので注意が必要。
:::

### テンプレート文字列
バッククォートで囲んだ文字列に **${変数}** を入れ込む記法。プラス記号で文字列を連結しないので可読性が向上する。

“`javascript
cons

WebBluetooth APIを用いたBLE通信で21文字以上のデータが送れなかったことに関するメモ

# 結論
– 2024/01/08現在において、writeValueメソッドならびにwriteValueWithoutResponseメソッドを用いて20byte以上のデータを送信できない。
– [chromiumへのバグ報告](https://bugs.chromium.org/p/chromium/issues/detail?id=1073311&fbclid=IwAR1APy0bcv5_ZtGPUnHtw6IhKZ49McJaPn6AZvA79XEechQbDkLagS45Q9c)を確認する限りだと修正はされていない。

# 気付いたきっかけなど

事象に気づいた際の情報をまとめます。

## 概要

– Chromeフロントエンドからmicro:bitに50文字程度の文字列を連続送信するコードを書こうとしたときに事象に気づいた
– AndroidアプリのBLEScannerからmicro:bitのCharaに文字列データを送った際には正常に受信できていた。BLEScannerは下記からインストール可能

https://play.google.com/store/apps/de

【JavaScript】ES2024の新機能まとめ

[ES2024](https://qiita.com/rana_kualu/items/16539958b0c9d3b3dba8) / [ES2023](https://qiita.com/rana_kualu/items/84f66fe970f7feccf367) / [ES2022](https://qiita.com/rana_kualu/items/8bafecd760ae69cfac41) / [ES2021](https://qiita.com/rana_kualu/items/ae3297dd2974fcf047c4)

JavaScriptの仕様は、[TC39](https://tc39.es/process-document/)というところで決められています。
ブラウザベンダや関係者が[定期的に会合を行い](https://github.com/tc39/notes/tree/main/meetings)、様々な新機能について話し合って[どのようにするかを決めています](https://github.com/tc39/agendas)。

ちなみに[2023年9月

[TypeScript]never型について

# never型とは
「値をもたない」を意味する特殊な型。
never型は、通常、関数が正常に終了しないことを示す型です。
以下がサンプルコードです。
“`ts
type Exclude = T extends U ? never : T;

type Foo = Exclude // string | number
“`
このコードは、継承した U 型と一致する型を T 型の中から除外する型定義です。
ここでは、「type foo」の中で宣言された「Exclude」の第二引数に、「boolean」型が渡されているため、Foo 型は 「string | number」となります。

# never型が多く使われる場面
never 型は主に、以下のように使われることが多い。

### エラーのスロー（throwError関数）
“`ts
function throwError(): never {
throw new Error();
}
“`
このthrowError関数は、常にエラーをスロ

React+TypeScriptでOpenAPIを使う

# React+TypeScriptでOpenAPIを使ってRESTで通信

お仕事でAndroid＋kotlinサーバサイドでOpenAPIを使ってREST通信のアプリを開発していたのですが、ひょんなことからWebアプリも開発することになりました。
ここ10数年くらいはサーバサイドばかりでフロントエンドやってなかったのですが、折角ならReact＋TypeScrptで作ってみようと思い立ちました。

サーバサイドは今までと同じように、kotlin + sprintBoot3 + OpenAPIです。

https://qiita.com/cozyk100/items/c2afb1885f0dbabb0be0

OpenAPIのインタフェース(json、yaml)の作り方は変わりません。上記の記事の②の方法、サーバサイドの実装から作ります。

この時に1点注意しなければならないのは、サーバサイド側のControllerクラスのアノテーションの付け方で、
“`
@RestController
class MyController(private val service: MyServic

C++アプリケーションをWebアプリケーションに変換できますか？

__2023年3月14日更新：Cheerp 3.0をリリースし、Apache 2.0ライセンスに変更しました！ [リリースノートはこちら](https://leaningtech.com/cheerp-3-0-the-most-advanced-c-compiler-for-the-web-now-permissively-licensed/)。__

C/C++で書かれた高性能なアプリケーションやライブラリをお持ちで、それをWebアプリにしてより多くの人に使ってもらいたいとお考えではありませんか？

最近まで、これは非常に難しく、JavaScriptでソフトウェアを完全に書き直す必要があったかもしれません。

しかし、Cheerpを使えば、ライブラリや完全なアプリケーションを含む既存のコードベースを自

クリップボード経由で全角半角を変換するスクリプトを HTA でささっと作る（IE のバージョン違いに悩む）

# 0. はじめに

筆者は半角カタカナ滅ぶべし・・・と思っている。他にも英数字の半角・全角を混合したファイル名や文章を平気で量産している人種も美意識が欠けており，前世紀中に滅ぶべきだった・・・

かつてはそんな全角・半角混合文章を手作業でチマチマ直していたが，すぐに自動変換できるプログラム，EXCEL ならば VBA マクロやアドインを作ったりもした。しかし，アプリ毎にマクロやアドインを作るのも骨が折れるものだ。

テキストデータであれば，いったん Windows のクリップボードに預けることができるので，クリップボードを介した変換プログラムを作成すれば良いことに気づいた。

そこでクリップボードをサポートし，お手軽にユーザーインターフェースを作れる HTA（HTML Application）で作成することにする。

# 1. IE のバージョン問題

HTML アプリケーションでは IE のバージョン（厳密にはモードと呼ぶべきか）を選択することができる。具体的には <head> タグ内に下記の一文を追加することで，IE バージョンを指定することができる。※下記は IE6

【JavaScript】ローカルストレージへ値を保存・取得・削除する方法

## 保存

“`js
localStorage.setItem(‘key’, ‘value’)
“`

## 取得

“`js
localStorage.getItem(‘key’)
“`

## 削除

“`js
localStorage.removeItem(‘key’)
“`

全て削除

“`js
localStorage.clear()
“`

## keyが存在するか

“`js
localStorage.hasOwnProperty(“key”)
“`

TinyMCEを青空文庫エディタにする

# 青空文庫エディタ
Meryのマクロ機能を利用して青空文庫エディターというのがある、私も使っていたが、初心者向けではないのでもう少し直感的に操作するものができないかと思っていた。ウェブ用のHTMLエディタを使って、HTMLから青空文庫に変換する機能をつけたものつくった。それを青空文庫エディタにした。

https://kyukyunyorituryo.github.io/AozoraEditor/

# 仕組み
TinyMCEでHTMLを作成して、turndownを改造したhtml2aozoraで青空文庫に変換している。AozoraJavaScriptParserで青空文庫からHTMLに変換しなおしている。それぞれのHTMLタグやクラスが違うので改造して対応している。

TinyMCE　https://www.tiny.cloud/

turndown　https://github.com/mixmark-io/turndown

html2aozora　https://github.com/kyukyunyorituryo/html2aozora

AozoraJavaScri

2023年の振り返り(KPT)と今年の目標

@Esperna です。明けましておめでとうございます。
遅くなりましたが昨年の振り返りと今年の目標を。
昨年は様々なライフイベントや天候等に翻弄され続けた一年でした。
自分でコントロール不能なものが多過ぎた割には総じてよくやったと言える一年でした。
昨年の振り返り(KPT)と今年の目標を書きます。

# Keep

* ブログは[個人](https://qiita.com/Esperna)で13件、社内で３件
* 英語の記事は見送ったがそれなりに量のアウトプットを出せたので良し
* 読んだ書籍の数7冊
* [OAuth徹底入門 セキュアな認可システムを適用するための原則と実践](https://www.amazon.co.jp/gp/product/B07L5M7DXS/ref=ppx_yo_dt_b_d_asin_title_351_o02?ie=UTF8&psc=1)
* 実際に動かしたコードを[GitHub](https://github.com/Esperna/oauth-in-action-code)に上げながら読んでます
*

アニメのデータが使いたくて外部APIを使う話

# はじめに
自分は10月よりAPPRENTICE SHIP(内定直結型エンジニア学習プログラム)のカリキュラムに２期生として参加しています。
その一環としてチーム開発を行っており、技術情報をまとめることで学習に役立てるよう、記事を作成しております。
# 概要
今回はチーム開発において外部のAPIサービスを利用する必要が出てきたので、情報をまとめております。
具体的には検索候補(オートコンプリート機能)をフロントエンドで実装する手順をまとめました。
## 今回使用させて頂くAPIサービス
### [ANNICT](https://annict.com/)
試聴中のアニメを記録してくれるwebアプリケーションサービスになります。
(※サーバーの関係か画像が読み込まれなかった)

### [Annic

How to Trim Whitespace from JavaScript String

This quick javascript tutorial helps to remove extra whitespaces including tabs, and line breaks from your data. We will explore various techniques and best practices for stripping whitespace in JavaScript.

How to Trim Whitespace from JavaScript String

スプレッド演算子を用いてオブジェクトの更新操作を行う方法

“`javascript

const updateLikability = { …someoneSpecial,
likability: {…someoneSpecial.likability, funnyRating:increaseLikabilityByFunnyJoke }

“`
気になるあの子の好感度を更新してゆきたいと思います。

まず、気になるあの子(someoneSpecial)の現在の状態を
スプレッド演算子を用いてコピーします。

このコピーは表面的なもので、内部のlikabilityオブジェクトは元のsomeoneSpecialからの参照として保持されています。

次に好感度オブジェクト(someoneSpecial.likability)もコピーしておいて、その中の面白さプロパティを新しい値(increaseLikabilityByFunnyJoke)で更新しています。

以上で「ノリの良い軽口であの子を笑わせて自分の好感度を上げる」オブジェクトを作ることができました。

現実世

クラス属性を取得する

“`js
Object.prototype.toString.call([]) // [object Array]
Object.prototype.toString.call(/./) // [object RegExp]
Object.prototype.toString.call(()=>{}) // [object Function]
“`
JavaScriptオブジェクトに対してクラス属性を取得するには、上記のObject.prototype.toString.call()を使用します。ですが、この方法以外では取得できない型情報が含まれています。typeof演算子ではオブジェクトの型を区別しないので、下記に作成したclassof()関数の方が便利です。
“`js
function classof(o) {
return Object.prototype.toString.call(o).slice(8, -1);
}

classof(null) // Null
classof(undefined) // Undefined
classof(

スマホでペット用監視カメラを作ってみた

# はじめに
スマートフォンを使った監視カメラシステムを作ってみました
作ろうと思い立ったきっかけですが、昨年ワンちゃんを一頭飼い始めて
最近もう一頭増えたのと、その子が保護犬ということでなかなか目が離せないということもあり、スマホを使って外出先から自宅のワンちゃんの様子を確認出来る仕組みを作ってみようと思ったのがきっかけです

| 1頭目 | 2頭目 |
|:-:|:-:|
| |

p5.js で randomGaussian() を使って偏りのある乱数を得る

## はじめに
今回の内容は、p5.js の randomGaussian() に関する話です。

●reference | randomGaussian()
　https://p5js.org/reference/#/p5/randomGaussian

### randomGaussian() を使った描画を試してみた
今回扱う randomGaussian() を、とりあえず描画に使ってみました。
いくつか試してみたのですが、その中で以下の内容を例に説明などを書いていきます。

#p5js の randomGaussian() を使った描画を試してみる

（平均と標準偏差はデフォルト値ではなく、特定の値を指定したものにして、それで x・y座標を作成） pic.twitter.com/c1GFMOLLaA

— you (@youtoy) January 5, 2024

それでは、randomGaussian()自体の話、それを使った描画を試した話や、関連情報のメモ的な内容を書いていきます。

## p5.js の randomGaussian() について
p5.js の randomGaussian() は、いわゆる「正規分布」「ガウス分布」にしたがって乱数を得る関数です。以下が、[randomGaussian() の公式リファレンスのページ](https:/

アクセシビリティを意識した実装の意義について確認する

### この記事で分かること
– 身体に関わる障害を持つ方の雇用率
– それをデスクワークで改善させることにおいてはアクセシビリティは有効

# 1. 背景
アクセシビティにも色々定義がありますが、身体に関わる障害を持つ方のための実装をする意義を確認したいと思った為です。

# 2. 各身体に関わる障害と有効なアクセシビリティ

https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility

| 身体に関わる障害のカテゴリ | 有効なアクセシビリティ |
| —- | —- |
| 視覚 | スクリーンリーダーや拡大/ズームを使用してテキストにアクセス |
| 運動機能 | キーボード（または他のマウス以外の機能）を使用してウェブサイトの機能をアクティブ化 |
|聴覚|音声や動画のコンテンツのキャプション/字幕またはその他の代替テキストに依存

# 3. 令和4年度 国内雇用 身体に関わる障害を持つ方の人数とその割合
令和５年６月１日時点のデータ

【2023年1月】エンジニアなら読むべき技術書TOP5

# [世界一流エンジニアの思考法](https://amzn.to/3TPtEuz)
[](https://amzn.to/3TPtEuz)

**noteでも大人気！　米マイクロソフトのエンジニアが放つ最前線の仕事術**

頭が先、手は後。一流の仕事のカギは順序にある。
――楠木建（経営学者）

知的生産へのリスペクトがイノベーションの源泉だ。
――落合陽一（メディアアーティスト）

「怠惰であれ！」「早く失敗せよ」――
米マイクロソフトの現役ソフトウェアエンジニアの著者が、超巨大クラウドの開発の最前線で学んだ思考法とは？
“三流プログラマ”でもできた〈生産性爆上がり〉の技術！

・試行錯誤は「悪」。“基礎の理解”に時間をかける
・より少ない時間で価値を最大化する考え方とは？
・「準備」と「持ち帰り」をやめて、その場で解決する
・マルチタスクは生産性が最低なのでやらない
・“脳の負荷を減らす”コミュニケーションの極意
・コントリビュート文化で「