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

ブラウザで上にスクロールした時のリロードを制限する方法

## はじめに
ブラウザの上スクロールでリロードされることを防ぎたいと思ったことはありませんか？特にフォーム入力中やデータ編集中に、意図せずリロードが発生してしまうと、ユーザーの作業が消えてしまいます。この記事では、そのような問題を可能な限り抑える実装方法を紹介します。

:::note warn
必ずスクロールによるリロードを制限できるものではありません。

Androidでリロード可能な場合があることを確認しています。
リロードで消えたら困るものに関しては、リロード時に確認を挟むような処理を追加しましょう。
:::

## 実装のポイント
1. **上方向のスクロールのみを制御**
この実装の特徴は、全てのスクロール動作を制限するのではなく、上方向のスクロールのみを制御する点です。これにより、通常のスクロール操作に影響を与えることなく、意図しないリロードを防ぐことができます。

2. **CSSによる制御**
overscroll-behavior: none; というCSSプロパティを使用することで、ブラウザのデフォルトのオーバースクロール動作を制御します

三項演算子の使い方について（初心者向け）

# はじめに
この記事は三項演算子の使い方について学習した際の備忘録です

修正点および加筆が必要な場合は都度更新します

## 三項演算子とは？
三項演算子は、条件式を使って値を選択するための演算子で、?（疑問符）と :（コロン）を使って表現します。一般的な構文は以下の通りです。
“`js
条件式 ? 真の場合の値 : 偽の場合の値
“`

## 基本的な使い方

例えば、数値が10以上かどうかを判定し、その結果に応じてメッセージを返す例の場合
“`js
let number = 15;
let message = number >= 10 ? “10以上です” : “10未満です”;
console.log(message); // 出力: 10以上です
“`

### ネストされた三項演算子

三項演算子は、入れ子にすることも可能です。ただし、可読性が低くなるため、使いすぎには注意が必要です。
“`js
let score = 85;
let grade = score >= 90 ? “A” : score >= 80 ? “B” : score >= 70 ? “

Three.js X,Y,Z軸や、グリッド平面を表示する。

この記事を参考に、
x,y,z軸の表示や、グリッド平面を表示してみる。

Three.js [axisHelper、gridHelper ]ヘルパーを使い、グリッド平面を表示する。

まず、前記事の、カメラアングルを変える、のコードを元に、

“`html:html






```

## 失敗：スクリプトをインジェクトする

```text
./
├──manifest.json
└──content-script.js
```

```json:manifest.json
{
"manifest_version": 3,
"content_scripts": [
{
"js": [
"content-script.js"
],
"matches":

デザインの味方！Electronで画面の色を瞬時にキャッチするツールの作り方

# イントロダクション
この記事では、Electronを使って画面上のカーソル位置にある色をリアルタイムで取得するアプリの作成方法を紹介します。

https://github.com/kazuma-naka/ironuki-gui

# 使用した Library
- [robotjs](https://www.npmjs.com/package/robotjs)
- [screenshot-desktop](https://www.npmjs.com/package/screenshot-desktop)
- [pngjs](https://www.npmjs.com/package/pngjs)

# 作成した理由
**デザイン作業中に、スクリーン上の色を簡単に取得できたら便利だと思ったことはありませんか？**
個人でアプリを開発している際に、色を16進数で取得したい場合があります。これまではスクリーンショットを撮り、それを `Affinity Designer` に読み込み、色の16進数を取得していました。しかし、毎回スクリーンショットを撮るのは手間で、リアルタイムに色を取得

AIの力を借りてスライドを簡単に生成しようとしてみた

今回はイベントに便乗した記事を書きたくて、MarkdownAIを使ってみました。
特にこれといってアイデアもなかったので、なんとなく思いついたスライドを自動生成するページを作成してみました。

# 完成形
完成形といいつつ、スライドでの表示ができていないのでまだ未完成です。
ただ、同じようにコードを入れていただくと画像のような画面になります。


# modelの用意
それでは早速AIのセットアップをしていきます。
画面左側のロボットのア