#JavaScript

ReactNativeのFlexboxレイアウト

React Nativeで利用するFlexboxのまとめ。 Flexbox React Nativeではコンポーネントのレイアウトをflexboxで行います。そもそもFlexboxはCSS3で定義されているレイアウトモードで、スクリーンの空き部分を埋めるように要素を表示します。 A Complete Guide to Flexboxでの解説がわかりやすいです。 ...

続きを読む

SVGのアニメーション - 基礎

SVGの基礎 そもそもSVGとは、と言われた時にベクター形式で拡大しても劣化しない画像のタイプでXML形式で描画できる、という程度の知識なので、基礎からやっていきます。 コードで生成する画像 SVG要素はDOM要素の一種として、HTML要素のシンタックスに似た形式でシェイプを定義できます。SVG要素は独自のタグ、属性、振る舞いを定義することができます。ということは、 ...

続きを読む

p5.js x browserify

p5.jsをbrowserifyで、requireして利用したい場合「Instance mode」という方法で利用します。 var p5 = require('p5'); function sketch( ...

続きを読む

React 入門 #3 - Component 2

引き続き、Componentについて学んでいきます。 外部からComponentにアクセスする レンダリングしたComponentへの参照はReact.render()の返り値を使うことができます。 var myCounter = React.render( React.createElement( ...

続きを読む

React 入門 #2 - Component

カスタムコンポーネント Hello worldではReact.DOM.h1を使い、HTML要素をラッピングした組込みのコンポーネントを利用しました。今回は独自のコンポーネントを作る方法について学んでいきます。 React.createClass カスタムコンポーネントを作るにはReact.createClassを使います。 var ...

続きを読む

React 入門 #1

Hello world Reactを使ったフロントエンド開発の第一歩を学びます。まずはNPMやBowerを使わずにReactをダウンロードし、プロジェクトをセットアップしてみましょう。 プロジェクトのセットアップ Reactをダウンロードし、プロジェクトに配置します。ここでは"Starter Kit"をダウンロードして利用します。 ...

続きを読む