ReactとMaterial UIを使って入力検知を実装する

この記事では、`React`と`Material UI`を用いて作った入力フォームにバリデーションチェックを実装する。

### Reactをインストール

下記コマンドを入力して実行し、適切なプロジェクト名を入力し、ReactとJavaScriptを選択します。
“`
npm create vite
“`
作成されたフォルダに入り、下記コマンドで必要なパッケージをインストールします。node_moduleフォルダが作成されます。

“`
npm install
“`

### バリデーションを実装する

下記コマンドを実行し、`http://localhost:5173/`にアクセスするとデフォルトの画面が立ち上がります。
“`
npm run dev
“`
srcフォルダ内のApp.jsxの中身を下記のように不要なものを一旦削除します。
“`javascript:App.jsx
function App() {
return (
<>

)
}

export default App
“`

App.cssファイルとind

住所から郵便番号を調べるChrome拡張機能を作ってみた

## はじめに

最近引っ越しを考えており、気になるのが引っ越し先の回線速度です。
回線事業者のサイトで契約できる回線を調べることができるのですが、このとき郵便番号の入力が必要になります。
しかし、賃貸情報サイトには住所だけしか書かれておらず、郵便番号が書かれていません。
そこで拡張機能の勉強も兼ねて、住所から郵便番号を調べるChrome拡張機能を作ってみました。

作成した拡張機能はこちらで公開しています。

https://github.com/s-matsumi/postal-code-lookup

## 使い方

1. Chrome上で郵便番号を調べたい住所を選択します
2. 右クリックして「郵便番号を逆引き」を選択します
3. 選択箇所の下部に吹き出しで郵便番号の候補が表示されます
4. 右上のxボタンを押すと吹き出しが閉じま

【JavaScript】fetchメソッド

## 1. fetchメソッドとは
下記ドキュメントからの引用（https://developer.mozilla.org/ja/docs/Web/API/Window/fetch）
“`
fetch() は Window インターフェイスのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら履行されるプロミスを返します。
“`
すごく簡単にいうと***非同期通信でリクエストを発行し、そのレスポンスを取得できる関数***らしい:smiley:

fetchメソッドを理解するためには、まず非同期通信について理解する必要がありそうなので、１つずつ丁寧に理解していければと思います、、

## 2.　非同期通信ってなに？
**＜同期通信＞**
まず前提に同期通信についてですが、同期通信とは「１つの作業が終わるまで次の作業に進めない」という通信の仕組みです。

例えをだすと、ウェブサイトにて「最新ニュースを見る」ボタンを押したとします。このとき裏ではサーバーに「最新ニュースをください」というリクエストが送られます。そして、そのリクエストに対する

【JS】初心者ですが、苦行系ワイヤーアクションゲームを作りました！🎮誰かクリアしてください！ お願いします！🙏何でもしますから！😣&解説

ん？今何でもするって言ったよね？

## 結論

https://mogamoga1024.github.io/uekibati-kun-wire-action-game/?inmu=false

## 前書き

* スマホじゃ遊べない。悪いね。
* （それなりのボリュームのゲーム作りの）初心者です。
* 音がでます。
* （淫夢要素は）ないです。

野獣先輩LOVEな方はURLのパラメータをいじってください。

## 本文

ワイヤーアクションゲームには直感的に操作できる爽快型と操作とタイミングが難しい苦行型があると思っており、**後者のゲームは絶滅危惧種と化しています（偏見）**。

しかし最近は壺おじやJump

オプショナルチェーン(?.)について

# オプショナルチェーンとは
オプショナルチェーンとは、JavaScriptのES6以降で使用できる記述方法です。どんなものかといいますと、
“`javascript
let family = {};
alert(family.mother.name);
“`
通常こちらを実行すると、
“`
Uncaught TypeError: Cannot read properties of undefined (reading ‘name’)
“`
というエラーが発生すると思います。

それを**オプショナルチェーン**を利用することで、安全にプログラムが実行できるようです。
“`javascript
let family = {};
alert(family?.mother?.name);
“`
こちらを実行すると、プログラム自体は実行され`undefined`というアラートが表示されるかと思います。

# そもそもなぜこんな書き方をする必要があるの
先日私の記事にコメントをくださった方にこちらの書き方を教えていただきました。初めてこの書き方をみ

Fedify 1.0.0のリリース

[ActivityPub]フレームワークの[Fedify]がついに最初の正式バージョン1.0.0をリリースしました！

[ActivityPub]: https://www.w3.org/TR/activitypub/
[Fedify]: https://fedify.dev/

## Fedifyとは？

Fedifyは[ActivityPub]プロトコルをベースにした連合型（federated）サーバーアプリケーションを簡単に作成できるようにするTypeScriptライブラリです。ActivityPubはソーシャルネットワーキングサービスが相互に通信できるようにするオープンな標準プロトコルで、これを通じて様々なサービス間でユーザーが互いにコミュニケーションを取れる分散型ソーシャルネットワークである[フェディバース]（fediverse）を構成します。

Fedifyを使用すると、開発者はActivityPubプロトコルの複雑な詳細を直接実装する必要なく、高レベルのAPIを通じて連合型サーバーアプリを簡単に作成できます。FedifyはActivityPubオブジェクトに対する型安全な

【Jest】Jest概要学習備忘録

# はじめに
Jestについて学習したことを整理して備忘録としてまとめました。

# 学習内容
## Jestの特徴
– 設定がほとんど不要で導入が簡単
– 依存関係のモック化が簡単
– スナップショットテストが簡単
– 並列テストで高速なテスト
– カバレッジレポート
– 柔軟なマッチャー

## インストールと設定
`$ npm install –save-dev jest`
`–save-dev`は、開発環境用のインストールであることを表す。
デフォルトの`package.json`の”scripts”内の”test”の値を”jest”にする。

## マッチャー
jestにおける一般的なマッチャーの例（`toBe()`は厳密等価）
“`js
test(‘adds 1 + 2 to equal 3’, () => {
expect(sum(1, 2)).toBe(3);
});
“`
なお、`toBe`の前に`.not`をはさむと、逆をテストできる。
その他の例は次のとおり。
– `toBeNull` は null のみ一致
– `toBeUndefined` は

カーソルみたいなものって難しいよね

# 最初に試したこと
最初は`display:flex;`でanimationしてるカーソルの``を横並びにしていた。
するとあら不思議。
wrapしたタイミングでどんどん``が縦に伸びていく。
最初のコードはこんな感じ。
“`html

“`
cssはこんな感じ。
“`css
.flex{
display:flex;
}
.cursor{
opacity:1;
background-color:#000;
animation:backchange 0.5s infinite;
}
@keyframes backchange{
0%{
background-color:#000;
}
50%{
background-color:#fff;
}
100%{
backgroun

康煕部首を検索するブックマークレット

[康煕部首とは](https://ja.wikipedia.org/wiki/%E5%BA%B7%E7%85%95%E9%83%A8%E9%A6%96)
webサイト制作時、支給原稿などによく混ざっているので最終webブラウザで確認時にも検索できるようブックマークレットを作成しました。
\u2F00-\u2FDFがハイライト表示されるようになります。


~~~javascript
javascript:(function(){var regex=/[\u2F00-\u2FDF]/g;var text=document.body.innerHTML;var kanjis=text.match(regex);var kanjisSet=new Set(kanjis);var kanjisArray=Arr

Web Speech APIでかんたん音声認識と文字起こし。Google API なので精度抜群。

### かんたん音声認識と文字起こし。Google API なので精度抜群。


“`html

音声からテキストへの文字起こし

文字起こしを開始

ここに文字起こしが表示されます…

<

辞書データで英単語の意味を表示し、Notionに保存するChrome拡張機能を作ってみた

## TL;DR
辞書データ（.txt形式）を取り込んで、右クリックからポップアップで英単語の意味を表示します。保存したい意味をそのままNotionのデータベースに保存できる仕組みです

ただし、動作が不安定で、表示されない意味があったり、表示が遅かったりします。まだまだ未完成ですが、マーク・ザッカーバーグ氏の言葉を盾にして公開しています

—

## Chrome拡張機能の概要
Chrome拡張機能の設定画面に、Notion APIキーとデータベースIDを入力します

使用する辞書データは英辞郎を使用しています


![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2591409/b9c3638c-1f56-e212-d12b-24f247ccd8b

カスタムHTMLヘルパーで連動するドロップダウンを作る

# はじめに
連動するドロップダウン、皆さんは作ったことありますか？
↓こんな感じで「地域」と「国」のように親子関係を持ち、親ドロップダウンを選択するとその選択値に応じて子ドロップダウンの選択肢が変化する、というものです。


このような機能は比較的需要が高い割には定型的な実装手法が見当たらず、プロジェクト毎にJavaScript等を駆使して作成しているのが実情かなと思います。

今回はASP.NETを使ったWebシステムの開発において、連動するドロップダウンを簡単にレンダリングするカスタムHTMLヘルパーを作成してみたのでご紹介します。

# 環境とデータ構成

動作確認した環境は以下です。
– .NET 6.0
– HtmlAgilityPack 1.11.66（https://www.nuget

spreadsheetのシートが増えたとき見づらくない？GASを使ってサイドバーにシート一覧を表示

# はじめに
最近、spreadsheetで作業していた時にシートが多くなったときに探しずらいし見づらいなと思いました。
私の中では結構ストレスだったのでGASを使いサイドバーにシート一覧を表示させるようにしました。

# 完成イメージ
inputに入力すれば検索ができて、リストをクリックするとシートに移動します。

# コード
“`html:index.html

大学サークルのホームページを作ってみた！(その３-コードについて②)

## このページについて
この記事は大学サークルのホームページを作ってみた！の第3弾です．
第1弾ではホームページの概要，第2弾ではindex.htmlのコードについて解説しています！
第3弾では残りのHTMLファイルの中身について説明しようと思います．ぜひ第1弾，第2弾もご覧ください！

https://qiita.com/hyuga20011212/items/9f9a2fe70f75df9dcfcc

https://qiita.com/hyuga20011212/items/7c62392717fb1ee31550

## 作成したホームページ

https://fmmediasaga.chillout.jp/

https://github.com/KunitakeHyuga/fmmediasaga

## ファイル
main/
├ index.html/
├ otoiawase.html/
├ otoiawase2.html/
├ style.css/
└ (その他画像ファイル)/

## otoiawase.html
ファイル名がお問い合わせになっていますが，中身は地図・

【小ネタ】カレンダーの月を自作の進む・戻るボタンで制御したい（ft. Nextjs）

# 1. 概要
ちょっとした小ネタなので短めに記事をまとめます。

この記事では、カレンダーの月を矢印のボタンによって制御できるようにするコードを紹介します。
htmlのinputタグにtype=”date”属性を与えたカレンダーは、日付を変更するためにいちいちカレンダーを開かなければ月を変更するボタンが現れません。
日付に関心を持たず、ユーザーが設定する月の情報だけに関心がある場合、ユーザー目線でも月を変更するために二度手間になるのは好ましくないでしょう。
これに対し、もし自作の戻る・進むボタンをカレンダーの隣に配置できれば、カレンダーを開くことなく月を変えられるので手間が一つ減ります。
ちょっとした工夫ですが、今回実装できたので忘備録も兼ねて共有しようと思います。

# 2. ボタンによる制御
具体的なコードは以下の通りです。
なお、calendarDateのフォーマットはハイフン繋がりになっています。これはinputタグにdateを値として渡すときにその形式でないと受け付けてくれないためです。

“`typescript
“use client”;

import { Box,

DOMをそのまま画像化する　〜html2canvas と dom-to-image の比較と他の方法〜

HTMLのDOMをそのまま画像化したいと思ったことはありませんか？

ネット上で色々な情報がありますが、いわゆる「そのままの状態でスクショしたい」に答えるのは意外と難しいです。

# 主な選択肢と特徴
– html2canvas
– ユーザーにブラウザ上でダウンロードしてもらいたい場合におすすめです。ios, safariでも使えます
– dom-to-image
– ユーザーが特定のブラウザのみでダウンロードできればいい時におすすめです。safariでは正常に動かないことがあります
– スクレイピングによる方法
– ユーザーがダウンロードしなくても良く自分で特定のサイトからダウンロードする場合におすすめです
– ブラウザの開発者ツール
– 要素単位でのダウンロードが実装なしでできます
– ブラウザの拡張機能
– 拡張機能によりますが、ページ全体を綺麗にダウンロードするのには向いています

# 何にどの選択肢を使ったか
https://highsto.net/original-card/

オリジナルのカードを作れるシステムで、ユーザーが入力し

【JavaScript / TypeScript】mapの結果がundefinedになる原因

下記のような配列を作り、数値が一桁の場合は左にスペースを2つ入れて文字列として出力する処理をしたかったのですが、`undefined`になってしまいました。

“`js
let array = [1, 4, 9, 16];
“`

“`js:NG
console.log(array.map((x) => {
let squaredString = String(x);

if (squaredString.length == 1) {
squaredString = ” ” + squaredString;
}
}));

// => (4) [undefined, undefined, undefined, undefined]
“`

原因は条件分岐で評価されなかった値があったためでした。
mapは各要素に対して操作をして新しい配列を作るため、評価されない要素があるとダメということですね。
下記のようにして解決できました。

“`js:OK
console.log(array.map((x) => {
let squaredString =

【備忘録】Udemy講座まとめ JavaScript vol.1

# 算術演算子

“`JavaScript:JavaScript
result = result + 5;
result += 5;
“`
上の2つは同じ意味

# クウォートの中の改行
“`JavaScript:JavaScript
string = ‘Hello\nWorld’
string = `Hello
World`;
“`
バッククウォートでは、そのまま改行ができる

# 文字列と型の変換
“`JavaScript:JavaScript
const useInput = ’10’;
let calcResult;
calcResult = Number(useInput) + 10;
“`
useInputは、文字列のままなので、Number()を使って数字に型を変換する

Node.js ハンズオン 1 〜 3章まとめ

随分前に読んだ本ですが、再入門しようと思って読み直しています。
その内容を投稿しようと思っています。
自分の理解が浅いところだけまとめていますので、網羅的ではないですが備忘録として記事にしました！

# 第1章 イントロダクション
## クラス継承と `prototype` について
JavaScriptには、クラス継承を実現する仕組みとして `prototype` があります。各クラスには class.prototype.method という形でメソッドを追加することができ、オブジェクトがそのクラスのインスタンスかどうかを instanceof 演算子で検証できます。

また、`prototype` を使用することで、既存のクラスにメソッドやプロパティを動的に追加することが可能です。これは、後から機能を拡張したり、柔軟にクラスの振る舞いを変えたい場合に非常に有用です。

– `prototype` チェーン
prototype チェーンを利用すると、あるオブジェクトが継承している元のクラスの prototype に遡ることができます。例えば、以下のように prototype チェーン

10月なので言語のサ終を確認しましょう

そろそろ10月．
iPhoneが出るような季節には，言語のバージョンも確認するのをルーティンにしたいですね…．
サ終している環境でリリースや構築して面倒なことにならないために…．

よく使う3種の言語について個人的にまとめておきます．

## Python

2024年10月のイベント

* 3.8 系が end-of-life(サポート終了)
* 3.13 系が prerelease

3.12 は9月末までは bugfix だったので，3.11 あたりへの乗り換えが妥当かなぁ…．

https://devguide.python.org/versions/

|version|status|firstRelease|endOfLife|
|:–|:–|:–|:–|
|3.13|prerelease|**2024/10/01**|2029/10|
|3.12|bugfix|2023/10/02|2028/10|
|3.11|security|2022/10/24|2027/10|
|3.10|security|2021/10/04|2026/10|
|3.9|security