イベント(ユーザーによるボタンのクリックや、 メッセージキューによるメッセージ受信など) が発生したときに特定の処理を与えるための記述。
こんにちは。 JavaScriptさわってみる企画9回目です。今回のテーマはイベントハンドラ。なんだかかっこいい名前ですね。ゲームだったらきっと魔法か重要なキーアイテムって印象です。 実際かなり重要な奴っぽいですよ。イベントっていうのはマウスが動かされたりクリックされたり、画像が読み込まれたりするアクションのことを指していて、このアクションに対して処理を行う関数をイベントハンドラと呼ぶそうです。 つまり画面上でマウスが動かされたりボタンを押したりなど「○○したときに△△する」って処理を作れるってことです。そりゃすごい。(∩´∀｀)∩ いちおうボタンを押したときに画像を変えるってやつは前にやった…
Vue.jsでイベント処理をしてみます。今回は、簡単にクリックしたときの処理を書きます。クリック以外のイベントも試してみると良いです。 v-on 参考サイト v-on HTML側は、v-on:イベント名="メソッド名"で指定します。JavaScript側は、Vueインスタンスのオプションオブジェクトのmethodsにメソッドを定義します。 <div id="app"> <button v-on:click="up">Click me</button> <p>クリックした回数:{{counter}}回</p> </div> var app = new Vue({ el: '#app', data…
Reactの最新版（v18）において、イベントハンドラ関数に引数を渡す方法および基本的なイベント処理について説明します。 ボタンやリンクなど、あらゆる要素をクリックした後に何らかの処理を実行する場合は、常にonClickイベントハンドラを使用します。 これはReactで最も強力で、最も頻繁に使用される機能の一つです。 また、この記事ではonChangeイベント処理についても解説しますが、ほとんどはonClickイベントハンドラを重点的に学習していきます。 SyntheticEvent(合成イベント) Reactのイベントハンドラ イベントハンドラをインライン関数として呼び出す インライン関数に…
イベントを処理する方法は、イベント属性の他にもあります。それは、要素にイベントリスナーを設定する方法です。イベントリスナーは、関数・メソッドを持っています。そこにイベントが発生した際の処理を記述します。イベントリスナーが持っている関数・メソッドをイベントハンドラと呼びます。 イベントリスナーの設定 マウスによるイベント キーボードによるイベント まとめ イベントリスナーの設定 要素名.addEventListener("イベント名", function(event) { //処理の中身 }, false); イベント名には、次のようなものがある。 click:マウスでクリックされたとき mou…
イベントハンドラとは？ 仕様が複雑化するとイベントハンドラにロジックを書くのはバグの温床になりやすい 解決方法はあるのか？ 最後に 参考 最近JavaScriptでHTMLVideoElement周りをゴリゴリ触っています。 そこで得た知見を共有できたらと思い記事として執筆しようと思います。 イベントハンドラとは？ まず始めに知っている方は飛ばしてください。 駆け出しエンジニアの方向けに説明します。 HTMLの要素に対して何かしらの操作が行われたときにはイベントが発生します。 例えばカーソルなどでクリックしたときにはclickというイベントがブラウザ内で発生しており、そういったイベントを検知し…
イベントの説明とイベント処理について書きました。イベント属性の種類を知り、スクリプトを設定する書き方についてご紹介します。ユーザの操作でイベント処理を実行することができるようになります。 イベントとは イベント属性 イベントハンドラ まとめ イベントとは ユーザによる操作(クリックやマウス操作など)によって、発生する処理を「イベント」と呼ぶ。イベントに対応するスクリプトを記述し実行することができる。 イベント属性 onclick:クリックした時 onmouseover:ある領域の上に重なった時 onmouseout:ある領域の上から出た時 onmousedown:ある領域の上でボタンが押された…
イベントハンドラの登録 addEventListener 構文 要素オブジェクト.addEventListener(イベントの種類, 実行する処理, false); 例 ボタンをHTMLで準備しておき、押した際にHellow Worldをコンソールに表示 const sayHelloWorldButton = document.getElementById('ボタンのid'); sayHelloWorldButton.addEventListener('click', function(e) { console.log('Hello World'); }, false);
Reactのイベントハンドラの命名規則はプロジェクト、実装者によってかなりばらつきがあるように思う。以下、今まで見たことがある命名一覧（例：削除ボタンのclickイベントハンドラ）。 onClick onClickDelete onClickDeleteButton onDeleteButtonClicked handleClick handleClickDelete handleClickDeleteButton handleDeleteButtonClicked handleOnClick handleOnClickDelete handleOnClickDeleteButton hand…
onClickCaptureを使えば、イベント伝搬のうちのキャプチャリングフェーズで実行される関数を指定できることを知った ja.react.dev キャプチャリングフェーズとは、ルート要素からクリックされた要素に向かってイベントが伝播し、それぞれの要素にイベントリスナ・イベントハンドラが登録されているかどうかを調べるフェーズで、登録されていれば実行される ちなみに、キャプチャリングフェーズの他に、クリックされた要素に到達した時のターゲットフェーズ、クリックされた要素からルートに向かって伝搬するフェーズのバブリングフェーズがある 参考：React・JavaScriptのイベント伝播について今更…
Jetpack Composeでは、EditViewではなく、TextFieldを用います。 また、保持するテキストは、SpannableStringではなく、AnnotatedStringです。 再表示周りの処理が従来のものと異なるので、似た機能の別コンポーネントが用意されているということだと思います。 データベースへの保存は、Kotlinx.serializationライブラリなどを利用してJson形式にシリアライズしたものを保存するようにすると良いようです。 Jetpack ComposeではEditViewにあたるComposable関数はありますか？ 従来の方法と同様に、Spanna…
やりたいこと Pythonで簡単なGUIアプリを作りたい。 PythonのGUIツールキットとしては、Tkinterが標準で付属している。 Tkinterは、TkをPythonから使えるようにしたもの。 Tkは古めかしいGUIツールキットだが、簡単なGUIで見た目を気にしないならじゅうぶん使える。 しかしコードで画面をデザインするのは面倒なので、Visual Studioのフォームデザイナーのようなツールがほしい。 そのようなツールとしてPAGEがある。 PAGEは、じゃっかん挙動が怪しかったり、微妙な出来のツールではあるが無いよりはマシと思う。 PAGEのインストール 下記からダウンロードし…
https://assetstore.unity.com/packages/tools/input-management/joystick-pack-107631?locale=ja-JPそう、すばらしいアセットと多くの方が賞賛してる ただし、二つ配置すると、とたんにドラッグ操作が行えなくなり 使い物にならない今回マルチタップ化できたので、改造方法を記録しておきます編集するファイルは Base の Assets\Joystick Pack\Scripts\Base\Joystick.cs ファイルのみまず IDragHandler インタフェース継承をやめさせます OnDrag イベントハンド…
さて、例のLXD上のMateで遊んでいます。 現在CodeTyphonがやっと入りました。 これを入れるのにコツがあります。 /etc/sudoersにおまじないを 書いてinstall.shを走らせないとコンパイルできません。 くわしくはCTのForumに書いてありますが、みんなそこではまっています。 DelphiのAlternateであるLazarusとは別系統であるCodeTyphonですが、 最新を入れてみました。CodeTyphonはMultiPlatformなのでソースからコンパイル してIDEをいれるのです。(Lazarusもですが） BigIDEを選ぶと大量のコンポが入りますが…
ChatGPTへ質問し、プログラムを生成します。 arques.hatenablog.com に追加で質問を行い、コントロールプログラムをWindowsFormへ対応したプログラムへ変更します。 生成するプログラムはC#で記述したOpenCV用のプログラムです。
目次 はじめに Reactとは何か？ 環境設定 最初のReactコンポーネント JSXの基本 コンポーネントの状態とライフサイクル イベント処理 条件付きレンダリング リストとキー フォームの扱い コンポーネントの組み合わせ React Hooksの使用 まとめ はじめに このブログは、Reactをこれから学び始める方向けのガイドです。基本的な概念から始めて、実際のコード例を通じて、Reactの使い方を段階的に説明していきます。 Reactとは何か？ Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。コンポーネントベースのアーキテクチャを採用しており、再…
Webデザインの世界は日々進化を遂げており、その中でもアニメーションはウェブサイトやアプリケーションの魅力を高め、ユーザーエクスペリエンスを向上させる重要な要素です。本記事では、Webデザインのアニメーションを学びたいデザイナーや開発者のために、基礎知識から最新トレンドまで幅広くカバーしていきます。 Webアニメーションは単なる装飾ではなく、コンテンツの伝達やインタラクションの改善にも大きな役割を果たすことを理解し、その活用方法を学んでいきましょう。 【PR】Webデザイナーを目指す方におすすめのWebデザインスクール！ 副業・フリーランスのWebデザイナーを目指すなら『ChapterTwo』…
Windows App SDK（WinUI3）でコンポーネントをUser Controlとして作る - dullwhaleのメモ帳 の発展的な内容として、作成したUser ControlにXAMLから指定できるプロパティを実装する。 この記事ではUser ControlにXAMLからstringのプロパティと関数のプロパティを渡す部分を実装する。 また、実用性やUXよりも分かりやすさを優先している。 厳密には間違いである点が多々あるから、概要を掴んだらMSのドキュメントを見よ。 XAMLプロパティの制限 C#では関数をプリミティブ型の変数などと同等に扱わない。 C#の関数はfirst clas…
はじめに 動作確認環境 サンプルソース InputDeviceManager 使い方説明のサンプルソース 解説 "いずれかのキー"が入力されたかの監視 すべてのキーを１つの入力と捉えるInputActionを作成 作成したInputActionの有効化 入力されたか判定 毎フレーム操作されたデバイスを確認する DualSenseコントローラーについて デバイスが切り替わった瞬間の通知 初期化処理的なもの 使い方 おわりに はじめに Unityを使ったPCゲームで、上動画のように、 PS5コントローラなら「×で決定」 Xboxコントローラなら「Aで決定」 SwitchのProコンなら「Bで決定」…
経緯 & 概要 勉強の経緯 技術選定 開発中の一コマ Jest yarn とは ChatGPT TypeScript yarn buildで何をしているか github pages について そもそも yarn deploy で何をしているのか VSCodeからの拡張機能の提案 (Rainbow CSV) クラウド版 VSCode Github Copilot Chat ホスティングサービス選定 Github Pages Windowsの Powershell で yarn 一応 github pagesの始め方 npx Jestの始め方 jsdom と node 所要時間 経緯 & 概要 私…
なぜ今さらuGUI uGUIはUnity 4.6で導入されて以来、UnityでランタイムUIを作成するための標準ツールとなりました。現在、Unityは新しいUI作成ツールUI Toolkitをリリースしていて、UI Toolkitの習得もますます重要になってきています。しかし、UI Toolkitの公式の位置付けは依然としてエディターUIの作成が主であり、しばらくの間、uGUIはゲーム内UI制作の主要なツールとして、UI Toolkitと共存することが予想されます。 まだまだ絶賛開発中のUI Toolkitとは違い、uGUIはすでに成熟した技術で、コードベースが大きな変更されることはもうないで…
UIコンポーネントからイベント発火したことをテストする 親子コンポーネントの連動をテストする際、子コンポーネントでイベント発火したことを親コンポーネントに伝えたか確認したいことがある。特に小コンポーネントで状態を加工して親コンポーネントに送る場合は値もテストしたい。 基本の考え方 親子間でコンポーネントのイベント発火に応じた連携を行う場合、次のような流れで動いている。 親コンポーネントからイベント発火後に呼び出す処理をpropsしておく それを小コンポーネントのイベントハンドラーにセット 小コンポーネントでイベント発火すると1が動作する テストを書くとき問題になるのは1である。まず、親コンポー…
Webのフロントエンドのコンポーネントに相当するWinUI3のパーツはCustom ControlかUser Controlである。 Custom Controlはより低レベルの概念であり、独自の動作と描画ロジックを持てる。 対してUser Controlは既存のコントロール（UIパーツ）の組み合わせであり、フロントエンド用語のコンポーネントにより近いと思われる。 まずはUser Controlとして実装することを考え、User Controlで実現不可能な場合だけCustom Controlとして実装することを検討すると良い。 この記事では以降User Controlにだけ言及する。 また、…
IntelliJ Platform Pluginを作っている際、何らかの方法でメッセージをUI上に表示したくなりました。 実現方法を調べたところ、公式ドキュメントに Notification として記載がありました。 Notifications | IntelliJ Platform Plugin SDK そこで、各Notificationにて「改行ありのメッセージ」の表示をためしてみたときのメモを残します。 なお、今回は「ボタンをクリックしたらメッセージを表示する」形で実装します。 また、記事で説明に使う部分のみソースコードを記載しています。ToolWindowの登録方法など、ソースコード全…
dayflower.hatenablog.com
phpjavascriptroom.com
dev.classmethod.jp
xtech.nikkei.com
webtech-walker.com
phpspot.org
uriyuri.hatenadiary.org
qiita.com
www.tohoho-web.com
