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

JavaScriptでダイクストラ法

## 前置き

AtCoderでダイクストラ法の典型問題が出されたのを機に
jsでダイクストラ法を学習したので記事にする

[D – Super Takahashi Bros. ](https://atcoder.jp/contests/abc340/tasks/abc340_d)
[5分で解説動画](https://www.youtube.com/watch?v=jMu_1zzJESA&t=112s)

## 目次
・[前提知識](#前提知識)
・[ダイクストラ法について](#ダイクストラ法について)
・[ループ法](#ループ法)
・[優先度付きキュー](#優先度付きキュー)
・[解説動画を参考に関数化したもの　完成形](#解説動画を参考に関数化したもの完成形)
・[あとがき](#あとがき)

# 前提知識
・幅優先探索
・優先度付きキュー(Priority Queue)

# ダイクストラ法について
最短経路問題を解くためのアルゴリズム

始点を決めたら
次の移動先候補の中で最もコストの低い点を決定
その点までのコストを確定させる
その点の次の移動先候補を加えて最もコストの低い点を

【JavaScript】特定日時までのカウントダウンタイマーの作り方

## はじめに
みなさんは、特定日時までのカウントダウンタイマーを作ったことがありますか？

イベントの特設ページなどでは、よく開催日までのカウントダウンタイマーをみます。
この記事では、そんなカウントダウンタイマーを作ったので紹介しようと思います。

## 完成系
ゴールの日時を入力すると、ゴールの日時までカウントダウンが始まります。
ゴールに日時が過ぎると `残り0日0時間0分0秒` となります。

この記事では、この特定日時までのカウントダウンタイマーの作り方を紹介します。

【JavaScript】コールバック関数とは

# コールバック関数とは
JavaScriptのコールバック関数は、他の関数の引数として渡され、ある特定のイベントや非同期操作が完了した後に実行される関数です。コールバック関数は、非同期性やイベント駆動のプログラミングで広く使用されます。主な目的は、非同期処理が完了した後に行いたい処理を指定することです。

コールバック関数は、通常、以下のようなシナリオで使用されます。

1\. **非同期処理の完了後の処理** : ファイルの読み込み、HTTPリクエストの送信、データベースクエリの実行などの非同期操作が完了した後に、特定の処理を実行するためにコールバック関数が使用されます。

2\. **イベントハンドリング** : ユーザーのアクションに対応するためにイベントリスナーとしてコールバック関数を登録することがあります。たとえば、ボタンのクリックやマウスの移動などのイベントに対する処理を指定します。

3\. **エラーハンドリング** : 非同期処理中にエラーが発生した場合に、エラーを処理するためのコールバック関数を指定することがあります。

以下は、非同期処理の例として、コールバック

【jQuery】OR演算子とは

# OR演算子とは
OR演算子 `||` は、複数の条件式を組み合わせるために使用されます。この演算子は、左側の条件が真であれば、それ以上評価せずに真を返します。左側の条件が偽の場合は、右側の条件を評価し、その結果を返します。

# 使用方法
jQueryと組み合わせてOR演算子を使用する例を示します。
“`js
if (jQuery(‘input[type=”text”]’).val() === ” || jQuery(‘input[type=”password”]’).val() === ”) {
alert(‘ユーザー名またはパスワードが入力されていません’);
}
“`
この例では、`input[type=”text”]`と`input[type=”password”]`のいずれかが空である場合にアラートが表示されます。OR演算子 `||` を使用して、複数の条件を組み合わせています。左側の条件が偽（つまり、入力フィールドが空でない）の場合、右側の条件が評価されることはありません。

【JavaScript】asyncとは

# asyncとは
`async`キーワードは、非同期関数を定義するための修飾子です。非同期関数は、非同期的に処理を実行し、処理が完了するまでプログラムの他の部分の実行をブロックしない特殊な関数です。

`async`キーワードを使用すると、関数の宣言時にその関数が非同期であることを明示できます。非同期関数は、`await`キーワードを使って非同期的に処理を待機することができます。

# 使用方法
以下は、`async`キーワードを使用した非同期関数の例です。
“`js
async function fetchData() {
const response = await fetch(‘https://api.example.com/data’);
const data = await response.json();
return data;
}

fetchData()
.then(data => {
console.log(‘Data fetched:’, data);
})
.catch(error => {
console.error

【jQuery】readyとは

# readyとは
`ready`関数は、ドキュメントが完全に読み込まれ、DOMが操作可能な状態になった時点で指定したコードを実行するための方法です。これは、ページがロードされた後にJavaScriptコードを実行する際に非常に便利です。

# 使用方法
ready()関数は、以下のように使用します。
“`js
$(document).ready(function() {
// ここにjQueryコードを記述する
});
“`
または、略記した形式として以下のように書くこともできます。
“`js
$(function() {
// ここにjQueryコードを記述する
});
“`
この関数は、ドキュメントが完全に読み込まれ、DOMが操作可能な状態になったときに実行されるコールバック関数を受け取ります。これにより、ページのロードが完了する前にjQueryコードが実行されるのを防ぎ、安全な方法でDOM要素にアクセスすることができます。

例えば、ページが読み込まれた後に特定の要素に対してイベントリスナーを追加したり、DOMの構造を変更したりする必要がある場合に、`ready

【jQuery】アコーディオンとは

# アコーディオンとは
アコーディオン（Accordion）は、Webページ上で項目を開いたり閉じたりすることができる、よく使用されるUI（ユーザーインターフェース）パターンの1つです。一般的に、複数の項目がリスト形式で表示され、各項目をクリックすると、その項目の詳細情報が表示されたり非表示になったりします。

アコーディオンは、情報を整理し、スペースを節約するのに役立ちます。また、ユーザーが興味を持っている情報にすばやくアクセスできるようにします。

jQuery UIプラグインには、アコーディオンを簡単に実装できる機能が含まれています。以下は、jQuery UIのアコーディオンの基本的な使用例です。

HTML:
“`html

Section 1

This is the content of section 1.

Section 2

This is the content of section 2.

モジュールとは

# モジュールとは
モジュールは、プログラムを構成する部品の1つであり、関連する機能やコードをまとめたものです。モジュールは、コードの再利用性や保守性を向上させるために使用されます。一般的に、モジュールは特定の機能や目的を持つ関数やクラスの集合体です。

# 特徴
モジュールの主な特徴は次のとおりです。

1\. **機能のまとまり** : モジュールは特定の機能や目的に関連するコードをまとめたものです。これにより、関連する機能を理解しやすくし、コードをより構造化しやすくします。

2\. **再利用性** : モジュールは、他のプログラムやプロジェクトで再利用することができます。これにより、同じ機能を複数の場所で実装する必要がなくなり、コードの重複を減らすことができます。

3\. **名前空間の提供** : モジュールは、グローバルな名前空間を汚染せずに関連する関数やクラスを定義するための手段を提供します。これにより、異なるモジュールで同じ名前の関数やクラスを定義しても衝突することがありません。

4\. **分割されたコードベース** : 大規模なプロジェクトでは、モジュールを使

【jQuery】モーダルとは

# モーダルとは
モーダル（Modal）は、Webページ上でポップアップするダイアログやウィンドウのことを指します。モーダルは、ユーザーに対して情報を表示したり、重要な操作を行うためのコンポーネントとして広く使用されています。

一般的なモーダルウィンドウには、以下の特徴があります。

1\. **ポップアップ** : モーダルは通常、ユーザーの操作に応じてポップアップします。たとえば、ボタンのクリックやページの読み込みなどのイベントによって表示されます。

2\. **オーバーレイ** : モーダルが表示されると、背景に暗いオーバーレイが表示され、モーダルが他のコンテンツと区別されます。オーバーレイは、モーダル以外の部分が操作できないようにするための視覚的な効果もあります。

3\. **閉じるボタン** : モーダルには通常、閉じるためのボタンが含まれています。これにより、ユーザーは必要に応じてモーダルを閉じることができます。

4\. **コンテンツ** : モーダルには、通常、テキスト、画像、フォーム、または他のウィジェットなどのコンテンツが含まれます。これにより、ユーザーに情

【jQuery】offsetメソッドとは

# offsetメソッドとは
`offset`メソッドは、要素の現在位置をページ全体に対する絶対座標で取得します。要素の左上隅がページの左上隅からどれだけ離れているかを示すオブジェクトを返します。

このメソッドは、要素が現在のビューポート内にあるかどうか、あるいはスクロールされたページのどの位置にあるかを判断するのに便利です。

基本的な構文は次のとおりです。
javascript:
“`js
$(selector).offset()
“`
`selector`には、対象となる要素を指定するセレクターを入力します。

返されるオブジェクトは、以下のプロパティを含みます。

`top`: 要素の上端がページの上端からのピクセル数を示します。
`left`: 要素の左端がページの左端からのピクセル数を示します。

例えば、要素の現在の位置を取得するために以下のように使用します。
javascript:
“`js
var position = $(‘#myElement’).offset();
console.log(‘Top:’, position.top, ‘Left:’, po

【jQuery】attrメソッドとは

# attrメソッドとは
`attr`メソッドは、指定した要素の属性を取得または設定するためのメソッドです。このメソッドを使用すると、HTML要素の属性を取得したり、新しい値を設定したりすることができます。

`attr`メソッドの基本的な構文は次の通りです。
“`js
$(selector).attr(attributeName) // 属性の値を取得する
$(selector).attr(attributeName, value) // 属性の値を設定する
“`
– selector: 属性を取得または設定する対象の要素を指定するセレクター。
– attributeName: 取得または設定したい属性の名前。
– value: 設定したい属性の値。

例えば、以下のように使用することができます。
html:
“`html
Click me
“`
javascript:
“`js
// disabled属性の値を取得する
var isDisabled = $(

【2024年版】JavaScript(React)におけるリーダブルコードのチートシート1~3章

:::note
2024/2/10更新
:::

## 概要
リーダブルコードを読んでいて、JavaやC++、Pythonの事例も混じっているのと割とレガシーな例題が多いなーと感じました。

React.js、Next.js、TypeScriptをメインにフロントエンドエンジニアとして仕事をしている自分用に、後で見返せるよう2024年JavaScript版リーダブルコードのチートシート的なものを改めて読み返しながら随時更新していきます。

## そもそもリーダブルコードとは
ダスティン・ボスウェル著書の良いコードを書くための技術書です。
エンジニアになったら1度は目を通した方が良いとされる代表格の技術書ではないでしょうか？

意味としてのリーダブル(readable)コード(code)とは、「読みやすいコード」と直訳できます。
チーム開発ではスムーズな開発や保守性を担保するために読みやすいコードが必要とされます。

本書はそんな読みやすいという曖昧な表現を具体化してくれる良書なので未読の方はぜひ一度読んでみてください。
また本記事もリーダブルコードと同じ構成で書いていくので、一緒に

バックエンドエンジニア、異世界転生してフロントエンドエンジニアになる！第二話「作戦」

バックエンドやってる期間が長くて「まあ基本こんなAPIあればフロントどうにかなるやろ？」という第六感(？？？)が働いてバックエンドのコードはスッラスラ書けるけど、フロントエンドは実は全部デザインが反映されたコードにAPIだったりtRPCを後でぶち込むくらいのことしかやったことがないので、vimを前に唖然としてしまう。
それもそのはず、サイトが取るべき大体のノード構造は把握できるけどどうすれば上手く見せられるかが謎。そして、サイトの見た目と挙動を同時に考えて一気にフロントを実装するとなると流石に俺の浮世離れしたスーパー脳みそでもどうにもならない。
### ※エンジニアの活きる知恵:
他の人に話すときも、自分でコードを書くときも基本的に自分は「圧倒的な才能と知能を持っている」って考えよう。異世界転生してきたチート主人公に自分を重ねて、それでもブチ当たる壁だと考えれば、自分のやっていることが常人には出来ないことだということに気づく。
実際、そうである。みんなは地獄から這い上がってきた鬼畜(狂人としても良い。実際、私を含めた経営陣は皆バケモノとしか言いようが無い)を上司に抱えているので、普通に

バックエンドエンジニア、異世界転生してフロントエンドエンジニアになる！第一話「React気持ち悪い！」

変数がページの形態と連携する(useState)という、一見スマートに見えるReactの仕様。しかしページに複数の形態をもたせることで、二つの仕様について「二つのページに分けるべきなのか」「二つの形態を持った一つのページで良いのか」という疑問が発生する。これはファイルストラクチャ（フォルダとファイルを使った情報格納）に基づいてページが生成されるというReactの特徴に真っ向から歯向かうような設計である。更に、この設計が故にページに表示される内容に関わる変数は「変数」ではなく「固定数」であり、その内容を変えるためにはページを完全に再生成する関数を使用しなければならない、というギミックじみた仕様になっている。
Reactのフレームワーク外に関する処理（ビデオプレイヤーなど）やDOMエレメントに対する働きは専用のuseEffectやuseRefという関数や変数（というかタグ？アトリビュート？）を使用して行うことにも違和感がある。というのも、もしReactがフレームワークなのであれば、フレームワーク外の処理を行うことは極めて稀なことであるべきだ。JSX記法が主流になりつつある今、純粋なReac

JavascriptでCloud Storage for Firebaseを操作する

# はじめに
この記事では`Javascript`で`Cloud Storage for Firebase`のデータを取得・更新・削除する方法について書いています。

公式ドキュメントを参考にしています。

https://firebase.google.com/docs/storage/web/start?hl=ja

# 前提
* Cloud Storage for Firebaseの構築が済んでいる
* Cloud Storage for Firebaseに接続できる状態

# Cloud Storage for Firebaseを操作する
下記の方法について説明しています。
1. アップロード
1. ダウンロード
1. 削除

上記のどの操作でもストレージへの参照を作って、その参照先のデータを操作するという流れは共通しています。

## アップロード
大きく下記の2通りのアップロード方法について書いています。
1. **FileオブジェクトかBlobオブジェクトを使ってアップロードする**
1. **Base64などの文字列を使ってアップロードする**

### Fileオブジ

Colab上でお絵描きしてマスク画像をつくるツール

# Inpainting用のマスクをすぐ作れる

Inpainting（AI消しゴム）には画像と、マスク画像が必要です。
マスク画像とは、オリジナル画像と同じサイズで、消す部分が白、背景が黒、のグレイスケール画像です。
これをつくるツールってあんまりないので、Colabですぐお絵描きしてマスク画像が作れるツールが以下です。
描画を白黒マスクで保存でき、消しゴム機能もあります。

[**Colabリンク(セルを実行するとツールが出ます)**](https://col

学校のパソコンでScratchが使えなくなってキレたので使えるようにした話

# 初めに

### ① 免責事項
:::note alert
当記事の目的は、プログラミングをしたいのに学校のフィルタでブロックされてしまい、学習面・ユーザーから見て好ましくない体験をしている人たちに向けたものです。

**決して教育委員会や学校に対して、本気で喧嘩を売ろうと思っているわけではありません。**
**また、学習のための端末の不適切・違法な使い方を推奨するものではありません。**

当記事による直接的・間接的なトラブルや被害に対して筆者は一切の責任を取りません。利用するときは自己責任でお願いします。

**尚、当記事を読んだ時点で、上記の免責事項に同意したもの**とみなします。
:::
# さっそく使ってみる

### ② 実行環境
このツールは、HTMLが実行できる環境ならほぼどこでも使えます。私の実行環境(Lenovo端末・Windows10・Microsoft edge)での動作確認・また、別端末で、GoogleChrome・Safariでの動作確認ができています。
また、今回突破するフィルタは、ロイロウェブフィルタです。(ちなみにwifiがなくても実行できます)私

ライブラリ自体のバグに遭遇したときにとるべき行動

「ライブラリ自体がバグってるなら俺にはもうどうすることもできん！」
「OSS活動なんてごく一部のつよつよエンジニアだけができるんでしょ？」

って思っている方も、諦めるのは早いです。

ライブラリ側起因の問題でも解決できるかもしれませんし、もしかしたらライブラリに貢献できるかもしれません。

# 1. 調査

:::note info
まずは問題をよく調査することが重要です。
問題の原因が詳しく理解できているほど、このあとにとれる手段も広がっていきます。
:::

## ライブラリのバグなのか見極める

発生している問題が本当にライブラリのバグによるものなのか、自分のコードに問題があるのかを見極める必要があります。

そのためには、自分のプロジェクトのコードをひたすら削っていきながら、**最小限の再現コードを作成**します。

この最小限の再現コードは後で色々と役に立ちます。

## ライブラリのバージョンを変えてみる

ライブラリのあるバージョンから発生した不具合の可能性があります。

**まずはバージョンを最新に**変更して、既に修正済みでないかどうか確認しましょう。

最新バージ

HTMLスライドショーのための雛形・サンプル

以下サンプルHTML＋CSS+JS

“`slideshow.html