昨年より IT 系のハンズオンをそれなりの回数行ってきて、良かったものから失敗まで様々経験した中で、ノウハウがたまってきましたので、気をつけるべきポイントを 6 つまとめてみたいと思います。

過去のハンズオンで記事にしているものは次の通りです。

- [Web Components ハンズオンをやってみた](/2014/09/web-components)
- [SIer で Node.js 初心者を集めてハンズオンをやってみたという夢のある話](/2013/12/siernodejs)



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/handson1.png)

## 目次`

## 1. ハンズオンとは

> 体験学習を意味する教育用語。ー(中略)ー 本で学ぶだけでなく実際に行った方が学習効果が上がるという考えに基づく。
> [ハンズオン - Wikipedia](http://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%B3%E3%82%BA%E3%82%AA%E3%83%B3)
> 座学だけではなく、実際に手も動かしましょうという育成方法で、実際に手が動かないといけないエンジニアにとっては最適な育成方法だと思います。

座学では習得に時間が掛かるのですが、経験者の指導の元、集団学習の相乗効果もあり、質の良いハンズオンは短時間で効率的なスキルの習得ができると思います。

## 2. ハンズオンの心得

ハンズオンで最も悩ましいことは、ハンズオンが体験をベースにしているため**「当日にならないと分からないことが多い」**ということです。

ハンズオンは生ものです。参加者も初心者から上級者まで混ざって同じハンズオンを行うことになります。発表形式の勉強会・セミナーや、長時間作業するハッカソンのようなイベントとは全く別次元の難しさがあると思った方がいいでしょう。

さらに主催側での現場判断が非常に多いのがハンズオンの特徴です。そのため、成功させるためには用意周到な準備が必要です。

## 3. 成功させるための 6 つのポイント

では、本題。私が考えるハンズオンを成功させるための 6 つのポイントです。

### ポイント 1. ゴールの設定

ゴールの設定で間違いやすいことは「技術の正確さを伝える」ことがゴールとなっているケースです。経験的に、ハンズオンは「今、覚える技術の価値」に重きを置いて、ハンズオンではその**価値を体験させて感じさせることをゴールにするべき**だと思います。
これはハンズオンを受けた参加者の満足度に最も関わってくるポイントだと思うのですが、後日、参加者が自主的に考えて不足分を学習するように仕向けられるのが理想です。その楽しみをハンズオンで奪ってはいけません。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/handson2.png)

つまり、**魚のつり方ではなく魚を釣ることの価値についてゴールを置くべきです**。

### ポイント 2. 自習型コンテンツ

コンテンツについては**「自習型」「拡張性」**の 2 点です。参加者には様々なレベルがいる事を想定します。特に注意することは**上級者を飽きさせないこと**。上級者が飽きてくると場が白けだします。上級者にはどんどん先に進んでもらって、自分のイマジネーションを膨らませてハンズオンの題材を拡張してもらえるようなコンテンツとなっていることが理想です。

自習型コンテンツはハンズオンに付いて来れなかった人が後日、復習できるためでもあります。また、ハンズオン参加者が後日講師になることも想定しています。

### ポイント 3. タイムキーパー

ハンズオンの章ごとに制限時間があると、**緊張感を保ったままテンポ良く進めることができます**。制限時間があることで、そこまでに内容を終わらせなければなりませんし、周りの状況と比べてることで参加者が自身のレベルを把握しやすくなります。

ただし経験上、講師とタイムキーパーを兼務することは非常に難しいです(中には出来る人がいるようです・・・)。誰か別の人にタイムキーパーを頼んだ方がいいでしょう。講師はタイムキーパーの報告と現場の状況を鑑みて、タイムマネージメントしていく必要があります。

こちらが Web Components ハンズオンを行った際のタイムテーブルです。当日はこれをベースにいろいろ時間のやりくりしてました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/handson3.png)

### ポイント 4. チューター

制限時間に間に合わなかった場合や、講師が手が開かない場合に参加者のフォローを担当してもらいます。チューターがいる事で、安心して(いろいろ切り捨てて)計画された時間通りにハンズオンを進めてることができます。**ハンズオンが途中で時間切れになってしまうほど、後味が悪いものはありません**。講師はより多くの人をゴールまで導くよう努力しなければなりません。

### ポイント 5. 代替え開発(実行)環境

参加者によって PC や実行環境は異なります。PC 固有の事情で実行環境が動作しなかったり、開発が出来なかったりした場合、そのフォローでハンズオン全体の進行が遅れることさえあります。そのため、**万が一のため、クラウドやブラウザ上で動作するような代替え環境を準備しておく**といいでしょう。

フロントエンド開発のハンズオンでは「[Cloud9](https://c9.io/)」がおススメです。

### ポイント 6. 成果発表会

作ったものは何かしら発表する機会があった方がいいです。その方が参加者同士の刺激になります。講師側も見てて楽しいです。

##︎ 4. 課題

一番の課題は 0 からコンテンツを作る場合のコストです。

ハンズオンの内容にもよるのですが、必ずしもコンテンツを作る必要はなく、海外の Blog とかチュートリアルなどをコンテンツとして利用してみるのもいいと思います。

## 5. まとめ

ハンズオンを成功させるためのポイントについてまとまったものが無かったので、私が考えるハンズオンを成功させるためのポイントを 6 つまとめてみました。

1.  ゴールの設定
2.  自習型コンテンツ
3.  タイムキーパー
4.  チューター
5.  代替え環境
6.  成果発表会

成功のさせるには「ゴールの設定」が最も大事なのですが、現場をうまく回すためには「タイムキーパー」と「チューター」が地味に大事だと思います。

いかがでしたでしょうか。

## 番外

### a. 場を作る

ハンズオンの会場の制約などあって必ずしも出来る訳ではないのですが、「場」というものを常に意識して会場の設営などやってます。こちらのスライドに良くまとまっています。

[夏サミ B5「そろそろ社内研修を活かしませんか？」](https://www.slideshare.net/gaoryu/20130801-devsumi)

IT系ハンズオンを成功させるための6つのポイント

2014/09/09 に美人で有名なおだんみつさんのいる[21cafe](http://www.ni-ichicafe.com/)で「[エンタープライヤーのための Web Components ハンズオン](https://atnd.org/events/55761)」を開催しました。内容は「Web 名刺」を Web Components で作るというものです。

Web Components についての解説記事はそこそこ出てきましたが、ハンズオンだと国内初の試みかと思います。それなりに難しい技術に関するハンズオンでしたが、なかなか好評だったようですので少し振り返ってみます。



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson1.png)

## 目次

## Web Components とは

UI 部品がコンポーネント化して再利用しやすくすることが出来る技術です。詳細は Google のえーじさんが[なぜ Web Components はウェブ開発に革命を起こすのか](http://blog.agektmr.com/2014/05/web-components.html)で書いている記事が分かりやすいかと思います。とにかく将来の Web 開発に革命を起こすと言われる技術です。

## 苦労したポイント

2 時間のハンズオンコースですので、その限られた時間内で結果を出さなければなりません。
今回苦労したポイントは 2 つです。

1.  Web Components のメリットを感じつつ、作ってて面白く、参加者が本気になる題材はなにか。
2.  Web Components の複雑に絡み合った仕様を最短で理解してもらうためには、どうすればいいか。

「題材」については自分のカスタムタグが作れて気軽に配布できると嬉しい「Web 名刺」にしました。
最短で理解してもらうための構成とコンテンツ作りには難儀しましたが、Web Components のコンセプトについては「花の種」を例えて、コンテンツの方は、講師がいなくても出来るように[Github](https://github.com/html5bizj/x-business-card)上に作りました。
(Github のコンテンツについてはかなり試行錯誤して悩んだのは事実です。)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson2.png)

> [エンタープライズな@mitsuruog さんならではの「Web Components は花の種で理解しよう」論いいねっ ∩( ・ω・)∩ ](https://twitter.com/21cafe_shibuya/status/509291557111885825)

参加者からは嬉しい反応もいただけたので、なかなかハンズオンとしては成功だったようです。主催としてはホッとしています。

こちらが当日の様子です。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson3.jpg)

> [ 昨日は WebComponents ハンズオンありがとうございました。信じがたいことにあの 2 時間だけでかなり自在に WebComponent が書けるようになりました。(^^;;;](https://twitter.com/shunjikonishi/status/509540957809692672)

> [Web Components すごい](https://twitter.com/ab_lave/status/509320071731109888)

発表資料はこちらです。

[エンタープライヤーのための Web Components ハンズオン](https://www.slideshare.net/mitsuruogawa33/webcompoents)

ハンズオンの内容についてはこちらにあります。

[html5bizj/x-business-card](https://github.com/html5bizj/x-business-card)

## 成功したポイント

成功したポイントはいくつかあるのですが、簡単に言うと[@kara_d さん](https://twitter.com/kara_d)のこの一言、「企画」なのかなと思います。

> [今日は html5 えんぷら部にて web components ハンズオンに参加〜 名刺を作るって企画いいなあ。](https://twitter.com/kara_d/status/509314331154980864)

「企画」が最も大事なのは事実なのですが、裏でハンズオンを成功させるための運営的な小細工をいろいろやっていたので、機会があったらノウハウまとめたいと思います。

## さいごに

今回、[エンタープライヤーのための Web Components ハンズオン](https://atnd.org/events/55761)を開催しました。2 時間で参加者が満足できるハンズオンができるか不安でしたが、なんとか成功させることができたようです。

お忙しい中、参加していただいた皆さんありがとうございました。チューターの[@albatrosary さん](https://twitter.com/albatrosary)、[@can_i_do_web](https://twitter.com/can_i_do_web)さんありがとう！あなた達のフォローがなかったら成功しなかったです。会場提供の[21cafe](http://www.ni-ichicafe.com/)さんもありがとうございました。

作成した Web 名刺

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson4.jpg)

最後は参加者で記念撮影

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson5.jpg)

Web Components ハンズオンをやってみた

「Node.js って何それ。おいしいの？」
「それってお金になるの？」
そんな SIer の社内で業後に有志を集めて Node.js のハンズオンをやってみたという、夢のある話を少しします。



1.  教材について
2.  メンバー構成
3.  ハンズオンやってみた感想とか
4.  まとめ

## 1. 教材について

はじめに、教材の利用とリポジトリの Fork 許可してくれた[@yosuke_furukawa](http://twitter.com/yosuke_furukawa)さん、本当にありがとうございました！

本家のリソースはこちらです。

[https://github.com/yosuke-furukawa/node_study](https://github.com/yosuke-furukawa/node_study)

で、私が実際にハンズオンで使用した Fork したものはこちらです。

[https://github.com/mitsuruog/node_study](https://github.com/mitsuruog/node_study)

Fork した方は、以下の点を少し修正を加えています。

- jQuery 依存コードを VanillaJS に置き換え
- デバック関連についてのページを追加

目次については以下の内容となっています。

1.  REPL
2.  Node.js で HelloWorld
3.  Node.js のモジュールの作り方
4.  NPM でのモジュール探訪
5.  Express 環境構築
6.  Express 入門
7.  Socket.io 入門

Node.js の基礎から Express ＋ socket.io をつかった websocket のリアルタイム chat 作成まで網羅されていて、一通り Node.js の楽しさについて学べると思います。

個人的には、Node.js のモジュールの作り方、EventEmitter の使い方など、Node.js のコアとなる考え方について、丁寧に解説されていたことが採用の決め手となりました。

## 2. メンバー構成</span></u>

さて、肝心なハンズオンのメンバー構成は、講師役の私を含めて９名。

うちチューター役が１名の構成でした。

メンバーのほとんどは Javascript の経験がなく（中にはコード書かないマネージャもいたりして w）、エディタも windows のテキストエディタで行うといったような、開始前はゴールできるのか正直不安でした。

## 3. ハンズオンやってみた感想</span></u>

で、やってみた結果、19:30 から開始して３時間後の 22:30 に無事終了しました。

2 名を除いて完走することができました。

Websocket のチャットをやっていた終盤は、あちこちで「動いたー」「おーすげー」と少しお祭り騒ぎとなって、プログラムを作って動かす楽しさを体験できたかなと思います。普段、コードを書いていない SIer のエンジニアにとってはいろんな意味で新鮮だったと思います。

自分も初めて Node.js 触って悪戦苦闘していた頃を思い出したりして、教えている方も楽しかったですね。

## 4.まとめ

後日メンバーにアンケートに協力してもらったのですが、結構評判良かったです。
社外でもこの手のハンズオンは結構あるのですが、同じ社内ということもあり、分からない部分について質問しやすい環境だったと思います。
自分でやったときは、周りに Node 詳しい人皆無だったので、夜こつこつやって 1 週間くらい掛かったかと思います。やっぱり知っている人に教えてもらいながらの方が、学習効率はいいですね。

この教材であれば、初心者でも講師さえいれば 3 時間でゴールできますので、どんどん活用してみてください。

Tag: ハンズオン

IT系ハンズオンを成功させるための6つのポイント

Web Components ハンズオンをやってみた

SIerでNode.js初心者を集めてハンズオンをやってみたという夢のある話