「旅する勉強会〜Uniteアフターパーティー編〜」開催のお知らせ

こんにちは、藤田です。

いよいよ、2017年5月8日(月), 9日(火) に「Unite 2017 Tokyo」の開催が迫ってきましたね。

カヤックでも、主にゲーム開発やVR制作などで Unity の需要は高まる一方で、社内では毎週のように Unity 勉強会が開催され、盛り上がりっぱなしです。

そこで、「Unite 2017 Tokyo」で滾った Unity 熱が冷めやらぬ 5月12日(金) に「Unite 2017 Tokyo」に参加された方々がゆるく集まれる「旅する勉強会〜Uniteアフターパーティー編〜」を開催します!

「旅する勉強会〜Uniteアフターパーティー編〜」とは

「Unite 2017 Tokyo」に参加された方々がゆるく集まれるイベントです。

ゲーム開発やVR制作に携わるカヤック社員はもちろん、今回は社外のスペシャルゲストもお呼びしてトークセッションを行いますので、「Unite 2017 Tokyo」に参加されていない方もお気軽にご参加ください!

開催場所・日時

2017年5月12日(金) 19:30 〜 21:00
デジタルハリウッド大学院 E01-02教室

タイムテーブル

時間 登壇者 内容
19:30 - オープニングトーク
19:35 面白法人カヤック 平山 尚 コンソールのゲーム開発者が本気でUnityを使った話(仮)
20:00 比留間 和也 VRの話(仮)
20:25 面白法人カヤック 原 真人 Uniteで見えたVRのこれから(仮)
20:50 マッドネスラボ 時村 良平 3年ほどビジュアルノベルツール「宴」を開発してみてのあれこれ
21:15 - クロージングトーク
  • セッションの内容や順番、スピーカーは変更になる場合があります。

参加受付・その他詳細について

イベントの参加は connpass で受け付けていますので、参加希望の方は下記のイベントページから参加申込をお願いします。 また、その他のイベント詳細や更新情報も下記のイベントページから御覧ください。

connpass.com

旅する勉強会とは

旅する勉強会とは、カヤックで開催している他社様やクリエイターとの合同勉強会です。

カヤックに出張してきて欲しいという企業様やカヤックの"ヨコハマ展望台"支社まで遊びにいってもいいよ!という企業様がいらっしゃいましたら、是非お気軽に @fjt_dentyu or 最寄りのカヤック社員にお声がけください。

関連記事

techblog.kayac.com

techblog.kayac.com

React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする

こんにちは。カヤックのReactおじさんこと島津です。

最近はVue.jsにも浮気し始めましたが、Reactについての記事を書きます。

Reactのコンポーネントが増えてきて管理が大変

Reactを使うとコンポーネントの部品化が捗りますが、 開発規模が大きくなってくるとその数も増えてきて管理が大変になってきます。

スタイルガイドを導入

スタイルガイドとは、UIパーツの用例と実表示例をまとめたドキュメントのことです。 これがあるとパーツの再利用性が高まります。 例:Codepenのスタイルガイド

人力で手書きしていっても良いのですが、更新が追いつかなかったりするので自動生成する仕組み化ができるツールを使いましょう。 代表的なものとしては、CSSのコメントからドキュメントを自動生成してくれるkss-node などがあります。

今回はCSSだけではなく、Reactのコンポーネント単位でドキュメントを自動生成してくれる、 react-styleguidist というツールを利用してみます。

DEMO

https://jshimazu.github.io/styleguidist-example/styleguide/

react-styleguidist下準備

設定はリポジトリのREADMEを参照ください。

styleguidist/react-styleguidist

スタイルガイド用のサーバーを起動します。

npm run styleguide

デフォルトだと http://localhost:6060 でスタイルガイドのページが見れます。

今回は以下の構成で、 ジェネレータに対応させるにはReact.Componentクラス1つに対して1つのディレクトリを作成する必要があります。

├── README.md
├── npm-debug.log
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
└── src
    ├── App.js
    ├── components
    │   ├── Button
    │   │   ├── Readme.md
    │   │   ├── index.js
    │   │   └── style.scss
    │   ├── Counter
    │   │   ├── Readme.md
    │   │   ├── index.js
    │   │   └── style.scss
    │   └── Navigation
    │       ├── Readme.md
    │       ├── index.js
    │       ├── logo.svg
    │       ├── menuButton.svg
    │       └── style.scss
    ├── index.css
    └── index.js

Componentの追加

デフォルトでは、ルート配下の全てのReact.Componentモジュールが自動的に読み込まれるようになっています。styleguide.config.jsを追加すれば、ディレクトリの変更は可能です。

ドキュメント内にアンカーリンクができるので「ここはこのコンポーネント使ってね」みたいな連携が捗りそうです。

アンカーリンクの例: https://jshimazu.github.io/styleguidist-example/styleguide/#navigation

PropTypes

PropsTypesを定義していれば、それがそのまま表示されます。

class Counter extends Component {
  static propTypes = {
    /**
     * カウンターの初期値
     */
    defaultCount: PropTypes.number,
  };

オプションとして、上記の様な形でコメントを書くとdescriptionとして表示されます。

Exampleを追記する

Readme.mdにはコードのサンプルを書くと、Exampleとして表示されます。

普通のボタン


 ```

 <Button>Click Me</Button>

 ```


大事なボタン

 ```

 <Button type="primary"\>Click Me\</Button\>

 ```

 危険なボタン

 ```
 <Button type="danger">Click Me</Button>
 ```

運用方法

  • ローカルでは http://localhost:6060 で起動しながら開発(ちゃんとリアルタイムで反映されます)

  • チーム全員が閲覧できるテスト環境などへのデプロイと同時に、npm run styleguide を実行し、静的ファイルにビルドします(デフォルトだとルート直下のstyleguideディレクトリにビルドされます)

  • もしくは、docs/以下にビルドしてコミットする(https://jshimazu.github.io/styleguidist-example/styleguide/

使ってみた所感

Pros

  • 普通にComponentを書いていれば、Readme.mdを追記するだけでそれなりのスタイルガイドが生成できるのが良い。

  • アプリ本体とは独立したタスクランナー(webpack)が走るので、既存のコードにも比較的導入しやすい。

Cons

  • 内部的にはwebpack-dev-serverで動いているので、アプリ本体がwebpack以外のタスクランナーを使用しているときはstyleguide.config.jsに書く設定が冗長になってしまうところ。

まとめ

規模の大きいアプリケーション開発はこういったコンポーネント指向に向かっていく潮流があると思います。(AngularやVue、Web ComponentやPolymer、手法は違えど思想はコンポーネント指向です)

全てが水物のようなフロントエンド界隈ですが、カヤックでは未来のWebフロントエンドを見据えて日々最新技術にチャレンジしていく所存です。