FRONTEND CONFERENCE 2017でReactハンズオンを開催しました

speakerdeck.com

2017-03-18 (土) 梅田で開催された FRONTEND CONFERENCE 2017 で、Reactのハンズオンを開催しました。

kfug.jp

今回のハンズオンでは

  • Reactアプリケーションの開発を身体で覚える
  • React開発環境におけるトレンドを体験する

の2つを目標に、Next.jsを利用した簡単なReactアプリを作成しました。

この記事では、ハンズオン開催にあたって考えたことや、工夫した点などについて書いていきます。

ハンズオンの方向性

2月半ばにハンズオン講師のお誘いがあり、引き受ける事にしたものの、どのようなテーマにするかしばらく悩んでいました。
ハンズオンの時間は60分です。
Reactのメリットについてひたすら説明しても良いけど、60分でどれだけ伝えられるかわかりません。
まずは参加者層を想定し、それからテーマを考えることにしました。

昨年のFRONTEND CONFERENCEに参加した際、東京のエンジニア向けカンファレンスとは参加者層が異なると感じました。
全体的に、デザイナーやコーダーといった、エンジニア以外の職種の人が多い傾向にあります。
同じエンジニアでも、受託系のWeb制作会社やフリーランスの方が多いイメージです。

Reactの非常に強いコンポーネント指向は、大規模なWebアプリや寿命の長いWebサービスにおいて、コードの保守性を高め、長期的な開発コストを抑えられます。
しかし、いわゆるMVCフレームワークの経験のない人にとっては、設計上の利点が実感しづらくもあります。

Reactを使う以上、参加者にはコンポーネント指向の利点を体感してもらいたいです。
しかし、ハンズオンでは、60分で未経験者にReactアプリケーションを完成させてもらう必要があります。
そのため、Reactの概念や設計について時間をかけて説明するよりも、実際に手を動かすことで自然にコンポーネント開発を体験してもらう、という方向にしました。

Next.jsを採用

github.com

Next.jsはReactで簡単なSPAを開発するためのフレームワークです。
Next.jsでの開発は、ページに対応するJSファイルを pages/ に作成する所から始まります。
まるでHTMLファイルをpublicディレクトリに配置するような感覚で開発でき、初めてSPAを開発するときに躓きがちなポイントを回避できます。
また、最初からServer-Side Renderingが有効になっていたり、CSS in JS用のツールが組み込まれていたりと、Reactコミュニティで流行している技術を簡単に体験できるようになっています。

ハンズオンの流れ

ハンズオンは8つのステップに分かれていますが、学習内容としては4段階に分類できます。

まずはページを作成し、Reactコンポーネントの作り方とNext.jsの基本を覚えます。
初見時のシンプルさを重視し、コンポーネントはStateless Functional Componentで作成するようにしました。

次に、共有コンポーネントを作成し、import や props について学びます。
これにより、参加者は一般的なテンプレートエンジンと同様の機能をReactで実現できるようになります。

スタイルはCSS in JSで定義するようにしました。
他の方法よりも強いコンポーネント指向を体験でき、Reactコミュニティの流行についても触れることができるからです。

最後に状態管理について学びます。
コンポーネントをまたいだ状態管理が必要なアプリを作ることで、「状態の管理は親コンポーネントで一元的に行なう」「末端のコンポーネントは状態を管理しない」というコンポーネント指向を身に着けます。

工夫した点

ハンズオンの準備は、リポジトリ作成、教科書作成、そしてスライド作成という順序で行ないました。

これらの準備において工夫した点について説明します。

お手本ブランチを用意する

ハンズオンは、教科書リポジトリを手元に git clone し、少しずつ実装を進めるという流れで行ないます。
ブランチの構成は以下のようになっています。

f:id:amagitakayosi:20170324175624p:plain

develop ブランチにお手本を作り、ステップに対応したタグを登録しました。
これにより、参加者がどこかで詰まったとしても、 git checkout step-4 のようにすることでキャッチアップできるようになっています。

スライドにはステップ毎に画面のスクリーンショットを載せ、上手く行っているか確認できるようにしました。

コード修正の指示をdiff形式で書く

developブランチからPull Requestを作る事で、各ステップで必要な変更内容を一覧できます。
教科書には各ステップのdiffを掲載し、編集する内容が正確にわかるようにしました。

f:id:amagitakayosi:20170324175516p:plain

diff形式に馴染みのない方も多いはずなので、ハンズオンの冒頭でdiff形式について解説しています。

自己紹介よりも前にセットアップをお願いする

ハンズオンで良くあるのが「npm installが終わらない〜〜」というやつです。
git cloneやnpm installはただでさえ時間がかかりがちですが、皆で一斉に実行すると会場のネットワークに負荷がかかり、余計に時間がかかってしまいます。

今回は、自己紹介より前にセットアップを行なうことで、この問題を回避しようとしました。

f:id:amagitakayosi:20170324175541p:plain

本番では開始時間5分前には皆着席していたので、更に時間が稼げてよかったです。
前日にTwitterで事前準備をお願いしたりもしました。

https://twitter.com/amagitakayosi/status/842633938275254272

反省した点

gitが手元にない人は git checkout できない

参加者にはgitを利用していない方もいると思い、レポジトリclone時には「git clone または zip でダウンロード」と説明しています。
しかし、実装でつまづいた時に git checkout できない事を忘れていました……。

ステップ毎にzipを用意しておくと良かったかも。

お手本ブランチ作るのしんどい……

きれいなコミットログを作るため、developブランチを作る前に別ブランチで試行錯誤し、developブランチで清書したのですが、それでも後から修正箇所が沢山見つかりました。
git commit --fixup git rebase git push -f を活用し、無理矢理きれいなコミットログに仕上げたのですが、これが大変だった……😇

  • 過去のコミット foo12345 に間違いが見つかる
  • git commit --fixup=foo12345 && git rebase autosquash HEAD~n
  • git push -f
  • foo12345 移行のコミットにタグを打ち直す

なんかもっと効率いい方法見つけたいですね……

皆様の反応

ハンズオン

twitter.com twitter.com twitter.com

やっぱちょっと速かったかな🙇🙇🙇

資料

twitter.com 極端な話、Reactコンポーネントの書き方しか知らない人でもWebアプリが作れるので、HTMLベタ書きの時代よりも複雑ということは無いと思います。
Node.jsが動かないとデプロイできないという問題はありますが、Next.jsの次のバージョンでは静的ファイルへのエクスポートも出来るようになるらしいので、楽しみです。

twitter.com twitter.com

動的な要素の少ないWebサイトでは、Reactのメリットは想像しづらいかもしれませんね。
それでも、コンポーネント指向のおかげでパーツの再利用が容易だったり、テストしやすい、モダンな開発環境が整備されている、といったメリットはあると思います。

感想

ハンズオン講師は初めての経験でしたが、多くの方が完走できたようで良かったです。 もしまた開催するとしたら、今度はもっとシュシュッと準備できるといいな。

参加者の皆様、お誘い頂いた id:potato4d さん並びに運営の皆様、ありがとうございました！

Atomのはてな記法モードを作ったよ！！

https://cloud.githubusercontent.com/assets/1403842/23390963/93f9712a-fdb4-11e6-82c3-67798c57e2f6.png

atom.io

はてなブログやはてなグループ、増田に投稿する時に便利です。
どうぞご利用ください。

もくじ

機能

はてな記法をシンタックスハイライトしてくれる

こんな感じ

https://cloud.githubusercontent.com/assets/1403842/23390963/93f9712a-fdb4-11e6-82c3-67798c57e2f6.png

Markdown文字列をはてな記法に変換できる

md2hatenaを利用した変換機能です。

language-hatena をインストールすると、Language Hatena: Convert Markdown To Hatena Syntax というコマンドが使えるようになります。
文字列を選択し、Cmd + P でコマンドパレットを表示して、 hatena とか打ち込んだら出てきます。
何も選択されていないときはファイル全体を変換します。

https://cloud.githubusercontent.com/assets/1403842/23490546/8d97a4bc-ff3c-11e6-8514-20af7e062710.gif

便利〜〜〜〜！！！！

スニペット使える

よく使うスニペットをいくつか定義しています。

f:id:amagitakayosi:20170304095644g:plain

現在使えるスニペットは以下のとおり。

  • code: スーパーpre記法
  • inlineCode: <code></code> を出力する。文中にコードを書きたい時に。
  • table: 表組み記法
  • image: [(画像URL):image] を出力する (http記法) 。
  • comment: <!-- --> を出力する

インストール方法

AtomのInstall Packages画面で検索してインストールしましょう。

f:id:amagitakayosi:20170304095022p:plain

もちろん apm でもインストールできます。

apm install language-atom

Atomで新しい言語のモードを作る方法

ここからは、Atomで新言語に対応するパッケージを開発する方法を解説します！

基礎知識

Atomの language-*** の作り方、公式ドキュメントにはまとまった情報がありません。
今回得た情報を要約するとこんな感じです。

言語モードはAtomのpackageとして開発する

Atomでは、ほぼ全ての機能がpackageとして実装されています。
言語の解釈は language-*** といった名前のpackageで行ないます。
これを language package と呼びます。

言語のパースは正規表現で行なう

language packageは正規表現を羅列した Grammar ファイルを持ちます。
これはTextmateで使われていたGrammarファイルと似た形式になっています。

TextmateはmacOS向けのテキストエディタです。
日本では殆ど使われていませんが、英語圏ではGUIでつかえる入門向けエディターとして、かつて人気を博していました。

github.com

Textmateでは、言語のパースは正規表現で行われていました。
Grammarファイルに記法ごとの正規表現を記述し、文字列を keyword や string といったトークンに分解していました。

Atomでは、Textmateとよく似たGrammarファイルを利用して言語のパースを行ないます。
TextmateのGrammarファイルは XML 形式でしたが、Atomでは CSON 形式で記述します。

また、Atomのパッケージ管理ツール apm には、TextmateのGrammarファイルをAtomの形式に変換する機能が存在します。
Atomのlanguage packageの多くは、この変換機能を利用して作成されたようです。

Converting from TextMate

というわけで、language packageは正規表現をこねくり回して作ることになります。

実際の手順

今回の開発は、次の手順で行ないました。

  • apm init -l で雛形を作る
  • apm link して手元のAtomにインストール
  • grammars/ にGrammarファイルを書く
  • snippets/ にスニペットを追加
  • settings/ を編集
  • apm publish

色々と適当ですが、順番に解説していきます。

apm init -l で雛形を作る

apm はAtomのパッケージ管理ツールですが、新たにパッケージを開発するためのテンプレート機能が存在します。
apm init --language (または-l) を実行すると、language packageの雛形が作成されます。

$ apm init -l hatena
$ tree language-hatena
language-hatena
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── grammars
│   └── hatena.cson
├── package.json
├── settings
│   └── language-hatena.cson
└── snippets
    └── language-hatena.cson

3 directories, 7 files

apm link を実行すると、開発中のパッケージを手元のAtomにインストールできます（apm unlink で解除）。

$ cd language-hatena
$ apm link
/Users/amagitakayosi/.atom/packages/language-hatena -> /Users/amagitakayosi/language-hatena

Window: Reload コマンドでAtomをリロードすると、選択できる言語のリストに新しい言語が追加されたのが確認できるはずです。

grammars/ にGrammarファイルを書く

早速Grammarファイルを書いていきます。

Grammarファイルの書き方は複雑なので、いきなりまっさらな状態から書き始めるのはオススメしません。
既存のlanguage packageからよく似た言語をのGrammarファイルを元に書くことをオススメします。
はてな記法の構造はMarkdownとよく似ているため、今回は laguage-gfm のGrammarファイルを参考にしました。

Grammarファイルは以下のように書きます。

'scopeName': 'source.hatena'  # 言語の識別子
'name': 'Hatena Syntax'  # 言語の名前。言語セレクターとかで出てくる
'fileTypes': [  # 拡張子
  'hatena'
  'h'
]
'patterns': [  # 記法/トークンに対応する正規表現を書いていく
  {
    'match': '^[\\+\\-]+'  # 正規表現
    'name': 'markup.list.hatena'  # クラス
  }
]

patternsには、記法/トークンに対応するパターンオブジェクトを書いていきます。
ここでは リスト記法 に対応するパターンを記述しました。
name には、 match の正規表現にマッチした文字列にあてるクラス名を指定します。

ご存知のとおり、Atomではエディター内のすべての要素がHTMLとCSSで出来ています。
シンタックスハイライト機能は、language packageがHTML要素にクラスを与え、テーマのpackageがスタイルを当てる、という仕組みで実現されています。
name で指定した文字列は . で分割され、コードを表現するHTML要素のクラスに設定されます。

今回の場合だと、以下の文字列は

- foo
- bar

次のようなHTMLに変換されます（簡略化してあります）。

<span class="markup list hatena">-</span> foo
<span class="markup list hatena">-</span> bar

パターンオブジェクトには、 match name の他にも begin end captures などのプロパティを指定できます。
それらの使い方については、実際のGrammerファイルを見たほうが速いでしょう。
https://github.com/atom/language-gfm/blob/master/grammars/gfm.cson

Grammarファイルの開発は、次のような手順で進めました。

1. patternsにパターンを一つ追加する
2. Window: Reload コマンド（Cmd + Alt + Shift + L）でAtomをリロード
3. おかしい所を直す
4. 2.3.を繰り返して、直ったら git commit

snippets/ にスニペットを追加

スニペットの追加は、普段 ~/.atom/snippets.cson を書くのと全く同じ方法で行えます。
めっちゃ簡単だし日本語情報も沢山あるので割愛。

Snippets

settings/ を編集

Atomでは Cmd + / で文字列をコメントアウトできますが、そのためには settings にコメントの記法を追加する必要があります。
language-hatena の場合はこんな感じ。

'.source.hatena':
  'editor':
    'softWrap': true
    'commentStart': '<!-- '
    'commentEnd': ' -->'
GitHubにpush

Atomパッケージを公開するには、GitHubにレポジトリを公開する必要があります。
レポジトリを作成したら git push して、 package.json に repository フィールドを追加してください。

{
  "name": "language-hatena",
  "version": "0.0.0",
  "description": "Syntax highlighting and snippets for Hatena Syntax (?????).",
  "repository": "https://github.com/fand/language-hatena",
  "license": "MIT",
  "engines": { "atom": ">=1.0.0 <2.0.0" }
}
apm publish

いよいよ公開です！
apm publish するとパッケージが atom.io に登録され、パッケージマネージャーからインストールできるようになります。

f:id:amagitakayosi:20170304095119p:plain

公開成功です！！！！

apm publish [更新の単位] を実行すると、パッケージのバージョン更新、gitのタグ作成、Atomへの公開まで apm が自動でやってくれます。
今回は更新の単位に minor を指定したので、バージョンは 0.0.0 から 0.1.0 に更新されました。

公開したら、実際にインストールできるか試してみましょう。
apm unlink で手元のパッケージをアンインストールし、Atomをリロードします。
Install Packages画面で検索すると、公開したパッケージが見つかるはずです。

f:id:amagitakayosi:20170304095022p:plain

お疲れ様でした！！！！🎉🎉🎉🎉🎉

参考リンク