ブログを書くまでが勉強会！

ようやく勉強会が終わりそうです。(違
少しバタバタしていたのでアップが遅れましたが、
6/6にLearn JS in kanazawa 「Kakenai.js ver1.0」に参加(運営？)してきたので、
レポートとはとても言えないメモみたいなものを。

Learn JS in kanazawa - Kakenai.js ver.1.0 (2015/06/06 13:30〜)learnjskanazawa.connpass.com

発表者及びスライド

“今” 使えるJavaScriptのトレンド
水野 隼登さん( @pocotan001 ) - 株式会社サイバーエージェント Webディベロッパー

“今” 使えるJavaScriptのトレンド from Hayato Mizuno

www.slideshare.net

kakanai GUIツール Blocs

開幕早々、JavaScriptを使わずにGUIでJavsScriptを使った表現を選択して、
サイトを作成できるMacApp : Blocsを紹介。 ケースによっては選択肢に入れるのもアリ。 Blocs - Build beautiful websites without touching a line of codeblocsapp.com

開発環境について

黒い画面とはいい加減、友達にならないとこの先生きのこれない。

内容としては昨今の傾向としてフロントエンドの制作において、
ほぼnode.js+npmを使ったパッケージ管理がほぼ必須。
最近だとjQuery公式サイトの方でもプラグインの配布は行っておらずReadOnlyとなっていて、
サイトへ登録するのではなくnpmに移行することを推奨しているとの事。
bowerというパッケージ管理ツールもあるが、
npm( node package manager)を利用する事を推奨している。

speakerdeck.com jQuery Plugin Registryplugins.jquery.com

module管理する憎いやつ Browserify (ブラウジファイ)

• ブラウザでNode.js用のモジュールを使用可能にする
• ブラウザでrequire()を使ったモジュール管理を行える
  らしい。もう少し範囲が広い仲間にwebpackがいる。

Browserifyの使い方について調べてみた - yutaponのブログyutapon.hatenablog.com

タスクランナー [Grunt] [Gulp]

Gruntは豚の鳴き声、Gulpはジュースを飲む音らしい
Gruntはメンテナーが行方不明の為、これから使う場合はGulpを推奨。
gulp-starterというテンプレートを使うと便利 らしい
greypants/gulp-startergithub.com

一応「npm run ( w / package.json )」でタスクランナー的な使い方ができる。

altJS

• CoffeeScript
• Babel ( ES6 → ES5なAltJS )
• TypeScript (後述)

構文チェッカー

ESLint

MVなんたらのお話

MV使わないと不幸になるよって例。
backbone.jsの機能が多すぎる為、
複数のUIから同じデータを変更する際に、 ModelとViewとに分けて考えると良い
そしてModelとViewとライブラリ「Osteoporosis.js(骨粗鬆症.js)」の紹介。

ModelとViewに分ける設計 - #JSオジサン from Ginpei Takanashi

www.slideshare.net

Polymer

polymer 1.0 要素をコンポーネントとして分離して組み合わせて作るWebConponents
膨大になりがちなjsやcss等をカプセル化する事ができるのはかなりメリットな気がする。
以下の要素で構成。

• Custom Elements
• HTML Imports
• Template
• Shadow DOM

カスタムエレメントカタログもあるらしい。
Custom Elementscustomelements.io

所感

全体的に、jQueryに依存したものがどんどん減ってきている現状がある。 その上でいつそれを捨てるかという判断も必要になってきそう。

「俺とAngular2」
Angular2とは何か。採用されたTypeScriptとは何か。
TypeScriptとはMSのOSS！それをWindowsの環境で開発してみよう！
加藤 真透さん ( @PharaohKJ) - PhalanXware代表

俺とAngular2 : スライド TypeScript - プレゼン 俺とAngularJS 2 の ソースコード部 - Qiitaqiita.com

Angular2とTypeScriptについて

Angular1.x と Angular 2.xの違い

設計思想が違うみたいで、Angular2では双方向データバインディングが廃止されている模様。
よって、Angular2.xはまだおすすめできない。

Angular1.xはAngular.js Hubから触る事ができる。

TypeScript

• 静的型付けとオブジェクト指向の導入が特徴
• Interface / Class が利用可能
• TypeScriptはJavaScriptのスーパーセット。ES6の機能を取り込んで、型システムを取り入れた言語

TypeScriptはType Script Playから触る事ができる。

所感

先に触りそうな所で、Angular1.x。
TypeScriptはaltJSという立ち位置だけど、
ひとまずは、CoffeeScriptを触ってみて都度必要に応じて
TypeScriptを突っつくのもアリかなという感じでした。

全体まとめ

名前だけ聞いたことがある…ってものがいくつか話の中で出てきたので、

• 具体的にどういう用途で使われるものなのか。
• どういった経緯でそれが使われているのか。

という所が知れる良い機会だった。

御二方にお聞きした内容を参考にしながら、
触れる所から触っていこうと思った次第でした。

実際に手を動かして覚えるもくもく会形式の
「kakitai.js」というセミナーが7月に予定されているのですが、
加藤さんによる「Angular.js」のハンズオンセミナーがあるとの事で、
そちらにも参加していきたいと思います:-D