blog @arfyasu

プログラミングとか趣味のこととか

「はじめて講師を頼まれたら読む本」を読んで

書評 講師

はじめに

今月末から、とある企業の新人研修としてプログラムとインフラのサブ講師をすることにななりました。

サブ講師とはいえ、10年以上前に社内の新人研修をしたことと1日講師をした経験くらいしかない私が、受講者約50名ほどのクラスを担当させて頂けることになったのですが、不安やプレッシャーが半端ありません。

サブ講師なので、教鞭を執ることはないのですが、夢でうなされるほど緊張していますｗ

そんなわけで、研修のための心構えとして本を読んでみました。

はじめて講師を頼まれたら読む本

はじめて講師を頼まれたら読む本

はじめて講師を頼まれたら読む本

本の概要

著者は、元吉本興業のマネージャで、横山やすしさんや漫才コンビ宮川大助・花子を担当されていた大谷由里子さん。
その後、年間300回以上の講師とをされる人気講師となりました。
その著者ノウハウが詰まった本です。

YouTube に動画がアップされているのですが、とてもパワフルな方です。


【KO-EN】幸せになれるココロの元気の作り方 / 大谷由里子

一言感想

動画を見てから本を読んだことで、実際に教えてもらいながら本を読み進めることができたのは良かったと思います。

講師をやる上での心構えから具体的なノウハウ。
困ったことへの対処法などがまとめられていました。

今でこそ人気講師ですが、最初から全てうまく出来たわけではなく、受講者のことを考え、たくさん失敗して工夫してきたことでこのような人気講師になられたんだなというのが、本を読んで伝わってきました。

メモ書き

以下、読んを読んでのメモ書きです。

  • 目的や志をもつ
    何をメッセージとして伝えたいかをしっかりと考えることが大事

  • 自分を棚卸して、事件とその時考えたことをまとめる
    ネタになりそうな話を5分程度にまとめ、話せるように練習をする
    この話をたくさんストックしておくと、講演時間が短くなったり長くなった時に調整しやすい

  • 具体的な話、興味を持つ話を用意する
    失敗体験は共感を生む
    これなら自分にもできそうと感じてもらう工夫が大事
    成功体験は自慢にならないよう、抽象的な話を具体的なスキルに落とし込んで話すなど

  • 伝えるのではなく、伝わるようにする
    どうしたら伝わるか考える

  • 講演のゴールを決める
    講演が終わった後、受講者にどうなってほしいか
    どういう声をかけてもらいたいか

  • 寝かせるのは講師の責任
    寝てしまう理由を聞き解決するにはどうしたらよいか考える

  • 最初の3分が大事
    そこで何らかの行動を起こさせることに成功すればオーケー
    自撮りして客観的にその3分で心を奪われるかチェックする
    自撮りは大事なので絶対にやるべき

  • 楽しそうに話をする
    難しそうに面白くなさそうに話していると、楽しい内容も難しく面白くなくなってしまう

  • 5つのSを意識する
    Story：起承転結
    Simple：簡単に
    Special：ここだけの話
    Speed：メリハリをつける
    Smile：参加者を笑顔にする

  • 健康管理に気をつける
    代役はいないので、健康管理も重要

  • あがるのはしょうがないこととして割り切る
    大谷さんでも緊張したりあがったりするんだなと思って安心した
    そのような緊張とどう付き合い楽しんでいけるか

  • どこを見て話すか
    熱心に相槌を打ってくれる人を探す
    そんな人を前方、後方、真ん中と色んなところに見つけ、満遍なく見ながら話すと色んな人を見て話していると思われるので良いらしい
    スタッフに協力してもらうことも良い

最後に

  • 何のために講師をするか
  • どのような講師を目指すのか
  • 受講者にどうなって欲しいのか

ということを考え、その目標や理想に近づけるよう考え努力することが大事なんだと、本を通して強く励まされた気がします。

今回の講師ではたくさんの失敗をすると思いますが、それを次に活かせるような経験にしたいと思います。

実際に講師をしてみて、、、 arfyasu.hatenablog.com

はじめて講師を頼まれたら読む本

はじめて講師を頼まれたら読む本

webpack + ESLint + React のスタートテンプレートを作った

JavaScript React

React を webpack と ESLint で開発するためのテンプレートを作ってみました。
何度も同じ環境作るの面倒だったことが主な理由です。

ちょっとしたものを作ったり、勉強するために使う分には、今のところ不自由はありません。
これから勉強しようと思っている人には便利かなと思います。

github.com

今後、便利な設定などがあれば、随時追加していこう。

npm が必要なので、node.js の環境がない人は用意してね。

arfyasu.hatenablog.com

React のコードを ESLint で検証する

React JavaScript

はじめに

相変わらず、TODOアプリを作りながら React の勉強をしています。
JavaScript に lint ツールがあるのを知らずにコーディングしていたのですが、ESLint を使ってみて便利だったので手順をまとめておきます。
eslint.org

これで、

  • セミコロンのつけ忘れ
  • console.log 残したままだった〜

なんていうこととはおさらばです！

f:id:kanz-labs:20160306161732p:plain

環境

OS X 10.10.5
ESLint 2.3.0

ESLintの導入

npm から ESLint をインストールします。

$ npm install --save-dev eslint
$ node_modules/.bin/eslint -v
v2.3.0

設定ファイルの作成方法

ESLint の最大の魅力は、検証項目を自由に設定出来ることです。
逆に、検証項目が多すぎて導入が大変となっては元も子もありません。

初期導入の際は --init を使って設定ファイルを作成するのが簡単です。

$ node_modules/.bin/eslint --init
❯ Answer questions about your style 
  Use a popular style guide 
  Inspect your JavaScript file(s)

コマンドを実行すると、上の3つからいずれかを選択することとなります。

  • Answer questions about your style
    ウィザード形式で作成します。
  • Use a popular style guide
    GoogleやAirBnB等の既存ルールの設定を使用して作成します。

ウィザード形式

ウィザード形式では、以下の質問に答えることで設定ファイルを作成出来ます。
質問内容は中学生でも分かる英語なので、特に説明しなくても問題ないかとｗ

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React Yes
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Double
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON
Installing eslint-plugin-react
Successfully created .eslintrc.json file in /path/to

終了すると、.eslintrc.json が以下の内容で作成されます。

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    },
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "indent": [
      "error",
      4
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "quotes": [
      "error",
      "double"
    ],
    "semi": [
      "error",
      "always"
    ]
  }
}

既存ルール形式

Google や AirBnB、Standard のいずれからを選択します。

? Which style guide do you want to follow? 
  Google 
❯ AirBnB 
  Standard 
? What format do you want your config file to be in? JSON
Installing eslint-config-airbnb
Successfully created .eslintrc.json file in /path/to

AirBnBを選択すると、eslint-config-airbnbがインストールされ、以下の設定ファイルが作成されます。

{
    "extends": "airbnb",
    "plugins": [
        "react"
    ]
}

とてもシンプルです。

AirBnBのコーディング規約は、以下のページに詳しく説明されています。 github.com

extends は基本ルールの設定

設定ファイルに extends の設定があります。

ウィザード形式で作成されたファイルにはeslint:recommendedが指定されています。
これは、ESLint で推奨されているルールを基本として使用することを意味します。

具体的なルールは、下記ページのチェックマークが付いているものが対象となります。 eslint.org

推奨ルールの日本語訳は下記のページにてご確認下さい。
eslint-recommended.md · GitHub

とんでもない量のルールがあることがわかると思います。

基本ルールから変更したいものを rules に追記していきます。
eslint:recommended のルールでは、 console.log はエラーの対象になるので、使用したい場合は以下を rules に追記します。

  "no-console": "off"

React の設定

ウィザード形式で React を使用する選択をした場合、または AirBnB の設定ファイルを使用した場合には、eslint-plugin-reactがインストールされ、設定ファイルに以下が追加されます。

  "plugins": [
    "react"
  ],

途中で追加する場合、手動でプラグインをインストールして上記を設定ファイルに追記します。

$ npm install --save-dev eslint-plugin-react

これで、React のコードについてもルールを追記すればチェックされるようになります。

このプラグインで検証できるルールは Github に記載されています。
https://github.com/yannickcr/eslint-plugin-react

こちらもルールがそれなりにあります。
ESLint と同様、React 用の推奨ルールがあるので最初はそれを使用し、別途個別にルールをカスタマイズしていくのが良いと思います。

推奨設定を利用するためには、設定ファイルの extends にルールを追記します。

  "extends": ["eslint:recommended", "plugin:react/recommended"],

動作確認

以下内容で hello.jsx というファイルを作成します。

import React from "react";
import ReactDOM from "react-dom";

export default class HelloWorld extends React.Component {
    render() {
        return <div class="hoge">Hello World</div>;
    }
}

ReactDOM.render(
    <HelloWorld />, 
    document.getElementById("app")
);

検証を実行してみます。

$ node_modules/.bin/eslint hello.js 

/path/to/hello.js
  6:21  error  Unknown property 'class' found, use 'className' instead  react/no-unknown-property

✖ 1 problem (1 error, 0 warnings)

class なんて属性は無いので、className を使うよう警告が表示されました。

終わりに

  • カンマが余計に付いていたり、付いていなかったり
  • 未使用の変数が残っていたり
  • インデントがずれていたり

という軽いものから、

  • class 属性を使用していたり
  • React の PropTypes の記載が漏れていたり

という、実行してみないと気づかないことや規約に渡って検証を行ってくれるので、かなり便利だと思います。

っていうか、もう lint ツール使わずにコーディングしたくない。

参考

http://qiita.com/mysticatea/items/f523dab04a25f617c87d https://github.com/yannickcr/eslint-plugin-react http://eslint.org/

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発