2019-10-01から1ヶ月間の記事一覧
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 より複雑なウィジェット 複雑なアプリを作っても、アクセシビリティが複雑ではよくない。 JSXではWAI-ARIAのRoles ModelやSupp…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 マウスとポインタのイベント アプリケーションを作っていく際にマウスとキーボードどちらでも操作できることが必要とありまし…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 フォーカス制御 作ったウェブアプリケーションはキーボードだけで操作できるかどうかも大切。 WebAIM: Keyboard Accessibility…
これは2019/10/28(月)に行われた#webauthn_studyに参加してきたメモと感想です。 目次 目次 イベントページ 内容(※敬称略) WebAuthnの導入事例から見る定石と今後の課題 @ritou (仮) WebAuthN を実際に入れてみてどうだったか @kasecato (nulab) その他 イベ…
これは2019/10/27(日)に行われた.NET Conf in Tokyo 2019に参加してきたメモと感想です。 今回はUnity系の方にのみいましたので.NET側の方の内容は最初のみです。 またイベント中のメモをベースとしているので誤りなどがあった場合は気づき次第修正します。 …
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 アクセシブルなフォーム ラベル付け HTML フォームコントロールにはアクセシブルな形でのラベル付けが必要なので入力補助にな…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 セマンティックな HTML セマンティックなHTMLはアクセシビリティの基礎になりHTMLの持つ多様な要素を使うことで容易に手に入れ…
これは2019/10/23(水)に行われたRoppongi.unity #5 in メルカリ@六本木ヒルズの録画をみたメモと感想です。 資料は後日アップロードされたら更新する予定です。 目次 目次 イベントページ 動画 内容(※敬称略) 楽しい!LWRP + 2D Light @lycoris102 Unityでブ…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 なぜアクセシビリティが必要なのか? Webアクセシビリティ=誰にでも使えるようウェブサイトを設計・構築すること www.weblio.…
これは2019/10/22(火)に行われたPlayFab Meetup #1 in Microsoftに参加したメモと感想です。 資料は後日アップロードされたら更新する予定です。 目次 目次 イベントページ 内容(※敬称略) Unite振り返り 登壇者:南 PlayFab with HoloLens 登壇者:JackMasak…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org React の流儀 昨日の続きです。 Step 5: 逆方向のデータフローを追加する ここまででpropsとstateが階層構造を流れていく関数として正しく描画を行えるアプリを作ることができま…
これは Oculus Go分解した感想です。 動機 ・IFIXITのツールキットを買ったのでなんか分解したかった。 jp.ifixit.com ・Oculus Goで購入したゲームはQuestでもできる様になっているので、 Go壊れてもいいかくらいの気持ちになった ※ambrができなくなるのは…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org React の流儀 昨日の続きです。 Step 4: state をどこに配置するべきなのかを明確にする stateの最小構成が明確になったところで、stateを変化させるコンポーネントを明確にして…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org React の流儀 昨日の続きです。 Step 3: UI 状態を表現する必要かつ十分な state を決定する Reactのstateを使ってUIをインタラクティブなものにする。 まずは作ろうとしているア…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org React の流儀 昨日の続きです。 Step 2: Reactで静的なバージョンを作成する 昨日はコンポーネントの階層まで決まりました。 アプリケーションの実装に入っていきます。 まずはデ…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org React の流儀 何回かに分けて実施する。 ここでは検索可能なデータ表を作成していく。 巨大で軽快な Web アプリを開発する場合はReactが素晴らしい選択肢になることを伝えている…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org コンポジション vs 継承 Reactは継承よりもコンポジションを推奨している。 本章では継承を使った場合を例に出してコンポジションではどう解決できるかを示す。 子要素の出力 (Co…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org state のリフトアップ stateのリフトアップ いよいよ本章のテーマにきました。 昨日までの状態ではTemperatureInputは独立してローカルのstateを保持しています。 理想は入力フィ…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org state のリフトアップ 変換関数の作成 昨日の続きです。 摂氏と華氏、いずれかの値に入力があった時に、変換してどちらかの表示をするようにします。 華氏の入力を摂氏に変換 fun…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org state のリフトアップ 2 つ目の入力を追加する 摂氏だけでなく華氏も対応できるようにしていきます。 昨日作ったCalculatorクラスからtemperatureを抜き出してTemperatureInputク…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org state のリフトアップ 台風前の準備で大変というのと、頭痛がひどいので何回かに分けます。 stateのリフトアップとは一つの値を複数のコンポーネントが参照したい場合の解決策(子…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フォーム フォーム2日目。 textarea タグ HTMLでのtextareaは以下のように子要素にテキストを持つ。 <textarea> Hello there, this is some text in a text area </textarea> ReactではValueを指定する…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フォーム 今回は何回かに分けます。 フォームをイメージするのに時間がかかってしまった...。 HTMLHTMLフォームが持つ状態があるためReactは他のDOMとは違う動作をする。 基本的…
これは 2019/10/08(火)に行われた【緊急来日】Nreal Developer Gathering【増枠】に参加した時のメモと感想記事です。 イベントページ ar-japan.connpass.com 会場:IGNITIONPOINT様 ハッシュタグ:#NrealDev 講演内容(※敬称略) 主催挨拶&諸連絡 (19:25 ~ 1…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org リストと key JavaScriptではmap()を使ってリスト変換をします。 const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 条件付きレンダー ReactのレンダーはJavaScriptの条件分岐のように条件付きでレンダー範囲を指定することができる。 以下のコードはGreetingファンクションの中でログイン状態に…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org イベント処理 昨日の続きです。 JSXのコールバックにおけるthisの意味に注意が必要。 JavaScriptではクラスのメソッドはデフォルトでバインドされない。 なので、this.handleClic…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org イベント処理 今回も複数回に分けます。 ReactのイベントはcamelCaseで命名される。 JSXではイベントハンドラとして文字列ではなく関数を渡す。 // これはHTML <button onClick="activateLasers()"> Activate Lasers </button>…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org state とライフサイクル 昨日の続き。 state を正しく使用する setState()について stateを直接変更しないこと コンポーネントの再レンダーのためにはsetState()を使用する。 // …
これは Reactのガイドを読んでいく記事です ガイドのリンク ja.reactjs.org state とライフサイクル 今回は2回に分けます。 stateとライフサイクルについて以前作成した時計のアプリを変更しながら学習する。 目標はclockコンポーネントをカプセル化して再利…