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

【2024年最新】徹底解説！TypeScriptの超基本を超分かりやすく説明

## TypeScriptとは何か？

TypeScriptはJavaScriptを拡張した言語です。静的型付けにより、コードの間違いを早期に発見し、大規模なアプリケーション開発をスムーズに進めることができます。

JavaScriptのすべてのコードはTypeScriptで動作しますが、TypeScriptでは型を定義することでより安全にコードを管理できます。型の導入により、開発者は予期しないエラーを避け、より信頼性の高いソフトウェアを構築できます。

この言語は、Microsoftによって開発され、オープンソースで提供されています。初心者でも学びやすく、実践的なプログラミングスキルを身につけることが可能です。

### TypeScriptの基本概念

TypeScriptの魅力は、その静的型付けにあります。これにより、コードに予期せぬエラーが少なくなり、開発効率が大幅に向上します。具体的には、以下の点が挙げられます。

* **型安全性**：変数や関数の型がコンパイル時にチェックされるため、実行前にエラーを発見しやすくなります。
* **開発効率の向上**：エディターが

CSS Scroll Snapでミニマムなカルーセルスライダーをつくる

:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::

## はじめに
Web UIを実装する際にカルーセルスライダーを実装することはよくあることだと思います。
ライブラリをガッツリ利用するほどではないけれど、カルーセルスライダーっぽい挙動を見せたい :thinking: という想定で、[CSS Scroll Snap](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_scroll_snap)と最小限のJavaScriptで実装できるか試してみました。

## CSS Scroll Snapでできること
スライドを内包するコンテナに `scroll-snap-type`を設定するだけで、CSS Scroll Snapを利用することが可能です。
“`css
scroll-snap-type: x mandatory;

DLsiteプロフィール帳を作りたい

:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::

# ニャン作さんをご存じですか？
https://www.youtube.com/@user-ws1sf2cn4t

DLsiteにはニャン作さんという同人創作活動についての情報発信をしてくれるキャラクターがいます。
ニャン作さんのTwitterを見ていたところ、DLsiterプロフィール帳なるものを配布されておりました。

https://x.com/dIsiter_NYANSAK/status/1668173795524489217

さっそく自分も書こうと思いましたが、画像ファイルなので書き込むのが大変:sweat_drops:
そこで、簡単にプロフィール帳を作れるWebアプリを作ってみました！

https://dlsite-profile-maker.web.app/

フォームの質問に回答するだけでプロフ

同じ要素に同じ種類のイベントを複数設定したときの実行順序を制御したい

JavaScriptで要素にイベントを設置していると、同じ要素に対して同じ種類のイベントを複数設定したい時があります。
その際の実行順序のルールや制御方法についてまとめてみました。

## 同じイベントの実行順序はイベントの追加順序に依存する
例えば、ボタン要素に複数のクリックイベントを設定してみましょう。
“`html:index.html








ここをクリック