沖縄の梅雨も中盤に入った本日、Gwaveで行なわれた「Okinawa Frontend Meetup #1」に参加してきました。

Okinawa Frontend Meetupとは？

イベントページから引用すると、Web開発におけるフロントエンドの開発、デザイン、UX/UIについて情報交換したり新しい情報をキャッチアップできる場。UX/UIやデザインを学びたいエンジニアの方、JavaScriptによるフロントエンドのプログラミングを勉強したいデザイナーの方が、お互いに学べる場の提供を目指すコミュニティだそうです。

第1回は「エンジニア目線とデザイナー目線、両方からみた昨今のフロントエンド開発」

初回のテーマは、バリバリの現役フロントまわりのエンジニア/デザイナーである2人から、最近トレンドになっている技術を幅広く紹介するというものでした。

エンジニアとデザイナーの境界がなくなってきた今日

公演中にも、何度かでていた話ですが、最近エンジニアとデザイナーの境界は、徐々になくなってきているなぁと思います。デザイナー目線で言えば、従来は単純にビジュアルだけを考えればとかったものが、ある程度バックグラウンドの処理を考えた上でのデザインが必要となりました。
・通信や処理中の待機時間を考慮したローディングアニメーション
・処理能力や画面のサイズの異なるデバイスでもストレスの無い反応をするボタン
という感じで、どう実装されるかを知っておかないと、「ボタン押したけど、反応するまで1秒ラグがあって、見た目は綺麗だけどなんか気持ち悪い！」ってデザインになったりします。

デザイナーと言って逃げれない時代

こうなってくると、デザイナーもある程度フロントエンドの知識があった方が話がはやいです。自分でやれちゃうのがベストですが、さわり程度でいいので知っていると、エンジニアさんとスムーズなコミュニケーションができるかと思います。開発の時間は無限ではないですし、いかに連携のロスをなくして進める事が出来るかが、UXを作り込めるかの鍵になります。

知ってたキーワードは半分だけ

前置きで偉そうに話していましたが、実際に公演を聞くとフロントエンドでよく使うキーワードのうち、半分くらいが知らないものでしたた。さらに「使った事あるか？」と聞かれると、その半分くらいまで減ります。完全に流れの早いIT業界についていけていませんね。ということで、復習までに今日でてきたキーワードをまとめたいと思います。間違っているものもあるかもしれません。その時はtwitterとかで教えてください。

流行のフロントエンドキーワード

Node.js

https://nodejs.org/
サーバー側で動作するJavaScriptのフレームワーク。JavaScriptの弱点でもあるシングルスレッドの処理を、ノンブロッキングI/Oで非同期に実行できます。リアルタイムな情報の更新もでき、Facebookやtwitterにある「新着きましたよ！」という通知とかもこれらしい。

npm

https://www.npmjs.com/
Node Package Managerの略。Node.jsとセットで使われていて、Nodeで作られたパッケージをコマンドラインから簡単に管理できるツールです。

Gulp

http://gulpjs.com/
Node.jsを使ったタスクの自動化ツール（タスクランナー）。CSSやjavascriptのコードを圧縮したり、Sassをコンパイルしたり、画像を圧縮したり、毎回やるのがめんどくさい作業を自動化してくれる素敵な子です。
中でも、複数ブラウザでスクロールやクリックの動きを同期してくれるのツボ。検証作業がめちゃくちゃ楽そうです。

Grunt

http://gruntjs.com/
Gulpと同じくタスクの自動化ツール（タスクランナー）。こちらが先にリリースされました。
gulpはNode.jsだけど、grantはjavascriptを利用どっちもNode.jsでした。。最近オフコンと呼ばれ、設定ファイルが短く、動作速度もはやい、後発のGulpに移行してるとか。

Bower

http://bower.io/
twitter社が開発したフロントエンドで使うファイル（画像・CSS・JavaScriptなど）を簡単にインストールできるツールです。

Angular JS

https://angularjs.org/
Google製のJavaScriptのアプリケーションフレームワークです。データバインディングなどクライアントサイドで必要な機能が一通り揃っています。

React

https://facebook.github.io/react/
Facebook製のJavaScriptのライブラリです。フレームワークではなく、UI部分のみを提供しています。

Vue.js

http://vuejs.org/
Angular JSと同じく、JavaScriptのアプリケーションフレームワーク。最近下火で、 Angular JSやKnockout.jsに流れる人が多いとか。

haml / slim

http://haml.info/
簡単に短い構文でHTMLをマークアップできる。Sassのように最終的にコンパイルして使います。素早くマークアップするにはEmmetがありましたが、さらに早くなるっぽい。コンパイル前提なのでソースコードに変数・条件分岐が使えるのも利点。

sass / scss

http://sass-lang.com/
Syntactically Awesome Stylesheetsの略。
CSSに変数や関数、入れ子構造を記述できる様にしたもの。こちらもコンパイルして使います。

altJS

Alternative Javascriptで、JavaScriptの問題点を改善、コンパイルして使います。TypeScriptやHaxe・CoffeScriptなどもみんなこれ。

OOCSS/SMACSS

Object Oriented CSSでオブジェクト指向でCSSを設計すること。使い回せるCSSを使って肥大化しないCSSにしようねという概念。言葉は知らないけど、たぶんみんな出来てる。

Middleman

https://middlemanapp.com/jp/
Rubyで作られた、静的サイトの生成ツール。前述のaltJS・Sass・hamlを自動コンパイルしてくれる優しい子。

browserify

http://browserify.org/
Node.jsのrequire分をつかえるようにするもの。

なんでもコンパイルな時代

多いですね。とっても多いですね。色々とありますが、全体的にコンパイルな時代になってきました。
HTML/CSS/Javascript、今までW3C様は策定した規定通りに律儀に書いていたのを、より簡単に、より自動的にできるようになりました。でも最終的なアウトプットはきちんと今までと同じってのも面白いです。
覚える事がいっぱいあるなぁ、そんなことを感じたイベントでした。

最新のコーディング情報