VOYAGE GROUP エンジニアブログ

voyagegroup_techのブログ
VOYAGE GROUPエンジニアブログです。

勉強会

今、クライアントサイドのJavaScriptを書く前に知っておきたいこと ~ 2014年トレンド総まとめ

皆さんこんにちは。adingoにてFluctという広告配信システムの管理画面を中心にクライアントサイドの開発を行っております、大関です。

今回は、先日、社内のエンジニア向けに開催した「2014年のJavaScriptのトレンド総まとめ」というコンセプトの勉強会の内容について紹介します。

それでは、スライドに書ききれなかった前提事項について、何点か補足と解説をします。

補足と解説

前提: なぜ「2014年」なのか

JavaScriptを用いた開発、特にWebフロントエンドとも呼称されるクライアントサイドJSのトレンドは、非常に速いサイクルでの進化を見せています。その一方、Webサービスを提供するに際して、我々は好む好まないに関わらず、デファクトスタンダードであるJavaScriptに触れる必要が存在しています。そうしたことから、JS以外の言語を専門とする(同僚の)エンジニアから、「三ヶ月も経つと新しいライブラリの話がされているので、今現在のベストプラクティスないしは全体的なトレンドを追うのが非常に難しい」という話を耳にします。

本スライド(を用いた勉強会)では、「全体的な潮流、および2014年末日現在であれば、このような方法を用いるのが十分に実用的な水準に達しているものを振り返り、トレンドを理解する」というコンセプトで、現時点でのJavaScriptのトレンドを押さえるのに必要な単語と流れを紹介する事にしました

タイトルに「2015年」と冠していないのは、年が明けて一ヶ月しか経っておらず、2015年のベストプラクティスとも呼べる物は未だに登場していないと判断した為です。

内容選定の基準に付いては以下の通りです:

  • 最先端ではなく「トレンドの少し後ろ」を主軸にする
    • 少なくともアーリーアダプターの間では一定の評価を得ていると判断できる物を中心に選択しています
  • 過去にJSに触った事のある(JS以外がメインの)エンジニア向きの内容
    • 特に、Webアプリケーションエンジニアが主な聴衆となる前提での話が多いです
  • 2013年までに出てきたものを踏まえて、14年に出てきたものを拾う
    • 過去の経緯(コンテクスト)を理解しなければ、全体の流れの理解にはつながらないからです
  • クライアントサイドの話を中心にする

    • Node.js(io.js)では既に解決されている問題が多いため
    • 変化が極端に激しいのはクライアントサイドのため
    • 現時点において、サーバーサイドに関しては必ずしもJavaScriptを採用する必要性が無いため
      • Isomorphicなどの文脈はありますが、業界における決定的潮流には至って居ないため、このような判断をしています
  • パフォーマンスについては、以下の理由から言及していません
    • 話し始めるとキリが無い
    • 万能の解決策は無い

「現代のJavaScriptはビルドする物である」

CSSにおいて、Sass/LESS, Autoprefixerのようなプリプロセッサが普及しているのと同様に、JavaScriptも、Lintやminifyに限らない、デプロイ前にビルド工程を挟む前提でのツールが一般化しつつあります。CoffeeScriptを始めとした「任意の構文で記述したソースコードから、JavaScriptを最終的に生成する」AltJSの大量発生が典型的な事例ではありますが、他にもソースコードをパースし、抽象構文木(AST)を生成する事で、より複雑な変換・解析をカジュアルに行うためのツール群(esprimaが有名)も広く利用されています。

開発環境や目的によっては、これらのビルド工程を挟むツールの利用が困難なケースもありますが、制約の中でもこうしたツール群の恩恵をいかに受けていくかが鍵になるのは間違いありません。

終わりに

上記のスライドで挙げた内容について、本格的に普及が始まるのは今年以降であると予測していますが、情勢を知った上で選択するのと、知らないで選択するのとでは雲泥の差が存在します。上記のスライドおよび本記事が、まさに今、次のアプローチを検討している皆様の一助となれば幸いです。

会社のブログですので

お約束となりますが、弊社には AJITO という社内バーがあり、毎夜のようにエンジニアが現れ、酒を嗜み、軽食をつまみつつ、エンジニアリング談義を行っています( #ajitingで既にご存知の方も多いと思います)。「私も一緒にエンジニアリング談義をしたい!」という方がいらっしゃいましたら、是非とも弊社エンジニア or @tech_voyageに、お声掛けいただければと思います。

また、adingoを含むVOYAGE GROUPアドテクユニットでは、一緒に働いてくださる仲間を募集しております。VOYAGE GROUPや広告配信に興味を持たれましたら、お気軽にご連絡ください。

第29回すくすくスクラム 〜スクラムプロジェクト逆計画ゲーム〜に会場提供しました

こんにちは、VOYAGE GROUPの水越(@Akiyah)です。

1月30日(月)に、VOYAGE GROUPの会議室パンゲアで第29回すくすくスクラム 〜スクラムプロジェクト逆計画ゲーム〜というイベントが開催されました。

主催はアジャイルプロセスの一つであるスクラムのコミュニティすくすくスクラムであり、VOYAGE GROUPのアジャイル戦略室が会場提供をいたしました。

IMGP0043
会場の雰囲気

IMGP0042
プロジェクト逆計画ゲームの様子

イベントは参加者がプロダクトオーナー1人と開発者5人の6人チームになってプロジェクトを進めていくというものです。
『このプロジェクトは大成功で、顧客も大満足だった』という結論から始まって、ではいったいなにを実施してそのためになにを計画したのか、をイテレーション4からイテレーション1に向かって時間軸と逆順にたどっていきます。
時間が逆向きに進むので直感的に理解できなくて混乱しました。でもみんなでいろいろ考えて議論&相談&質問をしながらゲームを進めて、そうやってわいわいしゃべるのが楽しいゲームでした。

会場で偶然以前の同僚に久しぶりに会えて、近況を報告しあいました。またイベント中に入り口から中の様子をのぞいている会社見学の学生さんがいたのでおしゃべりしました。コミュニティに参加するとこういう出会いがあっていいものだなと改めて感じることができましたよ。学生さんにとっては社会人とおしゃべりできるチャンスなので就職活動中の学生さんなどぜひコミュニティに参加してみてください。

VOYAGE GROUPの会議室はイベントを開催したいというコミュニティの方に会場提供をしています。興味がある方はぜひご連絡くださいね。

エンジニアが参加して良かったデザインミニ塾

こんにちは、VOYAGE GROUPの水越(@Akiyah)です。

皆さん、デザインミニ塾というイベントを知っていますか?
デザインミニ塾とは産業技術大学院大学でほぼ毎月開催されているデザインに関する勉強会です。
塾と言っても申し込みをすれば誰でも無料の、毎回デザインの分野で活躍している方を呼んで講演をしていただくという形式の気軽に参加できるイベントです。

私はエンジニアなのですがデザインにも興味があるので、異文化交流と言う意味でもこのデザインミニ塾を2010年頃からちょくちょく見に行っています。大好きで毎月楽しみなイベントです。
思い返してみると2011年末現在までの約2年間で15回参加したようです。

先日、社内勉強会でエンジニアやデザイナー、そしてUX(ユーザーエクスペリエンス)に興味がある人を集めてデザインミニ塾の紹介を行いました。デザインミニ塾の開催案内pdfファイルを見ながら私が印象に残った話を語ると言うスタイルで、質問や意見が出て盛り上がりました。

その社内勉強会のときにまとめた資料があるので、再編集してこのブログにのせます。エンジニア目線で面白かった回をピックアップしました。


第6回
「医療安全への終わりなき挑戦」
~ ヒューマンファクターとインタフェース ~
自治医科大学医学部メディカルシミュレーションセンター教授
河野 龍太郎 氏

この第6回がはじめて参加したデザインミニ塾なのですが、自分の中ではデザインミニ塾で一番良かった回です。
『実務入門 ヒューマンエラーを防ぐ技術』という本の編集者でもある河野 龍太郎 氏の講演で、ヒューマンエラーが起こるわけと、その原因となるインターフェース上の問題を、医療現場、航空機、管制塔、原発などの事例を豊富に紹介していただきました。

B = f(P,E)
B : Behavior(行動)
P : Person(人)
E : Environment(環境)

という式をつかって、行動は人と環境を入力とする関数の結果であり、ヒューマンエラーを人のせいにせず、そのエラーを引き起こした環境に原因があると認識して改善すると主張されています。デザインミニ塾なのに工学やシミュレーションがリスク回避にとても大切だとエンジニアの大切さを主張されていたのが印象的です。

これに近い回では『第24回「ユーザを中心としたものづくり」人間中心設計への取組』で講演された、株式会社 U'eyes Design の鱗原氏のブログである使いやすさ日記もデザインの善し悪しを冷静にマルバツつけていてとても参考になります。


第10回
「公共交通とサイン」
アール・イー・アイ株式会社代表取締役
中村 豊四郎 氏

地下鉄の案内のデザインを行った方の講演です。デザイナーの仕事は華々しいものだとイメージしていたのですが、フォントの性能の測定や配色の視認性の実験など、工学的で地道な作業を聞いて案外エンジニアと似ているんだなと思いました。
普段何気なく接している公共交通の案内図などですが、こういうところにデザイナー達の働きが隠されているのですね。


第16回
「デザインの力を生かすLGの戦略(仮)」
LG Electronics Inc. デザイン研究センター HEB デザイン研究所 常務
洪 思允 氏

LGやサムソンと言った韓国の電機メーカーの名前はもちろん知っているのですが、日本の大手の電機メーカーと比べ物にならないくらいデザインに力を入れていると言う事を聞き、衝撃を受けました。同様の事を『第25回「日本のデザインにまだアドバンテージはあるか? 〜アジアの国々の取り組みと比較して〜」』でも聞いたので、改めて日本以外の国のデザインへの強い取り組みを感じることができます。


第18回
「カラーユニバーサルデザインをはじめとするUD デザイン活動のお話し」
(株)武者デザインプロジェクト 代表取締役/UDソーシャルデザイナー
武者 廣平 氏

カラーユニバーサルデザインの講演です。私は色彩も好きなのでとても興味深い回です。日本人男性の場合は色覚特性がC型以外のP型やD型の人(いわゆる色弱の方ですが、色覚特性と表現されます)が20分の1もいる事を知り、この話を聞いてからP型D型の人が見づらいかもしれない単純な赤を使う事ができなくなりました!(その代わりに少し青が混じったオレンジを使ったりします)


第19回
「「共感」から発想するデザインコンセプト~オブザベーションのご紹介」
株式会社インフィールドデザイン 代表取締役
佐々木 千穂 氏

相手に共感してデザインするオブザベーションという手法とともに、『私は三年間老人だった 明日の自分のためにできること』という本を紹介していただきました。26歳のデザイナーが老婆の特殊メイクをして街に出てみたら、若い自分が受けているのと全く違う対応を社会から受けるという衝撃的な本です。
相手に共感すると言うのはこういう事か、と同時にここまでしないと立場の違いはわからないのか、とショックを受けました。


第21回
「異文化市場のお客さんの頭の中を探ろう ローカリゼーションマップの試み」
モバイルクルーズ株式会社代表取締役
安西 洋之 氏
テツタロウデザイン代表
中林 鉄太郎 氏

ローカリゼーションマップという概念についての回です。地域毎の考え方や文化の違いの事をローカリゼーションマップというようです。例えば女性がコンビニに行くとき、日本人なら日焼け止めクリームや乳液、フランス人なら香水、アメリカ人ならアイメイク、と言った違いがあるのだそうです。その他にもメキシコではマルちゃんが国民食として、メキシコの食材とあわせて調理して食べられているというローカリゼーションマップの成功例も紹介されました。これらは『「マルちゃん」はなぜメキシコの国民食になったのか? 世界で売れる商品の異文化対応力』という講演された安西氏と中林氏の本でも紹介されています。



さて、いかがでしょうか。興味が出てきた方もいるのではないでしょうか。
実は参加するにはpdfにかかれているメールアドレスにメールを送らないといけないのですが、デザインミニ塾の次回の予定は産業技術大学院大学のトップページにお知らせが書かれてから知る事ができるという、すこしややこしい方法なのです。興味がある方は次回から申し込みでくじけずにぜひ参加してみてください。

TokyuRuby会議04の会場提供と発表を行った件について #tqrk04

@bash0C7です。ECナビ事業本部でエンジニアをしつつ、アジャイル戦略室という活動を行なっています。

去る2011/10/29(土)に、VOYAGE GROUPのセミナールーム「パンゲア」を会場として、プログラミング言語Rubyに関するカンファレンスの一つ、TokyuRuby会議04が開催されました。

わたしはそこで開場の人&発表者をさせていただきました。素晴らしい参加者、スポンサー、主催者による、人を大事にするRubyらしい素晴らしい会議でした。その一端を担えたことを誇りに思います。

大変ありがたいことに発表公募の選考に通過し、「闇からの伝言」というタイトルでお話させていただきました。

通常なら提示資料を公開するところですが、今回はトークスクリプトを公開しようと思います。
本番は
アドリブが入っているので、スクリプトと本番の語りとで差異がありますがご容赦ください。

「闇からの伝言」
001

(BGMスタート)

闇、について一つ問題提起をしたい。
ネガティブイメージで使われがちなこの言葉だが、だが本当にそれでいいのだろうか。

物事にはいろいろな側面がある。

光あれば闇があり、ウォーターフォールがあればAgileがあり、
PHPがあれば Rubyがある。

そういう分野に限った話ではない。

妖怪があれば、人間があり。
神様がいれば、 常人もいる。

いいとか悪いとか、使うべきとか消し去りたいとか、そんな事じゃない。どちらも必要なのです。
一番の問題は、この、救いようのない世界で、わたしたちがどうするか。
どうすればわたしたちが助かるのか、どうすれば運命を変えられるのか、その答えだけを探して、何度も始めからやり直して…

ごめんね。わけわかんないよね…気持ち悪いよね。

でも、わたしたちにとって立ち止まることと、諦めることは同義だ。
何もかもが無駄だった、と、決して運命を変えられないと確信したその瞬間に、ぼくらは絶望に負けて、老害へと変わるだろう。
勝ち目のあるなしにかかわらず、僕らは戦うしかないんだよ。

(このあたりでBGM変わる)

逆に言うと、戦い続ければいい。闘うフィールドは数限りなくある。取りうる工夫も様々にある。
継続したコミュニティの集まりが怖くても、カンファレンス。ちゃんとしたLTが怖い、闇。
技術がなくても、それらを開催することはできる。

そして、それは今すぐできる。いつかじゃない。来月でも来週でも明日でもない。明日って今さ!

RubyKaigiだってそうさ。どうなるんですか?じゃない。こうしましょう!でしょう!!
The RubyKaigiは自分の手に余る?Regional RubyKaigiがある。
Tokyo0X、Keio、Tobu、Shiba、Boso、まだまだ行われてない地域や回がある。
やり方も様々なスキームがある。セミナー、LT、花見、うまいものを食べる、全員トーカー、ワークショップ、様々な工夫がある。

それに、一人で全てやりきる必要はない。チームを作る。まわりのrubyistに声をかけて。
首都圏ならもはや石を投げればrubyistに当たる。それに、先達もたくさんいる。助けてもらえる。

規模も自分たちが扱えるサイズで大丈夫。

(このあたりでBGMかわる)

かの偉大な作家も言っていた。
夢をかなえてもらう立場から、夢をかなえさせてあげる立場に、どんと変わるんだよ。
大人を逃げるな。
と。

我々VOYAGE GROUPもさらなる挑戦のステージにいる。すでに挑戦は始まっている。できるできないかじゃない。やるんだよ。ナントカだからできない、で止めるじゃない。ナントカを解決すればいいんだよ。やるんだよ。

RubyConf2011でのLTだってそうさ。

(このあたりでドラ。鳴るまで、思いつく限りまくし立てる)

「PHPでTDD&CIワークショップ」に参加してきました

初めまして。中村(@tomomihoge)と申します。
5月よりECナビの中の人になりました。

今回は、先日グリーさんで開催されました勉強会、「PHPでTDD&CIワークショップ」に参加しましたので、そちらについてお話しようと思います。

[概要]

勉強会の大まかな流れは以下の通り。

  1. テスト駆動開発(以下TDD)、継続的統合(以下CI)に関して概念の説明や、周辺の話題に関して座学。
  2. TDD 組と CI 組に分かれて実践形式で演習(ワークショップ)。
  3. 懇親会
なお、私の知識レベルは
  • TDD, CI について概念は抑えてる
  • どんなツールがあるかも知っている(代表的なものくらいは・・多分)
  • テストは書いたり書かなかったり(少なくともテスト・ファーストは実践してない)
  • CI は経験ゼロ
と言ったところです。

こんな状況なので CI ワークショップを選択しました。
実際どんなものか見てみたかったのと、先駆者から実運用する際のアイデアを吸収したかったので。

1. 2. については他の方のレポートを参照していただくとして、私は 3. についてお話しようと思います。

[CI ワークショップ]

ワークショップのスタイルですが、事前に環境をある程度用意して、実践すると言ったものでした。
これは時間圧縮に有効だなと思いました。
一方、事前の環境がバラッバラなので VM 用意してそこからスタート、みたいなのもアリだと思いました。

参加者は15名ほどでしたでしょうか。
全体では50名ほどで、TDD を選択された方が多かったです。

ワークショップの内容はまさに↓こちらの資料の通りです。
PHPでTDD&CIワークショップ、Jenkins + PHP の各種プラグインパート資料

かいつまむとこんな感じ。
  1. 環境作る
  2. サンプルジョブ作って実際に動かして大まかな流れ確認
  3. 各種プラグインとの連携
特に 3. に入ってから実践的な内容を多く聞かせていただきました。
現実(メンテコストの高い既存コード)とどう向き合っていくか、
その中で Jenkins をどう活用しているか、興味深かったです。
  • 閾値を調整して、現在を出発点にする。現状より悪くしない、新しいコードは綺麗に書く。
  • カバレッジは100%が理想だけど、少しずつ増えていけばそれでいい。完璧を目指すより向上を実践する。
とかく「1から始まるプロジェクトなら使えるけど、途中から導入するのは無理ゲー」
と逃げがちな自分には、自省することしきりでした。

[その他]

合間に参加者の開発環境について聞いてみました。
Eclipse が数名、Emacs が 2名、Vim が残り全部でした。
この割合は現職の割合とも類似してます。

また Windows ノートで参加してたのは 3 名程度だったでしょうか。
残りの方達は全て Mac で、Web 系ってこういう感じなんだなーと。
(前職では Windows 一色でした。)

[懇親会]

ワークショップは22:00を超えたあたりで終わったのですが
その後、質疑応答やらなんやらで22:30になっても席を立つ人はまばら。
CI話でご飯三杯いける状態で、懇親会と言う名のアディショナルタイムでした。
私にはこっちの方が気楽でいいですね。

非常に有意義な勉強会でした。
今回 DB のテスト(DB と言うか DAO 層部分)をどうやっているのか聞きそびれてしまったので、次回はそちらも盛り込んでいただけたらなぁ(チラッ
次の機会も是非参加したいです。

会場を提供していただいたグリーさん、CIワークショップ講師の @cactusman さん、@yamashiro さん、ありがとうございました。

※ にしても、記念すべき一回目の投稿がコード1行もなしってお前・・・。次回はもう少しテクニカルな何かを書きます。
記事検索
QRコード
QRコード