読者です 読者をやめる 読者になる 読者になる

akiyoko blog

akiyoko の IT技術系ブログです

「春のJavaScript祭」に参加してきました

勉強会 JavaScript

タイトル

春のJavaScript祭 in GMO Yours - Javascript祭り | Doorkeeper (2015.4.25)

主催

ITかあさん(@chihiro_kaasan

会場

東京都渋谷区桜丘町26番1号 セルリアンタワー11階 GMO Yours

Twitter






なお、今回のイベントは、schoo でも生放送されていたようです。

schoo.jp


schooさんの機材をちらっと見たのですが、おそらく ↓ のスイッチャーを使ってたっぽいです。10万円を切るスイッチャーということで、ちょっと前に話題になってたやつですよね。

ビデオカメラ 2台と音声?の 3チャンネルをミキシングして、iPad mini でスイッチング操作していたように見えました。音声は、Ustream側のセッティングで調整してたかもしれません。



 

WEBアプリ全自動テスト!Selenium×JSで業務徹底効率化

ITかあさん ( @chihiro_kaasan )


  • Selenium WebDriver
    • ブラウザごとにDriverがある
  • アドオンのIDEもまだまだ現役
    • ブラウザの操作を記憶
  • 画面全体をスクロールしてキャプチャすることも可能
  • Selenium WebDriver x Node.js
    • Selenium Serverを先に起動しておく
    • コマンドをポチッとするだけ
  • レスポンシブのテストも可能


 

Bootstrap の便利なティップス紹介

阿部 正幸 さん




  • Demoサイト

Fixed Top Navbar Example for Bootstrap


  • 結構自在にカスタマイズできる
  • 現状、使わない理由が見つからない
  • 事例もたくさん
    • 大きな写真素材はプロにお任せしよう!
  • 心地よいアニメーションも意外と重要
  • Bootstrapの基本的な使い方はCPIブログを見てね
  • 1. scrollspy
    • たった数行でスクロールを監視してアクティブなタブを切り替えることができる
  • 2. Animate.css
    • スタイルを足すだけでアニメーションを足すことができる
    • Bootstrapで使われているjQueryのhover()メソッドを使うとよい
    • スクロールの監視は Waypoint



 

Start React with Browserify

藤田 無憂 さん ( @anticyborg )




  • サンプルコード

muyuu/searchKindle · GitHub


  • React
  • 何が良いのか?
    • DOM操作を単純化
    • コンポーネント(パーツ)単位で設計しましょう
    • 可読性高い、メンテしやすい
    • Reactは「今のデータを元にDOMをレンダリングする」方式
  • 1つのコンポーネントは機能もviewも一箇所に記述
  • 小さなアプリにはそもそも向かない?
  • よく使われるrequireって?
    • JSはモジュールの仕組みがない。けど、importしたい!
    • Browserify
  • ファイル管理が便利になる(コンポーネントごとにまとめておく)
  • Watchifyでファイルを監視して、Browserifyのビルドを自動化



 

AWS LambdaとNode.jsで作るサーバ不要のイベントドリブンアプリケーション

佐々木 きはる さん ( @bump_of_kiharu )


  • AWS Lambda
    • 自動でスケールする、フルマネージドサービス
    • S3上のファイルやDBの追加変更などのイベントを検知して動作する、イベントドリブン
      • イベントが発生していない待機時間は料金がかからない!
    • 無料枠も。100万リクエスト/月まで
  • トリガーとなるイベントはAWSのみ
  • Lambdaファンクションは、Java, Node.js のみ
    • コードは、zip形式でアップロードするか、コンソール上で直接記述

参考




 

いまさら始めてみたRxJS

ライオンさん ( @lion_man44 )


  • イベントドリブン、非同期データストリーム
  • gulpでlivereloadしたい時の書き方

gulpでlivereloadしたい時の書き方 - Qiita

  • mapで変換
  • subscribe
  • filterで数字以外をはじく

first-index.jsの改良版





 

Hello, ES6 ~JavaScriptのいまとこれから~

よしこさん ( @yoshiko_pg )



 

  • ES6 = ECMAScript 6th Edition
  • アロー関数
  • 通常の無名関数とはthisの内容が異なるので注意
  • テンプレート文字列で置換
  • デフォルト引数
  • 可変長引数
  • スプレッド演算子
    • 配列の前に「...」を付けることで配列を展開できる
  • class用の構文が!
    • 中身は function
    • 継承もできる
  • Babel なら今すぐ使える



 

ライトニングトーク

2. JSにゲーム開発環境を求めるのは間違っているだろうか

竹内祐介さん

  • socket.io, express, passportがあれば個人でゲーム作るには十分?


 

3. Underscore.js入門

香月雄介さん ( @katsukii )

BLOG : http://peraichi.hatenablog.com/entry/2015/04/14/190427
ペライチ : https://peraichi.com/
サンプル : https://peraichi.com/landing_pages/view/jsfes2015vol1

  • jQueryとの棲み分け
    • Underscore.jsは、配列・オブジェクトのデータ操作
  • Underscore.jsもいいけど、lodashもいいよね。


 

4. Meteorというフレームワーク

山田祥さん

  • 最近、Windowsでも使えるようになった
  • サーバサイド、クライアントサイドの両方でJSを使う
  • MeteorはMongoDBを内包している。他のDBは使えない!
  • jQuery, TypeScript, Sass, Bootstrap等も使える
  • 将来的に使えなくなったり、利用に制限が入る可能性がある。。
  • 依存度が高い。全てがMeteorフレームワークに依存している。。


 

5. EcmaScript 仕様書を読もう

村地彰さん

  • 現在は ES 5.1


 

6. Monacaを使ってモバイルアプリを作ろう

ジャスティス岡本さん

BLOG : http://j801.com/

  • 三種の神器
    • Monaca IDE
    • リアルタイムにアプリの動作確認
      • ビルド不要
    • Onsen UI