kikiki-kikiのブックマーク - はてなブックマーク

【検証】React.FC と React.VFC はべつに使わなくていい説
こんにちは、クレイの正岡です。コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。さて、今回は React × Typescript でコードを書いている人／書こうとしている人に向けて、Reactコンポーネントの型定義について頭の片隅に置いておいて欲しい情報を共有したいと思います。寝ながら使えてしまうReactコンポーネントの3つの型 () => JSX.Element 型 interface Props { text: string } const Hoge = ({ text }: Props) => { return ( <p>{ text }</p> ) } 上記のように返り値の型を特に指定していない場合、このコンポーネントは JSX.Element型を返す関数（ () => JSX.Element ）として返ります。 React
kikiki-kiki 2021/10/06
JSX.Element だと null 返すのはダメなのね。

TypeScript

react
リンク
HTML5 Canvasでフラクタル図形を描いてみた
はじめに一年の1/4が終わってしまうと思ってるみなさんこんにちは。ダニーです。今回はHTML5のCanvasの使い方を調べて Canvasでフラクタル図形を描いてみました。デモ http://f96q.github.com/canvas_demo/ Canvasについて詳しい仕様は http://dev.w3.org/html5/canvas-api/canvas-2d-api.htmlに載っているのでそちらを参照して下さい。 Canvasを作る <canvas id="main" width="500" height="500" ></canvas> canvasタグでcanvasを作ります。コンテキストの取得 var canvas = document.getElementById('main'); if (canvas.getContext) { var ctx = can
kikiki-kiki 2020/05/17
ART

Programming
リンク
Web Audio APIを使ってオーディオビジュアライザを作る
HTML5のJavaScript APIにWebAudio APIというものがあります。これは、mp3やwavなどの音声データを扱い、エフェクトをかけたり他の音声データと合成したりと、かなり高度なことができるAPIとなる予定です。このWebAudio APIを利用して、ファイルフォームにセットした音声ファイルの再生と同時に周波数データを取得し、棒グラフに描画してみるサンプルを作ったので解説していきます。サンプル作ったものを下に表示しています。 2014年10月現在、IEではWebAudio APIに対応していないので動作しません。 mp3やwavファイルを選択すると、再生と同時に棒グラフが描画されます。別タブで開く https://kray.jp/projects/webaudio/index.html HTML index.htmlを用意しました。ここには、ファイルのinpu
kikiki-kiki 2020/05/17
development

webaudio
リンク
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事（追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。リンクのclickイベントをフッ
kikiki-kiki 2020/01/30
turbolinks

rails

javascript
リンク
1