PerlCasual#5でお話しさせて頂きました #perlcasual

Perl

PerlCasual#5で「元タワレコ店員×Perl×Webサービス」というタイトルでトークさせて頂きました。

http://atnd.org/events/37158

話したこと

  • 主に個人でWebサービスを作るときに考えたことと、実際に作ってみた話しと、Perlとの関わりについて話しをさせて頂きました。
  • これまでに考えたことを色々詰め込んだので駆け足な感じの説明になってしまったのですが、Webサービス作るのは意外と簡単に作れて楽しいってことと、アウトプットするとさらに楽しくなるよということが伝わればいいなと思い話をしました。
  • 技術的な部分も一応混ぜてみたつもりなのですが、もっと役に立つ感じの内容にすればよかったかなぁと後で思ったりも。
  • どうやらスピリチュアル属性らしくてそんな話も期待されているのかなと思い、後半はPerlと出会ってどう変わったのかといった話もさせて頂きました。

  • あと、PetatubeでキャッシュはしているもののCoro+Furlで並列にNaverまとめにリクエスト投げてることを怒られないかなと話していて密かにドキドキしてました。

スライド

http://koba04.com/slide/perl-casual-5/

  • スライドはreveal.jsを使っていてソース見てもらえれば分かるのですが、markdownで書いたものをそのまま読み込むことが出来るのでHTMLで書かなくていいので楽でした。（その分レイアウトなどは制限されますが）

参加者として

@yusukebeさんだからこその雰囲気でカジュアルでとても楽しかったですし、会場もオシャレで、横長でスクリーンが２枚あって見やすくてとてもよかったです。

  • @ruik さんの話はWebサービス作り方を丁寧に説明されていてとてもわかり易かったです。
  • @sugyan さんのライブコーディングは一つ一つの操作が早くてスゴかったしとても勉強になりました。あれくらい速くコード書けるようになりたいなと思いました。あとChromeの新しいタブ開くページがとてもカッコよかったです。
  • LTはみなさんとても落ち着いていて上手くて、Perl関係ない話でもとても面白かったです。話をしてなかったのにfujiwaraさんの印象がとても残っていますｗ
  • yappoさんのマジメな例外処理の話もとても参考になり使いたいなと思いました。
  • 金曜に横浜の方にいくと美味しいビールが飲めるみたいなので、副都心線も開通したので行ってみたいですね。


懇親会でもRSSについてなどのガチな話を聞けたり、@maeharin さんなど話してみたかった方と話せたり、@yoshiyuki_kondo さんと話せて、初めてPerlの訳がわかりやすくて読みやすかったですというのを伝えられたり、あっという間でしたがとても楽しかったです。

ありがとうございました

リアクションを見ていて、次回どこかでお話させてもらうことがあれば、Petatubeなど1つのWebサービスを取り上げて、構成する要素をコードをもっと出しながら説明して、どうやって実際に作っているのかといった話が出来ればいいなと思いました。


@dameninngenn さんをはじめ、発表者、関係者、会場を提供して頂いたNHN Japanさんありがとうございました！

SoftwareDesign4月号に執筆させて頂きました

SoftwareDesign 4月号の特集「裏口からのプログラミング入門」に執筆させて頂きました。
雑誌に記事書くのは初めてだったのでわからないこともありましたが、とてもいい経験をさせて頂いて楽しかったです。


Software Design (ソフトウェア デザイン) 2013年 04月号 [雑誌]

Software Design (ソフトウェア デザイン) 2013年 04月号 [雑誌]

http://gihyo.jp/magazine/SD/archive/2013/201304


内容は以前スライドで書いた「プログラミング未経験のタワレコ店員がエンジニアになって思ったこと」を文章にしたような内容になっていて、技術的なことも少しは触れていますが、基本的には自分がタワレコ店員から今まで何を考え、どうやって来たのかを偉そうに書かせて頂きました。
あとは勉強会についてやウェブサービスを作ることについても書いています。

http://d.hatena.ne.jp/koba04/20130113/1358005889




今回は紙面的な都合もあり技術的な内容はあまり書かなかったので、その辺りは3/29のPerlCasualで少し話せればなと思っています。

http://atnd.org/events/37158


他にはyusukebeさんも同じ特集で書いたりしているので、是非読んでみてもらえると嬉しいです！
自分を含めた前半3人がPerlのこと書いているのも面白いですね。

Perlを勉強するときにオススメしたい本

Perl

JavaScript版を書いてみたので調子に乗ってPerl版も書いてみます。
4月からPerl始める人もいるかもしれないですし。(こじつけ)

初めてのPerl 第6版

  • 自分が読んだのは第5版でその時点でも5.10に対応しており、given-whenやスマートマッチなどについてもしっかり載っていたのですが、この第6版ではさらに5.14に対応していて、モダンな書き方になっていたりPath::Classなど新しいモジュールや付録としてUnicode入門があったりと、古さを感じない内容になっていてその点も素晴らしいなと思います。
  • この変数や関数、正規表現、文字列操作、ファイル操作などからシグナルの処理、便利なモジュールの紹介までPerlの基本的な部分がしっかりと紹介されていて、一冊目としては文句なしにオススメ出来る本だと思います。
  • サンプルコードが短いのもわかりやすくていいですし、練習問題も小粒なのでやろうという気持ちになれました。
  • 近藤さんの訳もとてもわかりやすくて、技術書読むのって面白いなというきっかけとなった一冊でもあります。


http://www.oreilly.co.jp/books/9784873115672/



続・初めてのPerl 改訂版

  • 名前の通り初めてのPerlの次に読む本になっていて、こちらもわかりやすくて素晴らしい一冊だと思います。
  • Perlの躓きポイントと言われるリファレンスについても丁寧に説明されていたり、オブジェクト志向についても説明があったりと、一定規模以上のPerlスクリプトやPerlでWebアプリを作る際に必要となる要素がたくさん詰まっています。
  • 個人的には「9章 リファレンスを使った実践的なテクニック」の大量のデータを如何に効率よく処理するかといった部分がとても面白くて勉強になりました。
  • また、@INCやrequire、UNIVERSALやAUTOLOADなども紹介されているので、ライブラリ読む時の参考になりますし、MANIFESTやMakefile.PLは何なのかといった説明もあるのでとても勉強になりました。
  • テストについてもしっかり取り上げられているのも嬉しいところです。


http://www.oreilly.co.jp/books/4873113059/



Perlベストプラクティス

  • Perlをどう書いていけばいいのかというベストプラクティスですが、変数名の付け方やインデントなど、Perlに限らずプログラミング全般に言えることも多く、分厚いですがとても勉強になる一冊です。
  • スライスをうまく使うとわかりやすく書けるといったことや、if () elsif () elsif () ... にするならハッシュで処理を分けるなど、実践的な内容も多くて綺麗に効率よいプログラムを書く方法が載っています。
  • 後半は著者のDamian Conway作のモジュールを使ったベストプラクティスが多く、そのまま使うことはないかもしれませんが考え方という意味では参考になるのかなと思います。
  • まず前半だけでも読むととても勉強になると思います。


http://www.oreilly.co.jp/books/4873113008/



Perl CPANモジュールガイド

  • 実際にプログラミングする場合は、CPANモジュールを活用していくことになると思うのですが、最初のうちはどうモジュールを検索していいのかわからないことも多いと思います。そういった時にまずこの本で欲しいモジュールがないか探してみるといいのではないかと思います。
  • 一部今では別のモジュールに置き換えられているものもありますが、普段よく使うモジュールが紹介されていて、サンプルコードや説明も丁寧でわかりやすいし、用途別に紹介されているので探しやすいです。
  • またいわゆるモダンな感じのコードで書かれているので書き方の勉強にもなると思います。
  • 発売された時に「もっと早くこの本が欲しかった...」と思った一冊です。


http://www.wgn.co.jp/store/dat/3227/



Webサービスのつくり方　――「新しい」を生み出すための33のエッセイ

  • じゃあ実際にPerlを使ってどんな感じでWebサービスを作っていけばいいのかがよくわかる一冊です。
  • プログラミング言語の本ではないですが、サンプルコードとしてPerlが使われていてWebAPIを叩いて結果をゴニョゴニョするCLIのプログラムから、PerlのWebApplicationFrameworkであるMojoliciousを使ったMVCでのアプリケーションのサンプルまで載っていて、Perlについても勉強になる部分が多いと思います。
  • アプリのコードが紹介されているので、自分が実際にアプリを作る際にはとても参考になる一冊です。

http://gihyo.jp/book/2012/978-4-7741-5407-7



おまけ

JavaScriptを勉強したときにポイントになった3冊

JavaScript

今でもなんとなくJavaScript使っている感はあるのですが、勉強をしていく中でポイントになった3冊を紹介。
他の言語の経験があるけどJavaScriptに慣れていない人が読むといい本だと思います。


JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

  • jQuery使ってDOM操作を出来るようになってきたけど、100行以上のJavaScriptのコード書いたりするときにこれでいいのかと悩んでいたときに手にとった一冊です。１つ１つのトピックが短いのでとても読みやすいです。
  • JavaScriptの言語仕様のここが悪いのでこう書くべきということが書かれていて、どうJavaScriptを書いていいのかわからなかった自分にとってはJavaScriptを書く上での指針となっています。
    • 本の薄さからわかるようにたくさん書いてあるわけではないのですが、オブジェクトや配列、varの宣言、nullやundefined、arguments、hasOwnPropertyなどハマりそうなところが取り上げられていてとても勉強になりました。
    • ただ、過激(?)という部分もあり全て従ってるわけではないです。
  • 関数呼び出しのパターンや、prototype周りのオブジェクトの作り方などが特に参考になりました。これを読んだことでapplyやcallなどを多用するコードも読めるようになり、JavaScript面白いなぁと思うようになりました。
  • 200ページくらいで薄いですがとても参考になる部分が大きく、定期的に読みなおす一冊です。


http://www.oreilly.co.jp/books/9784873113913/



JavaScriptパターン ―優れたアプリケーションのための作法

  • Good Partsを読んで、もっとJavaScriptを知りたいと思った時に読んだ本です。
  • Good Partsで書かれていたような配列や関数などについてや、JavaScriptでデザインパターンをどう実装するのかといった内容がパターンとしてたくさん紹介されていてとても面白いのですが、この本の特徴はオブジェクトやprototype、クラス、継承といったトピックがとても詳細に書かれている点だと思います。
  • オブジェクトやprototype周りの挙動、クラス的なものをJavaScriptでどう実装するかといったことはイマイチ理解出来ていない部分もあるのですが、この本では名前空間の作り方やモジュールパターン、いわゆるクラス的なパターン、Object.create的なオブジェクトベースの継承など、多くのパターンが紹介されていてとても勉強になりました。
    • ただ、あまりにも色々なパターンが紹介されていて、どうすればいいのか混乱した部分もありました...。
  • こちらも250ページくらいとすぐに読むことの出来るので、何度も読み返しています。


http://www.oreilly.co.jp/books/9784873114880/




ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理

  • JavaScriptパターンを読んで、クラス的なものをどう実装したらいいのかと悩んでいた時に読んだ一冊です。
  • Spineの作者による本で、コントローラーやモデル、ビュー、イベントをどう実装するかといった点が丁寧に説明されていて、この辺りはBackboneやSpineなどライブラリを利用することが多いと思うのですが、考え方という意味でとても参考になりました。
  • また、SpineはもちろんBackboneやJavaScriptMVCについても説明されていて、ライブラリ利用者の視点でもとても参考になりました。
  • サンプルコードが多いのも読んでいて勉強になりますし、githubでも公開されているので嬉しいところです。
  • MVCについてだけ書かれていそうなタイトルですが、require.jsやテスト、デバッグについてから、付録としてjQueryやCSSについても書かれている盛りだくさんな一冊でもあります。
  • こちらも300ページ程とさっくりと読むことの出来る一冊です。

http://www.oreilly.co.jp/books/9784873115542/




他にも読んだ本はあるのですが、この3冊によってJavaScriptの特徴を知ることが出来ました。
jQueryでDOM操作やajaxをカジュアルにやる以上のことをやりたくなった際にとても役に立った何度も読み返している本です。

CoffeeScriptを試してみた

JavaScript coffeescript

デメリットの方が大きいかなと思って今までは気にしてなかったのですが、githubは新しいものは全てCoffeeScriptで書くというのを見て「へぇ」と思い、試しに使ってみたのでその感想などを。

文法などはたくさん情報があるので省略。

学習

  • 文法だけだと1時間くらいあれば理解出来るのかなと思います。
  • あとはjs2coffeeで変換結果を確認しながら、JSで書いたものを移植してみました。

書いてみて

楽で楽しい
  • まず思ったのは楽だということです。
    • クラス的な実装をするためにextendみたいな関数を自前で書いてprototype周りをゴニョゴニョするかライブラリを使用していたのが、classで定義出来てextendで継承出来るのは何も考えなくていい
    • {}や;の省略などrubyぽくシンプルに書ける
    • 後置のifが使える
    • for inでループを回せたり、mapやfilter的なことが簡単に出来る
    • #{}で文字列の中で変数が展開できる
    • [1..10]で配列が定義出来たり、可変長引数を (foo, otherArgs...) -> という形式で本物の配列で取得出来る

とこんな感じで気持よくプログラミング出来るようになっているなぁという印象を受けました。

JavaScriptは理解している必要はある
  • ==と書いても===とコンパイルしてくれたりと、いわゆるJavaScriptのBadPartsと言われるところを補ってくれる部分もあるのですが、関数スコープは関数スコープのままですし、->と=>の使い分けなどはJavaScript自体を理解して必要があるなと思いました。なのでコーディングの敷居が下がるというよりも、わかっている人が気持ちよく書けるという印象を受けました。
  • こんな書き方も出来たりするのも面白いなと思いました。
# coffee
members = song.artist()?.members?()

// compiled
var members, _ref;
members = (_ref = song.artist()) != null ? typeof _ref.members === "function" ? _ref.members() : void 0 : void 0;
コンパイルは気にならない
出力されるJavaScriptは読みやすい


あと書いてるとruby使いたくなりますねｗ RailsのAsset Pipelineも。

使いどころ

  • 個人のアプリなどで使うのは全く問題ないかなと思いますが、ライブラリや長期間メンテするプロジェクトで使う場合は慎重になる必要があるかなと思っています。
  • ライブラリで使うとcoffeeで書かれているからという理由で使ってもらえないこともあると思います。自分もSpineはcoffeeで書かれているからと理由で使うのを避けていました。
    • 今ではSpineのコード読んだりしていますが...
  • プロジェクトで使う場合は、他の人にJavaScriptだけでなくcoffeeの文法を学ぶ負担を強いることになるのでみんなの合意を得る必要があるだろうし、将来のことを考えると気軽には導入しにくいなと思っています。
    • 自分も飽きて使わなくなる恐れもあるし、JavaScriptを理解しなくていいというわけでもないので...


というわけで、個人で書くものについては、しばらくcoffeeを試してみようかなと思っています。何年後かに...となるかもしれないですが、技術的負債を背負うのは自分だけなのでまぁ問題かなと。

JSHintの設定を調べてみた

JavaScript

grunt.jsの環境も作った( http://d.hatena.ne.jp/koba04/20130203/1359898395 ) ので、JSHintを使ってコーディングスタイルのチェックをしたいと思い、JSHintの設定項目を調べてみました。

JSHintのドキュメント

設定項目についてのメモ


何か間違いなどあれば指摘して頂けると嬉しいです。

それを踏まえた今の設定

比較的色々入れてみたので、そのうち減らすかもですが。

grunt.js0.4.0でJSとCompassをコンパイルする

JavaScript

Backbone.jsなどを使っていてjsのファイルが増えてくると、公開するときには1つのファイルにまとめたいなぁとか、コーディングスタイルのチェックもしたいなぁと思っていて、そこで何かいいのないかなと思って調べてみると、「grunt.js」がよさそうだったので今更ながら試してみました。


grunt.jsのバージョンは0.4.0です


今回は、JSに対してJSHintをやって結合して圧縮することと、Compassのコンパイルをgrunt.jsにやってもらうことにしました。
（他にもテストや自分で作ったタスクを登録できたりもするのですが今回は省略）

インストール

  • https://github.com/gruntjs/grunt/wiki/Getting-started
  • ドキュメントにも書いてあるのですが、0.4.0からはgrunt-cliというクライアントだけをグローバルにインストールして、gruntはグローバルにインストールしないような構成になっています。
    • もしすでにグローバルにgruntをインストールしていた場合は「npm uninstall -g grunt」して削除しましょう。
grunt-cliのインストール
% npm install -g grunt-cli

これでgruntコマンドにパスが通って使えるようになります。

gruntとpluginたちをインストール
  • 0.4.0からはこれまでgrunt本体に入っていたファイルの結合(concat)や監視(watch)などが全部プラグイン化されているので、必要なものをインストールします。
% cat package.json
{ 
  "name": "p5-petatube", 
  "version": "0.0.1", 
  "description": "This is web application named PetaTube.", 
  "private": true, 
  "repository": { 
    "type": "git", 
    "url": "git://github.com/koba04/p5-petatube.git" 
  },  
  "author": "koba04", 
  "devDependencies": { 
    "grunt": "~0.4.0", 
    "grunt-contrib-watch": "~0.2.0", 
    "grunt-contrib-uglify": "~0.1.1", 
    "grunt-contrib-concat": "~0.1.2", 
    "grunt-contrib-jshint": "~0.1.1", 
    "grunt-contrib-compass": "~0.1.1" 
  }   
} 
% npm install

npm簡単でいいですね。

Gruntfile.jsを作る

  • 実行したいタスクなどはGruntfile.jsというファイルを作ってそこに書いていきます。
module.exports = function(grunt) {
"use strict";

  grunt.initConfig({
    // package.jsonに設定されている内容を取得
    pkg: grunt.file.readJSON("package.json"),
    // watchの設定 (grunt-contrib-watch)
    watch: {
      // jsという名前でtargetを設定
      js: {
        // 監視するファイルを指定
        files: [
          "Gruntfile.js", // このファイルも監視してjshintする
          "src/js/**/*.js"
        ],
        // 変更されたらどのタスクを実行するか
        tasks: ["js"],
        // watchのオプション
        options: {
          // 前回に実行されてから最低空ける間隔(同じファイルに対して)
          debounceDelay: 1000,
          // タスクを実行中に割り込みを許可するか
          // interrupt: false,
          // 変更を検知してからタスクを実行するまでの間隔
          // fs.watchFileがwatcherとして使われた場合しか有効でないので指定しない方がよいらしい
          //interval: 1000
        }
      },
      // CSS用の設定
      css: {
        files: [
          "src/scss/*.scss"
        ],
        tasks: ["css"],
        // オプションはjsと同じものを使用
        options: "<%= watch.js.options %>"
      },
      // JSもCSSも監視したい時の設定
      all: {
        files: [
          "<%= watch.js.files %>",
          "<%= watch.css.files %>"
        ],
        tasks: ["js", "css"],
        options: "<%= watch.js.options %>"
      }
    },
    // 結合の設定 (grunt-contrib-concat)
    concat: {
      options: {
        // 結合したファイルの頭にコメント入れておく
        banner: "/* this file is generated by concat task of grunt.js */\n"
      },
      dist: {
        // 出力元
        src: [
          "src/js/app.js",
          "src/js/model/*.js",
          "src/js/collection/*.js",
          "src/js/view/*.js"
        ],
        // 出力先( package.jsonのnameから値を取得している)
        dest: "static/js/<%= pkg.name %>.js"
      }
    },
    // uglify(minify)の設定 (grunt-contrib-uglify)
    uglify: {
      dist: {
        src: "<%= concat.dist.dest %>",
        dest: "static/js/<%= pkg.name %>.min.js"
      }
    },
    // jshintの設定 (grunt-contrib-uglify)
    jshint: {
      options: { 
        // jshintの設定ファイル
        jshintrc: ".jshintrc" 
      },
      // 対象ファイルを指定
      all: ["Gruntfile.js", "<%= concat.dist.src %>"]
    },
    // compassの設定(grunt-contrib-compass)
    compass: {
      dev: {
        options: {
          // 設定ファイル
          config: "compass_config.rb",
          // 環境
          environment: "development"
        }
      },
      prod: {
        options: {
          config: "compass_config.rb",
          environment: "production"
        }
      }
    }
  });

  // プラグインをロード
  grunt.loadNpmTasks("grunt-contrib-watch");
  grunt.loadNpmTasks("grunt-contrib-concat");
  grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.loadNpmTasks("grunt-contrib-jshint");
  grunt.loadNpmTasks("grunt-contrib-compass");

  // watchのところにあったタスクの設定
  // jsはjshintしてconcatして、ugilifyする
  grunt.registerTask("js", ["jshint", "concat", "uglify"]);
  // compassはprodのtargetを指定
  grunt.registerTask("css", ["compass:prod"]);
};

コメントあって見にくいと思うので
https://github.com/koba04/p5-petatube/blob/master/Gruntfile.js

実行

  • コマンドから実行
# jsのタスクを実行
% grunt js
# cssのタスクを実行
% grunt css

# jshintだけを実行
% grunt jshint

# targetも指定する compassのprodというtargetを実行
% grunt compass:prod

変更を監視させる

# watch:jsの設定で監視
grunt watch:js

# watch:cssの設定で監視
grunt watch:css

# watch:allの設定で監視
grunt watch:all

これでgrunt watch:allしておけば、自動でJSもJSHintやってまとめてくれるしCompassもコンパイル出来るし、grunt.js便利ですね。