【TechBuzz】第3回.js系開発技術勉強会 で tmlib.js について発表してきました!!

ちなみに発表に使ったスライドはこちらです. Web 上で作ったのでリンクをクリックするだけで見れます.

セミナーの内容は

• yeomanでフロントエンド開発を効率化する方法
• CoffeeScriptとTypeScriptの比較
• tmlib.js をよろしくお願いします
• 懇親会

ってな感じでした.

もう１週間経っちゃいましたがざっくりとレポートを書きたいと思います.

Table of contens

• TechBuzzって?
• yeomanでフロントエンド開発を効率化する方法
• CoffeeScriptとTypeScriptの比較
• tmlib.js をよろしくお願いします
• 参加してみて
• Reference

TechBuzzって?

本家サイトより引用

『TechBuzz』とは、開発者による開発者の為の勉強会です。

2010年より多くの技術系／開発系イベントを実施し、過去160回以上、累計2万人以上の方々にご参加頂いてきました。

そんな『TechBuzz』ならではの「開発者コミュニティとの繋がり」を活かしたイベントブランドとして中長期的に運営しております。

2012年は、海外開催も定期化して参ります！

up

yeomanでフロントエンド開発を効率化する方法

yeoman というツールを使ってフロントエンド開発を楽しようというお話

発表スライドはこちら

Profile

• TORU HOSOKAWA
• Twitter – @anton0825
• Facebook – toru.hosokawa1
• github – hosokawa0825
• blog – 日々精進

WEBアプリ開発時の問題

• 新しいソリューションがどんどん出てくる
• 最新の情報を追いかけるのが大変
• ビルドプロセスが複雑
  • SCSS や LESS, CoffeeScript や最近出てきた TypeScript など
  • 個人的には LESS, CoffeeScript のようにページ読み込み時に変換する機能があればそんなに複雑にはならない気がする.

YEOMANを使って解決！

• YEOMANってのがあるよ
• フロントエンド開発のベストプラクティスを集めたツール
• css, js の結合, 圧縮や更新の監視などが可能

デモ

• インストール
  • curl -L get.yeoman.io | bash
• 初期化
  • yeoman init
• サーバ起動
  • yeoman server
• テスト実行
  • yeoman test

イマイチなところ

• buildタスクをカスタマイズできない

JavaScript でも大規模な開発ってバンバン増えてくるだろうし, こういった環境への需要は増えてくるだろうなぁ.

テストとかの追加もライブデモでさくっとやってたので色々と使えそう!! 勉強になりました.

ただ, やはり build タスクをカスタマイズできないってのは痛い.

今後も TypeScript のようなタイプの言語も増えてくるだろうし, そういったものをさくっと試したいってってときにこそ活用したいツールだったりするので…

YEOMAN 今後に期待!!

up

CoffeeScriptとTypeScriptの比較

CoffeeScript と TypeScript を導入検討していて, 触ってみたよというお話.

発表スライドは非公開？

はじめに

• そもそも比較するものじゃないので参考までに

制作者比較

• TypeScript – C# とか作っていた MS の Anders Hejlsberg 氏
• CoffeeScript – Jeremy Ashkenas 氏

特徴

• TypeScript – 静的型付け, VisualStudio 使える, as に近い
• CoffeeScript – Ruby や Python ライクなシンタックスシュガー, コード量が減る
• 共通 – コンパイルして js を吐く

習得

• TypeScript – js のコードをそのまま動かせるので, 拡張子だけ変えて ts だと言い張ってもok. 型指定を覚える必要あり
• CoffeeScript – js との互換性はない. Ruby や Python を知ってる人はわりとスムーズに使える

開発環境

• TypeScript – Visual Studio, Vim や Emacs 拡張が出ている
• CoffeeScript – Emacs, Vim, Eclipse, NetBeans, WebStorm など

私はどちらもがっつり触っていたので, 目新しい情報ってのはあまりなかったです.

ただ, どちらも知らないけどこれから導入を検討してるってかたには 非常に有意義な内容だと思います.

TypeScript はわりとキレイなコードを吐くので, JavaScript のコーディング規約を固める際に参考になるのでは？と思ってます.

up

tmlib.js をよろしくお願いします

私が発表した内容です. tmlib.js について発表しました. ちなみに tmlib.js は ティーエム リブ ドット ジェーエス と読みます.

プレゼン資料はこちら

Profile

• 名前 … phi(ファイ)
• 言語 … C/C++, Python, JavaScript
• 年齢 … 24 歳
• 仕事 … 某ソーシャルゲーム会社で働いています
• Twitter … @phi_jp
• Blog … TM Life
• 参考書の執筆
  • enchant.js開発のレシピ
  • enchant.js スマートフォンゲーム開発講座

tmlib.js って何？

• tmlib.js とは, 『JavaScript をより使いやすく, より便利に, そしてより豊かに』をモットーに制作している JavaScript ライブラリです.

何ができるの？

• 色々やれます
  • グラフィックスプログラミング
  • ゲーム制作
  • ツール制作
• 詳しくは Document へ

サンプル

• グラフィックス – 魔法陣
• ゲーム – Reverse Reverse
• ツール – To Do List
• その他 – ピアノ
• tmlib.js はアイディアを即座に形にできるライブラリ

ざっくり使い方

• tmlib.js を読み込むだけ
• <script src="https://raw.github.com/phi1618/tmlib.js/0.1.3/build/tmlib.js"></script>

ライブコーディング

• その場で tmlib.js を使って簡単なゲームを作りました
• 実際に作ったゲームはこちら
• 7分くらい?
• BGM にももクロw

今後の予定

• 高速化
• WebGL サポート
• 参考書
• ゲームプログラミング大会

最後になぜ tmlib.js を作っているかというと…

• 『国民全員プログラマ化』計画
• tmlib.js は一般の方のプログラミングへのハードルをぶち壊すようなライブラリにしていきたい！
• そしてみなさん,一緒にプログラミングを盛り上げていきましょう！！

Links

• Twitter – @phi_jp
• GitHub – phi1618
• Library – tmlib.js
• Blog – 『TM Life』
• Mail – phi1618jp@gmail.com

up

参加してみて

参加者はゲーム系というよりサーバーサイドエンジニアの方が多い印象でした.

最近 CoffeeScript や TypeScript といった JavaScript の話題が多いってのと Node.js とかも わりと採用を検討していたりするらしく, PHP や Ruby を使っていた方々も JavaScript に興味を持たれているようです.

懇親会は, 食事をしながら和気あいあいとおしゃべり. 共通の話題で色々と盛り上がって楽しかったです.

個人的にはブログ見てくれてる人が結構いたのが嬉しかったです:)

TechBuzz では, JavaScript に限らず, 様々な技術についてセミナーを行なっているようです. なので, このセミナーを通じて仲良くなったって方もいて参加者同士の繋がりが他のセミナーより強いように感じました. セミナーというより同窓会といった感じ?w

今回は, 貴重な機会を頂きありがとうございました!! 今後共よろしくお願いします.

up

Reference

• ATND 【TechBuzz】第3回.js系開発技術勉強会
• 【開催レポート】第3回.js系開発技術勉強会

up