Reactのハンズオンを開催しました。kfug.jp今回のハンズオンではReactアプリケーションの開発を身体で覚えるReact開発環境におけるトレンドを体験するの2つを目標に、Next.jsを利用した簡単なReactアプリを作成しました。この記事では、ハンズオン開催にあたって考えたことや、工夫した点などについて書いていきます。感想ハンズオンの方向性2月半ばにハンズオン講師のお誘いがあり、引き受ける事にしたものの、どのようなテーマにするかしばらく悩んでいました。ハンズオンの時間は60分です。Reactのメリットについてひたすら説明しても良いけど、60分でどれだけ伝えられるかわかりません。参加者層を想定し、それからテーマを考えることにしました。CONFERENCEに参加した際、東京のエンジニア向けカンファレンスとは参加者層が異なると感じました。全体的に、デザイナーやコーダーといった、エンジニア以外の職種の人が多い傾向にあります。同じエンジニアでも、受託系のWeb制作会社やフリーランスの方が多いイメージです。Reactの非常に強いコンポーネント指向は、大規模なWebアプリや寿命の長いWebサービスにおいて、コードの保守性を高め、長期的な開発コストを抑えられます。いわゆるMVCフレームワークの経験のない人にとっては、設計上の利点が実感しづらくもあります。Reactを使う以上、参加者にはコンポーネント指向の利点を体感してもらいたいです。ハンズオンでは、60分で未経験者にReactアプリケーションを完成させてもらう必要があります。そのため、Reactの概念や設計について時間をかけて説明するよりも、実際に手を動かすことで自然にコンポーネント開発を体験してもらう、という方向にしました。Next.jsを採用github.comNext.jsはReactで簡単なSPAを開発するためのフレームワークです。作成する所から始まります。HTMLファイルをpublicディレクトリに配置するような感覚で開発でき、初めてSPAを開発するときに躓きがちなポイントを回避できます。JS用のツールが組み込まれていたりと、Reactコミュニティで流行している技術を簡単に体験できるようになっています。ハンズオンの流れハンズオンは8つのステップに分かれていますが、学習内容としては4段階に分類できます。状態管理を学ぶまずはページを作成し、Reactコンポーネントの作り方とNext.jsの基本を覚えます。Componentで作成するようにしました。これにより、参加者は一般的なテンプレートエンジンと同様の機能をReactで実現できるようになります。JSで定義するようにしました。他の方法よりも強いコンポーネント指向を体験でき、Reactコミュニティの流行についても触れることができるからです。最後に状態管理について学びます。コンポーネントをまたいだ状態管理が必要なアプリを作ることで、「状態の管理は親コンポーネントで一元的に行なう」「末端のコンポーネントは状態を管理しない」というコンポーネント指向を身に着けます。スライド作成という順序で行ないました。https://speakerdeck.com/fand/reactdexue-bu-imadokifalsewebkai-faこれらの準備において工夫した点について説明します。し、少しずつ実装を進めるという流れで行ないます。ブランチの構成は以下のようになっています。ブランチにお手本を作り、ステップに対応したタグを登録しました。ようにすることでキャッチアップできるようになっています。スライドにはステップ毎に画面のスクリーンショットを載せ、上手く行っているか確認できるようにしました。Requestを作る事で、各ステップで必要な変更内容を一覧できます。教科書には各ステップのdiffを掲載し、編集する内容が正確にわかるようにしました。diff形式に馴染みのない方も多いはずなので、ハンズオンの冒頭でdiff形式について解説しています。installが終わらない〜〜」というやつです。installはただでさえ時間がかかりがちですが、皆で一斉に実行すると会場のネットワークに負荷がかかり、余計に時間がかかってしまいます。今回は、自己紹介より前にセットアップを行なうことで、この問題を回避しようとしました。本番では開始時間5分前には皆着席していたので、更に時間が稼げてよかったです。前日にTwitterで事前準備をお願いしたりもしました。ダウンロード」と説明しています。できない事を忘れていました......。ステップ毎にzipを用意しておくと良かったかも。お手本ブランチ作るのしんどい......きれいなコミットログを作るため、developブランチを作る前に別ブランチで試行錯誤し、developブランチで清書したのですが、それでも後から修正箇所が沢山見つかりました。移行のコミットにタグを打ち直すなんかもっと効率いい方法見つけたいですね......皆様の反応ハンズオンreact一瞬で席埋まった。2017年3月18日twitter.com行ってきた。時間被りで聞けなかったモノとかもぐもぐ用にリツイート。Reactハンズオン楽しかった。Angularもこの機会に。資料わかりやすかった。その一方で、Web開発ってずいぶんハードルが上がってしまったんだなあという気もしないでもない。極端な話、Reactコンポーネントの書き方しか知らない人でもWebアプリが作れるので、HTMLベタ書きの時代よりも複雑ということは無いと思います。Node.jsが動かないとデプロイできないという問題はありますが、Next.jsの次のバージョンでは静的ファイルへのエクスポートも出来るようになるらしいので、楽しみです。React.jsをこれから始めようという人に最適なハンズオン形式のスライド資料。2017年3月21日twitter.comreactやらんとなぁと思いつつ、積極的に使っていく理由があんまり見つからないんだよなぁ。2017年3月20日twitter.com動的な要素の少ないWebサイトでは、Reactのメリットは想像しづらいかもしれませんね。それでも、コンポーネント指向のおかげでパーツの再利用が容易だったり、テストしやすい、モダンな開発環境が整備されている、といったメリットはあると思います。感想ハンズオン講師は初めての経験でしたが、多くの方が完走できたようで良かったです。開催するとしたら、今度はもっとシュシュッと準備できるといいな。今年2月からScalaのチームに異動し、Scala入門...2017-03-31ハンズオンを円滑に進めるテク新人教育の時期ですね。法然院でVJした過去記事スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。