イベントハンドラ

Reactの最新版（v18）において、イベントハンドラ関数に引数を渡す方法および基本的なイベント処理について説明します。 ボタンやリンクなど、あらゆる要素をクリックした後に何らかの処理を実行する場合は、常にonClickイベントハンドラを使用します。 これはReactで最も強力で、最も頻繁に使用される機能の一つです。 また、この記事ではonChangeイベント処理についても解説しますが、ほとんどはonClickイベントハンドラを重点的に学習していきます。 SyntheticEvent(合成イベント) Reactのイベントハンドラ イベントハンドラをインライン関数として呼び出す インライン関数に…

イベントを処理する方法は、イベント属性の他にもあります。それは、要素にイベントリスナーを設定する方法です。イベントリスナーは、関数・メソッドを持っています。そこにイベントが発生した際の処理を記述します。イベントリスナーが持っている関数・メソッドをイベントハンドラと呼びます。 イベントリスナーの設定 マウスによるイベント キーボードによるイベント まとめ イベントリスナーの設定 要素名.addEventListener("イベント名", function(event) { //処理の中身 }, false); イベント名には、次のようなものがある。 click:マウスでクリックされたとき mou…

イベントハンドラとは？ 仕様が複雑化するとイベントハンドラにロジックを書くのはバグの温床になりやすい 解決方法はあるのか？ 最後に 参考 最近JavaScriptでHTMLVideoElement周りをゴリゴリ触っています。 そこで得た知見を共有できたらと思い記事として執筆しようと思います。 イベントハンドラとは？ まず始めに知っている方は飛ばしてください。 駆け出しエンジニアの方向けに説明します。 HTMLの要素に対して何かしらの操作が行われたときにはイベントが発生します。 例えばカーソルなどでクリックしたときにはclickというイベントがブラウザ内で発生しており、そういったイベントを検知し…

イベントの説明とイベント処理について書きました。イベント属性の種類を知り、スクリプトを設定する書き方についてご紹介します。ユーザの操作でイベント処理を実行することができるようになります。 イベントとは イベント属性 イベントハンドラ まとめ イベントとは ユーザによる操作(クリックやマウス操作など)によって、発生する処理を「イベント」と呼ぶ。イベントに対応するスクリプトを記述し実行することができる。 イベント属性 onclick:クリックした時 onmouseover:ある領域の上に重なった時 onmouseout:ある領域の上から出た時 onmousedown:ある領域の上でボタンが押された…

Reactのイベントハンドラの命名規則はプロジェクト、実装者によってかなりばらつきがあるように思う。以下、今まで見たことがある命名一覧（例：削除ボタンのclickイベントハンドラ）。 onClick onClickDelete onClickDeleteButton onDeleteButtonClicked handleClick handleClickDelete handleClickDeleteButton handleDeleteButtonClicked handleOnClick handleOnClickDelete handleOnClickDeleteButton hand…

シルバーウィーク 3連休が二週続く秋のシルバーウィークながら季節が真夏モードから変わらないのでどこにも出かける気が起きない引き籠りな皆さんこんにちは。一向に暑さが収まる気配がなく逆に蒸し暑さが増しているような気さえします。エアコンの効いた空間から出る気がしないので来週末の三連休も部屋で過ごすことになりそうです。 進捗報告 東京ゲームダンジョン6への出展に向けて会場で配布するクリアファイルのデザインを行いました。これまで展示会では毎回紙製のクリアファイルを作って配布しているのですが、今回もその例に漏れず紙製クリアファイルを作るのでその表紙のデザインです。 クリアファイルって意外に手に取ってもらい…

こんにちは。 この記事では、2024/5/22に開催された「アーキテクチャを突き詰める Online Conference」で弊社CTOの普川がお話しした内容（ビジネスの構造をアーキテクチャに落とし込みソフトウェアに可変性を注入する〜モノタロウ基幹システム刷新の実践例）を、現場目線から改めてご紹介します。 なお、本稿の執筆は頼と尾髙が分担しておりまして、途中で急に文体が変わったな？と違和感を持たれることもあろうかと思われますが、ご容赦いただけますと幸いです。 本稿をさらに深掘りするイベントを10/4(金)に開催いたします。 ご興味ある方はぜひご登録ください。 https://connpass.…

React のクラスコンポーネントと関数コンポーネントについて書き方やそれぞれの比較したメリット・デメリットをまとめました。 以下の構成になっています。 コンポーネントとは クラスコンポーネント クラスコンポーネントとは 基本の書き方 ライフサイクル 問題点 関数コンポーネント 関数コンポーネントとは 基本の書き方 コンポーネントを分割する props ライフサイクル カスタムフック メリット コンポーネントとは React のコンポーネントとは、Web ページを構成する何らかの機能と見た目を持ったひとかたまりの部品のこと。 機能は JavaScript で、見た目が HTML と CSS に…

JavaScriptのthisについてまとめました。 理解すべきことは以下です。 thisは実行コンテキストによって参照する値が変わる特別なキーワード thisは関数の呼び出し時に参照する値が決まるため、意図しない値が参照される可能性がある thisの問題を解決する方法は、thisを束縛する、thisを格納した変数を使う、アロー関数を使うといったものがある strictモードではthisの値が通常とは異なる場合がある thisとは JavaScriptにおけるthisは実行コンテキストによって参照する値が変わる特別なキーワード。thisの値はコードが呼び出される方法や場面によって異なる。 th…

構文 プログラミング例 まとめ 構文 構文は以下の通りです。 Worksheets("シート名").Range("セル範囲").Value = リストボックス名.Value 解説 Worksheets("シート名")は、操作するシートを指定します。Range("セル範囲")は、データを入力するセルの範囲を指定します。例えば、Range("A1")でセルA1にデータを入力できます。リストボックス名.Valueは、フォーム内のリストボックスで選択された値を取得します。この値を指定したセル範囲に入力します。 プログラミング例 具体的なプログラミング例を紹介します。 Private Sub コマンドボ…

はじめに こんにちは、Tochiです。 第2章~第17章に引き続き、今日も読み進めていきます！ 今日は第18章の「Code Should be Obvious」ついて考えていきたいと思います。 第2章まとめ 第3章まとめ 第4章まとめ 第5章まとめ 第6章まとめ 第7章まとめ 第8章まとめ 第9章まとめ 第10章まとめ 第11章まとめ 第12章まとめ 第13章まとめ 第14章まとめ 第15章まとめ 第16章まとめ 第17章まとめ https://amzn.asia/d/7tUC5KQ はじめに 感想 18章 18.1 コードを分かりやすくするもの 18.2 コードを分かりにくくするもの 18.…

特定の時間になったらコンテンツをページに出したい、ということがあると思う。漫画サービスなら「ゴールデンウィーク限定！全話無料キャンペーン！」みたいなのとか。 普段の業務ではこうしたことを実現するために、時限式コンポーネントや、ScheduledComponent などと呼ばれるものを作ってる *1。 // components/ScheduledComponent.tsx export function ScheduledComponent({showAt, children}: { showAt: Date; children: React.ReactNode; }) { if (new D…

Reactでのボタンコンポーネント（<button>タグ）は、ユーザーがクリックして何かをトリガーするために使用される基本的なインタラクティブ要素です。このガイドでは、<button>タグの基本的な使い方や、よく使用される属性について詳しく解説します。 基本的な<button>タグの構造 <button onClick={handleClick}>Click Me</button> 主な属性 1. type button: 通常のボタンとして機能します。デフォルトのタイプです。 submit: フォーム内で使用される場合、このタイプのボタンをクリックすると、フォームが送信されます。 reset…

Reactで使用する<input>タグについて詳しく解説します。<input>タグは、ユーザーからデータを入力させるための要素で、さまざまな属性を持ち、多様な入力タイプをサポートします。この記事では、Reactでの基本的な<input>タグの使い方と、よく使われる属性について説明します。 基本的な<input>タグの構造 <input type="text" value={value} onChange={handleChange} /> 主な属性 1. type text: テキストボックス。デフォルトのタイプです。 password: パスワード入力ボックス。入力された文字は非表示（*）に…

API(Application Programming Interface)とは？ 複雑な機能を簡単に作成するためにプログラム言語から提供されている構造。ある機能とは無関係なプログラムから使いたい機能を利用できるように用意されている使い方の決まり事。仕事を依頼するための窓口。 クライアントサイドAPI ブラウザAPI より簡単に複雑な機能を実装するためにブラウザに組み込まれているAPI。コアの部分はC++などの別言語が処理をしているが、隠蔽しているため使用する時に内部のコードを理解する必要はない。

Unityでのボタン操作を他のゲームオブジェクトのメソッドに依存させると、確かにそのボタンオブジェクトが依存してしまい、柔軟性が欠けてしまうことがあります。これを解決するために、より抽象的な形でボタンの動作を定義し、依存性を減らす方法をいくつか紹介します。 1. インターフェースを利用する 依存先のオブジェクトがインターフェースを実装することで、特定の実装に依存しない形でボタンが機能を発火できるようにします。 public interface IButtonAction{ void OnButtonPressed();} public class SomeAction : MonoBehavi…

5 月の App Builder リリースでは、多くの新機能と改善点が提供されました。ユーザーは、既存のデータソースを最新のOpenAPIスキーマに更新し、変更点を確認できるようになりました。また、Input、Checkbox、Switch、Date Picker、Calendar、Rating、Sliderといった各コンポーネントにおける双方向データバインディングのサポートも向上しました。 その他の新機能としては、ツリーグリッドコンポーネントで行の作成、更新、削除が可能となるデータアクションが追加され、行選択イベントに基づいて変数を更新できるようになりました。さらに、ツリーコンポーネントが強…