2019-10-01から1ヶ月間の記事一覧

Reactガイドを読んでいくその28

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 より複雑なウィジェット 複雑なアプリを作っても、アクセシビリティが複雑ではよくない。 JSXではWAI-ARIAのRoles ModelやSupp…

Reactガイドを読んでいくその27

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 マウスとポインタのイベント アプリケーションを作っていく際にマウスとキーボードどちらでも操作できることが必要とありまし…

Reactガイドを読んでいくその26

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 フォーカス制御 作ったウェブアプリケーションはキーボードだけで操作できるかどうかも大切。 WebAIM: Keyboard Accessibility…

#webauthn_studyに参加してきた

これは2019/10/28(月)に行われた#webauthn_studyに参加してきたメモと感想です。 目次 目次 イベントページ 内容(※敬称略) WebAuthnの導入事例から見る定石と今後の課題 @ritou (仮) WebAuthN を実際に入れてみてどうだったか @kasecato (nulab) その他 イベ…

.NET Conf in Tokyo 2019に参加してきた

これは2019/10/27(日)に行われた.NET Conf in Tokyo 2019に参加してきたメモと感想です。 今回はUnity系の方にのみいましたので.NET側の方の内容は最初のみです。 またイベント中のメモをベースとしているので誤りなどがあった場合は気づき次第修正します。 …

Reactガイドを読んでいくその25

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 アクセシブルなフォーム ラベル付け HTML フォームコントロールにはアクセシブルな形でのラベル付けが必要なので入力補助にな…

Reactガイドを読んでいくその24

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 セマンティックな HTML セマンティックなHTMLはアクセシビリティの基礎になりHTMLの持つ多様な要素を使うことで容易に手に入れ…

Roppongi.unity #5 in メルカリ@六本木ヒルズの録画を見た

これは2019/10/23(水)に行われたRoppongi.unity #5 in メルカリ@六本木ヒルズの録画をみたメモと感想です。 資料は後日アップロードされたら更新する予定です。 目次 目次 イベントページ 動画 内容(※敬称略) 楽しい!LWRP + 2D Light @lycoris102 Unityでブ…

Reactガイドを読んでいくその23

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org アクセシビリティ 何回かに分けてやっていきます。 なぜアクセシビリティが必要なのか? Webアクセシビリティ=誰にでも使えるようウェブサイトを設計・構築すること www.weblio.…

PlayFab Meetup #1 in Microsoftに参加してきた

これは2019/10/22(火)に行われたPlayFab Meetup #1 in Microsoftに参加したメモと感想です。 資料は後日アップロードされたら更新する予定です。 目次 目次 イベントページ 内容(※敬称略) Unite振り返り 登壇者:南 PlayFab with HoloLens 登壇者:JackMasak…

Reactガイドを読んでいくその22

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org React の流儀 昨日の続きです。 Step 5: 逆方向のデータフローを追加する ここまででpropsとstateが階層構造を流れていく関数として正しく描画を行えるアプリを作ることができま…

Oculus Go分解した

これは Oculus Go分解した感想です。 動機 ・IFIXITのツールキットを買ったのでなんか分解したかった。 jp.ifixit.com ・Oculus Goで購入したゲームはQuestでもできる様になっているので、 Go壊れてもいいかくらいの気持ちになった ※ambrができなくなるのは…

Reactガイドを読んでいくその21

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org React の流儀 昨日の続きです。 Step 4: state をどこに配置するべきなのかを明確にする stateの最小構成が明確になったところで、stateを変化させるコンポーネントを明確にして…

Reactガイドを読んでいくその20

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org React の流儀 昨日の続きです。 Step 3: UI 状態を表現する必要かつ十分な state を決定する Reactのstateを使ってUIをインタラクティブなものにする。 まずは作ろうとしているア…

Reactガイドを読んでいくその19

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org React の流儀 昨日の続きです。 Step 2: Reactで静的なバージョンを作成する 昨日はコンポーネントの階層まで決まりました。 アプリケーションの実装に入っていきます。 まずはデ…

Reactガイドを読んでいくその18

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org React の流儀 何回かに分けて実施する。 ここでは検索可能なデータ表を作成していく。 巨大で軽快な Web アプリを開発する場合はReactが素晴らしい選択肢になることを伝えている…

Reactガイドを読んでいくその17

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org コンポジション vs 継承 Reactは継承よりもコンポジションを推奨している。 本章では継承を使った場合を例に出してコンポジションではどう解決できるかを示す。 子要素の出力 (Co…

Reactガイドを読んでいくその16

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org state のリフトアップ stateのリフトアップ いよいよ本章のテーマにきました。 昨日までの状態ではTemperatureInputは独立してローカルのstateを保持しています。 理想は入力フィ…

Reactガイドを読んでいくその15

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org state のリフトアップ 変換関数の作成 昨日の続きです。 摂氏と華氏、いずれかの値に入力があった時に、変換してどちらかの表示をするようにします。 華氏の入力を摂氏に変換 fun…

Reactガイドを読んでいくその14

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org state のリフトアップ 2 つ目の入力を追加する 摂氏だけでなく華氏も対応できるようにしていきます。 昨日作ったCalculatorクラスからtemperatureを抜き出してTemperatureInputク…

Reactガイドを読んでいくその13

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org state のリフトアップ 台風前の準備で大変というのと、頭痛がひどいので何回かに分けます。 stateのリフトアップとは一つの値を複数のコンポーネントが参照したい場合の解決策(子…

Reactガイドを読んでいくその12

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フォーム フォーム2日目。 textarea タグ HTMLでのtextareaは以下のように子要素にテキストを持つ。 <textarea> Hello there, this is some text in a text area </textarea> ReactではValueを指定する…

Reactガイドを読んでいくその11

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フォーム 今回は何回かに分けます。 フォームをイメージするのに時間がかかってしまった...。 HTMLHTMLフォームが持つ状態があるためReactは他のDOMとは違う動作をする。 基本的…

【緊急来日】Nreal Developer Gathering【増枠】に参加してきた

これは 2019/10/08(火)に行われた【緊急来日】Nreal Developer Gathering【増枠】に参加した時のメモと感想記事です。 イベントページ ar-japan.connpass.com 会場:IGNITIONPOINT様 ハッシュタグ:#NrealDev 講演内容(※敬称略) 主催挨拶&諸連絡 (19:25 ~ 1…

Reactガイドを読んでいくその10

これは 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ガイドを読んでいくその9

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 条件付きレンダー ReactのレンダーはJavaScriptの条件分岐のように条件付きでレンダー範囲を指定することができる。 以下のコードはGreetingファンクションの中でログイン状態に…

Reactガイドを読んでいくその8

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org イベント処理 昨日の続きです。 JSXのコールバックにおけるthisの意味に注意が必要。 JavaScriptではクラスのメソッドはデフォルトでバインドされない。 なので、this.handleClic…

Reactガイドを読んでいくその7

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org イベント処理 今回も複数回に分けます。 ReactのイベントはcamelCaseで命名される。 JSXではイベントハンドラとして文字列ではなく関数を渡す。 // これはHTML <button onClick="activateLasers()"> Activate Lasers </button>…

Reactガイドを読んでいくその6

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org state とライフサイクル 昨日の続き。 state を正しく使用する setState()について stateを直接変更しないこと コンポーネントの再レンダーのためにはsetState()を使用する。 // …

Reactガイドを読んでいくその5

これは Reactのガイドを読んでいく記事です ガイドのリンク ja.reactjs.org state とライフサイクル 今回は2回に分けます。 stateとライフサイクルについて以前作成した時計のアプリを変更しながら学習する。 目標はclockコンポーネントをカプセル化して再利…