非エンジニアの新卒にプログラミング研修を行いました

f:id:catatsuy:20140428171910j:plain

今年のピクシブ株式会社には総合職 2 人とデザイナー 2 人が新卒として入社しました．

そんなフレッシュな新卒に新卒エンジニアがプログラミングの基礎を教えろというお達しが出ました．

ということで秋卒業で既に入社していた私（@catatsuy）とアルバイトから入社した 2 人（@geta6/@RooandQoo）の合計 3 人中心でプログラミング初心者向けに研修内容を考えました．

題材

@tarbrick からのリクエストで最終目標は『画像投稿掲示板を作る』ことに決まりました．

方針

今回のプログラミング研修の目的は総合職・デザイナーの人たちをエンジニアにすることではありません．
エンジニアの人たちが普段の業務でどういったツールをどういった流れで使っているのかを学ぶことで，円滑にエンジニアとコミュニケーションを取れるようにすることが目的です．

そこで方針として以下のものを決めました．

全員 Mac 上で開発してもらう
- ssh などをさせずに手元で開発してもらう
  - 初学者にとって ssh は魔法のコマンドに見えてしまうおそれがある
- Windows でやると開発環境構築が最も難しくプログラミングどころではなくなる
デザイナーが苦労しがちな開発環境構築・Git の使い方を盛り込む
- 折角デザイナーも一緒に教えるので今後の業務に活かして欲しい
考えることを減らしたい
- MySQL はサーバーを立てる必要があり，初心者には予想以上に負担が大きいので SQLite で SQL のみを考えてもらう
- Sinatra のディレクトリ構成はあらかじめ用意しておく
- Sublime Text でエディタへの悩みを無くす

今回は総合職に 1 人 Windows を使用している人がいたため会社の Mac を 1 台借りて使用しました．

日程は 1 日 4 時間で，総合職の 2 人に HTML/CSS の基礎を 2 日間，デザイナーの 2 人を混ぜてから画像投稿掲示板を 4 日間で共同開発してもらいました．

HTML/CSS の基礎

最初は総合職の 2 人だけに集まってもらい，HTML/CSS の基礎を教えました．

今回は以下のサイトを使って説明しました

これからWebサイトを制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド

非常にわかりやすい解説で助かりました．

簡単な解説の後に『自己または自分の好きなものを紹介するページをつくる』というテーマで，実際に HTML と CSS を書いてもらいました．

初日に説明をしてから作りはじめてもらい，2 日目に完成させてもらいました．

開発環境構築

ここからは全員で進めることになりました．

今回は全員 Mac でやることができたので xcode-select --install で Command Line Tools を入れて Homebrew を入れてもらいました．

Homebrew は brew doctor と打てば設定などが間違っていたら教えてくれるので全員が間違いなく Homebrew を使える状態であることが容易に確認できます．

Git の使い方

Homebrew が使えるようになったら Git の説明をしました．
Git の解説は株式会社はてなさんが公開されているデザイナー向けの資料がとてもよかったので使用させていただきました．

hatena/Git-for-Designers

今回は CUI 上でのエディタに nano を選択したので git config --global core.editor nano と設定してもらいました．
nano にしたのは使い方が画面に書いてあるので覚えることが一番少ないエディタだと判断したためです．

GitHub で実際にリポジトリを作成して試しに使ってもらいました．
GitHub は新しいリポジトリを作ると設定方法などが表示されるのでとても教えやすくて助かりました．

プログラミングの基礎

プログラミングの基礎を教える前に Perl の作者として著名なラリー・ウォール氏の『プログラマの三大美徳』を紹介しました．

私はプログラマの三大美徳をプログラマにとって必要な素養を端的に表している名言だと思っているのですが，あまりプログラマ以外には知られていない気がするので紹介しました．

そして今回は Ruby と Sinatra を使って Web アプリケーションを作ってもらうので Ruby のインストールをしてもらいました．

Ruby のインストール方法ですが，実際に弊社の業務で使われている方法でインストールしてもらおうと考え，rbenv を使ったインストール方法を紹介しました．
以前弊社のデザイナーが rbenv を使った Ruby のインストールに苦労しているところを見たことがあったため，ここで開発環境を整えておくことで環境構築に余計な時間を取られずに済む，といった効果も期待できました．

Ruby についてはおなじみの Hello, world をやってもらった後に 変数・配列・ハッシュ・if・each を一気に説明しました．
このあたりはどう使うのか実際に体験してもらわないと必要な理由も説明しにくいので，軽く説明してから各自で動かしてもらいました．

この後 Sinatra の説明をしました．

私が作ったディレクトリ構成だけの Sinatra のテンプレートを使って説明しました．

catatsuy/sinatra_simple_template

Sinatra のプログラムは最初に教えたプログラムと違い，サーバーなので終了しないことなどを説明しました．
その後に軽く GET, POST の説明をして，ERB を使えば HTML にプログラミングの要素を組み込めることの説明をしました．

ここまでで Ruby と Sinatra の基礎は終わりです．

SQLite の基礎

次に SQLite の説明をしました．

既に書きましたが，SQLite を選択した理由はサーバーを立てる必要がないので初心者でも扱いやすく，かつ iPhone や Android でも使われており身近に感じてもらえるという点もありました．

SQLite のインタープリターを使い，サンプルとして本を管理する SQL 文などを打ってもらいました．

その後に Gem の sqlite3 を使って Ruby から SQLite のデータを取得できることを説明しました．

これで『投稿データを Sinatra で受け取って SQLite に保存』し，『保存されたデータを Sinatra で表示』すれば簡単な Web アプリケーションを作ることができる，という説明したところ，今までのことが何のためだったのか理解してもらえました．

セキュリティ

ここまで説明してからセキュリティの説明をしました．

今回の研修を受けるのは全員，これからエンジニアになるわけではありません．
教えるかどうかは正直迷ったのですが，今回は画像投稿掲示板というサイトの特性上，教えざるを得ないと判断しました．

今回は超有名な XSS・SQL インジェクション の 2 つを教えました．

案の定 SQL インジェクションを理解するのにかなり苦しんでいる人もいましたので，何度か説明をしながら少しでも伝わるようにしました．

今回の研修の目的はプログラミングができるようになってもらうことではなく，エンジニアとのコミュニケーションを円滑にすることが目的なのであまり深入りはしませんでした．

ここまでを 1 日でやったので教える側も教えている側もかなり疲労しました．

画像投稿掲示板

全員揃ってから 2 日目で 2 人 2 チームに分かれてもらいました．

それで今回の課題である画像投稿掲示板の説明をします．
今回の画像投稿掲示板が満たしてほしい仕様などに実際に使った説明を引用します．

画像投稿掲示板はちゃんと公開されているレベルのものを作るのはとても大変である．

ぱっと思いつくものでも以下のものがありそう．

投稿されたファイルが本当に画像なのか

コンピュータウィルスなどが投稿された場合，脆弱性を使ってサーバー上で実行されたり，ユーザーがダウンロードする恐れがある

大きなサイズの画像を投稿された場合，適当なサイズに変換する必要がある

ピクシブでは画像投稿時にサムネイル画像を生成する

一部のサムネイルはリクエストが来た時にその都度作成していたりもする

今回は初心者でも作れるようにいくつかの割り切りをして満たして欲しい仕様を書いておく．

画像とテキストを投稿できて，投稿内容を表示できるようにするのが最低条件

ログイン機能は付けない

ユーザー名を入力させるかどうかは自由

返信機能は付けなくていい（付けてもいいが，返信の返信…のようなものはキリがないので実装しないこと）

投稿されたファイルの形式は Content Type から確定してよい

Content Type は偽装できるので本来信じてはいけない

投稿できる画像形式は png と jpeg とする

投稿された画像のファイル名は重複しない名前を付けること

投稿された内容からファイル名を取得できるが，そのまま使うと上書きしてしまう可能性があるので工夫する必要がある

一番楽なのは SecureRandom で複雑な乱数を取得してそれをファイル名にする方法だと思う

画像のサイズは CSS で max-width を指定して最大サイズを決めておく

これで大きな画像を投稿されても問題ない

古いブラウザだと使えないが，気にしなくて良い

投稿された内容を全部表示すると投稿が増えた時に時間がかかる

SQL の最後に LIMIT 10 と書いておくと 10 個しか取得しないのでこれを使う

何個表示するかは自由

もっと見るボタンのようなものは付けなくてよい（付けてもよい）