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

【Splide】ズームインしながらフェードで切り替える

ヒーローイメージでよく利用するズームインしながらフェードで切り替えるスライダー。

検索してみると Swiper での実装方法は見つかりますが、Splide での実装方法が見つからなかったのでまとめてみました。

ちなみに Splide はアクセシビリティに配慮した軽量・高機能スライダーです。
Swiper は多機能すぎてカスタマイズが大変だ…:weary:
という方にオススメです！

https://ja.splidejs.com/

## バージョン

Splide のバージョンは `4.1.4` を利用しました。

“`html:HTML
“`

## HTML

各スラ

[備忘録].then チェーンを使って、JavaScriptの実行順序を制御する

# はじめに
JavaScriptで非同期処理を扱う際、正しい実行順序を保証することは重要です。今回は、私が遭遇した一般的な問題と、`.then()` チェーンを用いた解決策について共有します。

# 問題点
画像を非同期にロードし、そのロードが完了次第表示する必要がありました。しかし、画像を取得する`getImages`関数が完了する前に、画像を表示しようとする`displayShape`関数が実行されてしまいました。これは、`getImages`関数が`fetch` APIを使用しており、非同期でデータを取得するためです。

“`javascript
// これは問題を示す疑似コードです
function getImages() {
fetch(“/get-images”).then(response => {
// 画像データの処理
});
}

function displayShape() {
// 画像の表示
}

getImages();
displayShape(); // これはgetImagesが完了する前に実行されるかもしれません
“`

ProtoPediaの作品データを簡易的に取得して指標分析など

## ヒーローズリーグ2023お疲れ様でした！

ヒーローズリーグは老舗のものづくり開発コンテストって感じで2023年の決勝が先日終わりました。

ヒーローズリーグとは？はこちらの記事を読んでみましょう。

https://note.com/otama_kum_akero/n/nd43ffa03aba4

僕も出しましたけど賞に引っかからず…

https://protopedia.net/prototype/4902

## 288作品の情報を一覧化してみる

個人的な興味（理由はあるけど深くは言わない）で作品の情報を抜き出しつつソートしたりしたいなと思いました。

https://protopedia.net/event/hl2023

今回の応募作品は288作品でした。

この情報を手で取るのは大変で、ProtoPediaのAPIはあるけどなんか **挙動が怪しかったのでAPIは使わず**にサイトから抜き出してみるチャレンジをしてみます。

### サイトの構成

こんな感じで作品がdivタグ要素のBOXに入っています。 **”proto-box”というclass**

querySelectorで取得している値について調べてみた

## 経緯

『JavaScript Primer』第32章の「ユースケース：Todoアプリケーション」を手を動かしながら学習しています。

### 第32章の小見出し

– エントリーポイント {#entrypoint}
– アプリの構成要素 {#app-structure}
– Todoアイテムの追加を実装する {#form-event}　←今ここ！
– イベントとモデル {#event-model}
– Todoアイテムの更新と削除を実装する {#update-delete}
– Todoアプリのリファクタリング {#final}

## 気になったところ

HTML要素を
1. ドットを付けないで出力した場合
2. ドットを付けて出力した場合

ではどう変化するのか、が気になったのでデバッグしてみました。

### ソースコード

todoapp/src/App.js

“`
export class App {
mount() {
const formElement = document.querySelector(“#js-form”);

Yamada UI:多機能かつ柔軟なUIコンポーネントライブラリを触ってみた

## はじめに
みなさんは、どのReactのUIコンポーネントライブラリを使っていますか？
Material-UI（MUI）、Chakra UI、Boostrap等々、様々だと思います。

今回はYamada UIという多機能かつ柔軟性が高いUIコンポーネントライブラリを紹介します。

https://github.com/hirotomoyamada/yamada-ui

https://yamada-ui.vercel.app/

## Yamada UIとは
公式の説明を日本語訳したものを以下に載せます。

>Yamada UIは、最先端のWebアプリケーションやWebサイトの開発を効率化するReact UIコンポーネントライブラリです。他のReact UIコンポーネントライブラリでは一般的にサポートされていないカラーモードやアニメーションなどの様々な機能を取り入れ、複雑なユーザーインターフェイスを構築するために簡単に組み合わせることができる多様なコンポーネントを提供しています。

「かゆいところに手の届く多機能性」と「カスタマイズが容易であるという柔軟性」の二つを兼ね備えたラ

千両箱と木の葉

PDFファイルを直接ダウンロードする方法
（ダウンロードリンクだとPDFを開いてしまうため
“`

Download PDF