忍者ブログ
プログラマ、ララ・ベル子さんのゆるふわ奮闘記。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

HTML5 Conference 2016 に行くよっ!

公式Twitterでもつぶやいたけど、『HTML5 Conference 2016』に行って来ます。

ちなみに関係ないけど、今日は女性が歌う平井堅をyoutubeで聴きながらコーディングしてみたベル子です。いやー女子の声ってホントに癒やされるー。

欅坂46 『サイレントマジョリティー』にハマって聴いていたら、その関連で乃木坂もオススメされて聴くようになって、そのついでに元々大好きなKPOPガールズアイドルも挟みながら聴いていたら、なぜかややセクシーな動画とかもオススメされるようになったので(たぶんJPOPアイドルは関係なく聴いてるKPOPアイドルがセクシーすぎるという噂w)、焦って無理やり平井堅とか洋楽とかRADWIMPSとか織り交ぜながら聴いてみたら、元に戻ってきました。
ふーやれやれyoutubeよ、性別を念視してくれYO。

おっと、話がそれちゃいましたが本題に戻って
「HTML5カンファレンスに行くからみんなで行こうよー」と会社の人々を誘ってみたら、TTパイセン以外の人に華麗にスルーされて、さらにTTパイセンも枠がキャンセル待ちになってたので一人で行くことになったことをここでお知らせしておきます。
一人くらい一緒に行ってくれてもいいと思う。←

というわけで「なるほど、まったくわからん」を回避するため、今更ながらHTML5について下調べしてみることにした。

このセッション一覧の中から、「なるほど、まったくわからん」と、「あーそれね。はいはい聞いたことあります。3年前から知ってMASU」を探していくよ★
(一部、個人的な感想です。)
http://events.html5j.org/conference/2016/9/session/

React
view専用のjsライブラリだよね。知ってるし、使ったことある!

ReactNative
使ったことないけど聞いたことあるよ!
Reactベースでネイティブアプリを作れるSDKかな?

JavaScript Fatigue
初耳w
まあみんなjs(jsフレームワーク)に付き合うのに疲れたよってことだろうね。
そうだろうね。

Service Worker
聞いたことある!けどWeb Workerとの違いがいまいち分かってない。
なんかバックグラウンドでjsが動くみたいなイメージかな。

Progressive Web Apps
初耳。
何かの技術ではなく、よくあるGoogleの布教活動的なあれっぽい。

Push Notification
知ってる知ってる!こないだ調べた!
Webで使えるPush通知だよね。

Offline Cache
Cache APIとか聞いたことあるけど、それのことかな。。。

WAI-ARIA
聞いたこともないから、調べてみたらアクセシビリティの何かの仕様らしい。
アクセシビリティの仕様の読み方が分からないのでアクセシビリティ的にどうかと思う。

Houdini
上のやつより読みにくいよ!W3Cが取り組んでいる新しいCSSの拡張仕様のようだ。
ホウジニかな。。フーディナイかな。フーディーニかな。
フーディーニで変換候補に出てきた!!

WebAssembly
とりあえずQiita様読んでも分からない
http://qiita.com/kenju/items/3ec95aebd30bc95b862c

WebVR

私が狙ってるのはこのセッションだっ!
WebでVRしようよ、ただそれだけ。ゴーグルみたいなの付けて、バーチャルインサニティをリアルで感じようぜ。

WebGL
Webで3Dグラフィックやるやつ。
興味はあるけど何か作ってみたりしたことはない。

A-Frame

WebVRのフレームワークかな。

WebRTC
ウェブでボイチャとかビデチャとかするやつ。
これの実装進んだら自分で好きな仕様のSkypeが簡単につくれるようになるかもね。

Raspberry Pi
手のひらサイズのシングルボードコンピュータ。
最近IoTやりたくて調べてるけど、基本的に電気の知識ないから抵抗とかよく分からなくて難しいなーと思う今日このごろ。

Web Audio
Videoタグの仲間みたいなやつかな?

Web MIDI
上のやつの仲間みたいなやつかな?

Web Bluetooth
これも仲間っぽいよね!

Arduino
OSが積めないほうの手のひらサイズのマイコン。
ラズパイはLinuxOS積んでるからいろいろできるけど、こちらはパソコンにつなげるだけでプログラミングできちゃうという手軽さがあって、いい感じ。

Angular2
噂でよく聞くやつ!いつ頃リリースなんだろう?

Webpack
使ったことある!てんこ盛りのモジュールバンドラー。Laravel 5.3のElixirから標準らしいよ。

Ionic2
聞いたことないけど、フレームワークっぽいよね。

Cordova
聞いたことある。ハイブリッドアプリを作るためのフレームワークみたいなやつだよね。

Unity
実はチュートリアルをやってみたことがある(ドヤ顔)。
簡単に3Dゲームが作れる統合型ゲーム開発環境。
何を隠そうデジハリVFX科を卒業しているので3dsMaxとMayaを使ってみたことがある。という事実を私はひた隠しにしている。
そんな私がデジハリで学んだことは、
「3DCGなんて1年くらいやってみたところで人に見せられるものは何も作れない。」

Material Design
知ってる!Googleが布教してる例のあれ!そしてその宗教に則ったUIが作れるデザインフレームワークのこと。

Atomic Design
上の仲間的な匂いを感じます!

Jobs To Be Done
何だか分からないけど響きがカッコいい。憧れる。

OOUX
もう検索する前から何の略か予想ついて少しにやけてしまうエンジニアあるある。OOで始まったらもうアレしか無い。
そう、みんな大好きオブジェクト指向。

Adobe XD
どうせ新手のアドビツール。


ということで出発前のまとめはこんな感じかな。
どのセッション行こうか迷っちゃうなぁ。

拍手[0回]

PR

マテリアルデザインのモーションのドキュメントを翻訳してあげた

どうも!
コーディング中にマテリアルデザインのページにMotionのページが追加されているのに気がつきました。5月ごろに追加されたみたいです(気づくの遅)。
https://material.google.com/motion/material-motion.html
(マテリアルデザインが何だか知りたい人はGoogleで検索よろしく!!)

結構、マテリアルデザインのコンセプトって読んでみるとなるほどねーって感じで面白いんですが、英語なので読む気が湧かないじゃないですか。
だから今回は私が翻訳してあげました(ドヤ顔)。
忙しいのに翻訳してあげたんだから、みんな感謝してよねっ!(なぞのツンデレキャラ)

マテリアルモーション

マテリアルデザインの動きは、美しく流動的に、空間の関係、機能、および意図を説明するために用いられるものである。

動きはなぜ重要なのか?

動きは、どのようにアプリが構成されていて、何ができるのかということを示すことができる。

動きが提供するもの

  • ビュー間での焦点のガイド
  • もしユーザーがジェスチャーを完遂したら何が起こるのかのヒント
  • 要素間での階層的、かつ空間的な関係性
  • 裏で起こっていることから注意をそらすこと(コンテンツの取得や次のビューのロードなど)
  • 特色、洗練さ、喜び

マテリアルはどのように動くか?

マテリアル環境は、重力や摩擦といった現実世界の力から得たインスピレーションを描くものである。

これらの力は、ユーザー入力が画面上の要素に影響する際や、どのように要素が相互に作用するかということを映し出すものである。

マテリアルなモーションの特徴

レスポンシブ

マテリアルはユーザー入力には素早く正確に反応する必要がある。

ナチュラル

マテリアルは現実世界にある力からインスパイアーされた自然な動きを表現する。

認識力がある

マテリアルはユーザーや周りにあるマテリアルを認識していて、オブジェクトに引き寄せられたりユーザーの意思に適切に反応できる。

意図的

正しい時に、正しい場所へユーザーの焦点を誘導する。

よいトランジッションを作る要素は?

動きはスピーディーに

必要以上にユーザーを待たせるべきではない。

動きは明確に

トランジッションは、明確で簡潔で統一感があるべきである。
一度にやりすぎるのは避けるべき。

動きは調和的に

マテリアル要素は速さ、反応性、意図によって統合される。
アプリケーションのモーション体験は、そのアプリケーション内で一貫している必要がある。

動きの結果

動きを使うことによる利点は、次の、マテリアルモーションを採用したアプリと、していないアプリの2つの例を見ることで確認できる。



※上記の翻訳は、個人的な翻訳であり、正確さを保証するものではありません。
あと、専門用語で言うところのベタ翻訳だから読みづらいとか、そういう苦情は一切受け付けない。

ではでは、またねーーー!!

拍手[0回]

フロントエンドをモダンにするための用語まとめ(4)大好評だけど、ごめんね最終回なの

こんばんは。ベル子です。 

フロントエンドをモダンにするための用語まとめシリーズの最新号です。

今回はいつもに増して、長いっす。
そして一番おもしろいパートに来ました。
今までのはまとめは、実はちょっとした前菜だったのです!!

そして、フロントエンドは、さながら群雄割拠の戦国の世だということを改めて思い知りました。
ちなみに私は無双ではガラシャ推しで、三国では大喬使いです。

このシリーズのバックナンバーをご覧になりたい方は、
下のリンクより、よーよーちぇけらっちょしてみて下さい。

フロントエンドをモダンにするための用語まとめ(1) 
フロントエンドをモダンにするための用語まとめ(2) 
フロントエンドをモダンにするための用語まとめ(3)

【MVVM】

(Model View ViewModel)
モデル、ビュー、ビューモデルからなるMVCの派生デザインパターンのこと。MVVMの特徴は、ビューとビューモデルの双方向データバインディング。
双方向データバインディングとはビューのデータとビューモデルのデータを結びつけて、どちらかが変更されたら、もう一方も更新するという仕組みのこと。

【MVW】

(Model View Whatever)
モデル、ビュー、その他の何かしらの構造を持つアプリケーションデザインパターンのこと。
Angularの開発者がMV*というフレームワークが世の中に溢れ、議論が絶えないことから、Angularはビューとモデルと何かしらで成り立つMVWフレームワークだと宣言したことに由来。
余談だが、アメリカ人は「どうでもいい」と言いたいときに"Whatever"と独特のリズムをつけて言う。長々と彼氏の自慢をされたときに「つーか、どーでもいいんだけど」というニュアンスで使う。もちろんケンカを売る言葉だが、非常によく使われる。

【underscore.js】

JavaScriptユーティリティライブラリ。JavaScriptでコーディングする際に、あったら便利な関数を拡張するライブラリ。jQueryと被っているメソッドも。
またunderscore.jsを使うことによりJavaScriptで関数型プログラミング的なコードを書くことができるらしい。

【Backbone.js】

JavaScript MV*フレームワーク。JSフレームワークの先駆けにして愛用者多数。
underscore.jsに依存。部分的にjQueryに依存。
標準では双方向データバインディングがない。

【Marionette.js】

Backbone.jsのViewまわりの機能を拡張するプラグイン。

【Stickit.js】

Backbone.jsのデータバインディング機能を強化するプラグイン。
これを使うことで双方向データバインディングができるようになる。

【Knockout.js】

先発のJavaScript MVVMフレームワーク。宣言型双方向データバインディングが特徴。
シンプルで学習コスト低め。レガシーブラウザーをサポート。

【AngularJS】

Googleが開発しているJavaScript MVWフレームワーク。
JavaScriptフレームワークと言えばAngularのことを指すと言っても過言ではない最も有名なフレームワーク。フルスタックで機能は豊富だが、学習コストが高いことで知られる。レガシーブラウザーにも対応している。1.x系と全く互換性のない2系がリリース予定という衝撃展開。

【React.js】

facebook社製で、UIに特化したJavaScriptライブラリ。MVCのViewに特化したライブラリで一方向データバインディングが特徴。コンポーネント指向。
仮想DOMの採用で、差分のみをレンダリングするため、高速な処理が可能と言われている。大規模アプリケーションのVeiw部分に使用されることを想定して作られている。
React自体はシンプルで学習コスト低めだが、Flux実装しようとすると学習コストが高くなる。ViewだけのフレームワークなのにAngularと同等のファイルサイズがある。
当初はBackboneなどのMV*フレームワークと組み合わせて使われることが多かったが、最近ではオレオレFlux実装かFluxフレームワークと組み合わせて使うのが一般的になってきた。
仮想DOMを採用しているため、DOMを直接触りに行くjQueryとの共存には、コツが要る、というよりやめたほうがいい気がする。

【仮想DOM】

Reactが採用したことで話題になった。仮想的なDOMをJSオブジェクトで構築し、そのツリーの差分を検出することで、実際のDOMでは差分のみを書き換える。こうすることによりDOMの更新や書き換える際のコストが大幅に減る。仮想DOMのみの専用ライブラリも存在する。また、レンダリング速度の問題だけでなく、素のJSでDOMを構築するためサーバーサイドでも利用できる。
Angular2では仮想DOMが採用される予定らしい。

【JSX】

XMLに似ているJavaScriptの文法拡張。Reactはテンプレート部分にこのシンタックスを使うことを推奨している。HTMLに似ているため、分かりやすい。JSXで書いた場合はJSXTransformer.jsを読み込ませるか、プリコンパイルする必要がある。JSXTransformer.jsを読み込ませるほうは変換にコストがかかるためプロダクション環境では推奨されていない。

【Flux】

MVCと比較されるfacebookの人が提唱しはじめたwebアプリケーションのアーキテクチャ概念のこと。
アプリケーションの処理フローが一方向のみに流れるデザインパターンにカッコいい名前をつけてみたということ。いわゆるObserverパターン!!
名前がカッコいいので、みんな言ってみたくなったしやってみたくなった。たぶんそんな感じで、いろんなフレームワークやオレオレ実装が氾濫した。

【Redux】

後発のFluxフレームワーク。乱立するFluxフレームワークの中で後から登場し、人気を得た。現在、Fluxフレームワークの中で一番スタンダード。だが、触ってみた人のレビューを読むと、「これってFluxなのかな?」という疑問が書かれている。公式ドキュメントにも「Fluxかと聞かれたら、YesでもありNoでもある」とある。

【Vue.js】

後発のJavaScript MVVMフレームワーク。分かりやすくシンプルなAPIと双方向データバインディングが特徴。後発フレームワークのため、先発フレームワークのいいとこどり感がある。AngularJSに影響を受けている。
IE9以上のモダンブラウザを対象としているため、ライブラリ自体も軽量。
AngularJSのようなフルスタックJSフレームワークに比べて機能は少なめだが、シンプルで学習コストが低い。他のフレームワークとの連携が考慮されている。
他に有名なMVVMフレームワークとしてKnockout.jsがある。
後発のため、日本語での解説記事は多くないが、ドキュメントが充実していてボランティアにより翻訳されている。だが個人的には、この翻訳がほぼ直訳なので、原文ドキュメントも同時に参照することをオススメする。

【Vuex】

Fluxにインスパイアされて作られたVue.js用のアプリケーションアーキテクチャ。Vuexの他に、Vue.jsで中〜大規模アプリを開発する場合、Reduxと合わせるという選択肢もドキュメントでは、提示されている。

【SPA】

シングルページアプリケーションのこと。長すぎるのでイケてる人のブログ記事などでは、ほとんどこの表記。
シングルページアプリケーションとはユーザーがWebアプリケーションを使っている間、ページ全体のロードが発生せず、単一のページで完結するアプリケーションのこと。ネイティヴアプリのような優れたレスポンスとユーザーエクスペリエンスが提供できるとして、近年、注目を集めている。
しかしSPA特有の問題として、初期ロードが遅くなる、クローラにうまくインデックスしてもらえないなどの問題がある。

【SSR】

サーバーサイドレンダリングのこと。
シングルページアプリケーションでは、初期ロード時にブラウザがJSを評価した後で、サーバからデータを取得し、それからレンダリングを開始するため、初回のロードがどうしても遅くなる。
さらにクローラはJavaScriptをブラウザと同等に解釈できないため、空のWebページとしてインデックスされてしまうというSEO上の問題もあった。
昨年の10月に、Googleが公式にAjaxクロールのための推奨構成の廃止を宣言したことにより、Google、または一般的なサーチエンジンのクローラはSPAをブラウザ並みに解釈すると伝えられたが、SPAの性質上、コンテンツの100%がクロールされるのかは実際のところ分からない。
これらの理由から初回ロード時のみ、サーバーサイド(node.js)でHTMLを構築してレンダリングさせるという解決策があり、これをサーバーサイドレンダリングと呼ぶ。
サーバーサイドレンダリングに対応しているフレームワークは、現状で、ReactやEmberなど限定されている。

【Isomorphic】

読み方はアイソモーフィック。「同形の」という意味の形容詞。フロントエンドとバックエンドでコードを共有するという設計思想を表現する際に使われるキーワード。
最近では同じ意味で、UniversalなJSと表現されることもある。どんな環境でも使えるという意味合いから。

例)Isomorphicなフレームワーク。
isomorphic化。
isomorphicでpluggableなFlux実装。

3番目を分かりやすく言い換えると、「フロントエンドとバックエンドでコードが共有できて、さらに着脱が可能な、処理フローが一方向のみに流れるアーキテクチャを採用したアプリケーション実装」ということ。
3番目はFluxibleというyahooが開発したFluxフレームワークの説明において見られる表現。

【History API】

HTML5で拡張されたブラウザの履歴情報を操作するAPI。
シングルページアプリケーションや非同期によるページ更新を行う場合、同一ページ内でコンテンツが更新されるためURLが変わらない。そのため、ユーザーが直接URLを叩いてコンテンツを読みに行ったり、ブラウザの前後ボタンを使用しての前後ページへのアクセスができなくなってしまう。それを解決するためHistory APIを使用してスクリプト上からURLを変更する。

【Reactive Programming】

オブジェクト指向プログラミング、関数型プログラミングなどと同様のプログラミングパラダイムの一つ。
パラダイムとは、ある時代に、「これがオレの考える◯◯」的なことを言い出した人に、多くの人が賛同して捲き起こる特定分野においての潮流のこと。
リンク先からの引用だが、「データフローの宣言によって、片方の変化を他方に自動で伝播させる」というのがリアクティブプログラミングの基本的な考え方で、MVVMに見られるデータバインディングの仕組みがこれに当たる。
また、リアクティブプログラミングの新たなアプローチとして近年注目されているものに関数型リアクティブプログラミング(FRP)というものがあり、リアクティブプログラミングに関数型プログラミングの思想を加えたものということのようだ。
単にリアクティブプログラミングと言った場合、こちらの関数型リアクティブプログラミングのほうを指すことが多い。
そもそも関数型プログラミング自体がよくわかっていないため、関数型リアクティブプログラミングが何なのかは、難しくてよく分からなかった。だから、知りたい人はリンク先を参照してほしい。
たぶん、非同期処理が多いとコールバック地獄に陥るし何かと面倒くさいから、そうならないためにイベントを配列のようなストリームという箱に入れて、それを使って何やかんやするよ!みたいなことだと思う。
https://html5experts.jp/ahomu/13333/
http://qiita.com/hirokidaichi/items/9c1d862099c2e12f5b0f

【FRP】

関数型リアクティブプログラミングのこと。長いので、イケてる人のブログではだいたいこの表記。

【Elm】

関数型リアクティブプログラミング言語。純粋関数型プログラミング言語Haskellをベースに作られた静的型付けされた言語。
Elmで書かれたコードはhtml/CSS/JavaScriptにコンパイルされる。

【RxJS】

.NETのReactive ExtensionsというライブラリのJS版。関数型リアクティブプログラミングJSライブラリ。JSライブラリなのでコンパイルの必要がなく読み込むだけでいい。監視可能なコレクションや配列を使って、非同期なイベントベースのプログラムを作成できるライブラリ。
http://liginc.co.jp/web/js/151272

【Bacon.js】

RxJSにインスパイアされて作られた後発のFRPライブラリ。

【Cycle.js】

RxJSに依存する一方向にデータが流れるFRPフレームワーク。仮想DOM、サーバーサイドレンダリングをサポート。一方向のデータフローということで、概念的にはFluxにも近いのかな?でもFRPなんですよね?ということで、最も私にとって何がなんだか分からないフレームワーク。
開発者はFlux Challengeという、あるお題のFlux実装を募集し検証するということをやっている。Flux実装は複数の非同期処理をエレガントに行えるのかということに疑問を持っており、それを検証しようとしている模様。

【immutable.js】

facebook社製、不変データコレクションを扱うためのライブラリ。

【PhantomJS】

コンソールから実行できるWebKitベースのヘッドレスブラウザ。ヘッドレスブラウザとはGUIのないブラウザのこと。
JSの自動テストで使用する人が多い。

【Nightmare】

PhantomJSのラッパーライブラリ。テストコードがより簡潔に記述できる。v2になり内部ブラウザがPhantomJSからElectronベースとなり視覚的にテストしている様子が確認できるようになった。

【Electron】

Githubが開発しているHTML/CSS/JavaScriptを使ってクロスプラットフォームのデスクトップアプリケーションが作成できるフレームワーク。Atomエディタのネイティヴ部分をSDKとして公開したのが始まり。オープンソースのWebブラウザであるChromiumを内蔵しているため、ランタイムのいらない独立したアプリとして動作する。
SlackのWindows版でも使われている。
ブラウザを内蔵しているためファイルサイズが大きくなる。

【Karma】

Angularチームが開発したNode.jsで動作するJSテストランナー。JasmineやMochaなどのテストフレームワークを使用してテストを行う。

【Jasmine】

Angular標準のJSテスティングフレームワーク。BDDを採用しておりRSpecと似た記法で記述する。

【Mocha】

JavaScriptテストフレームワーク。Nodeモジュールをインストールしてコマンドラインでテスト実行する方法と、htmlで読み込ませてブラウザで実行する方法がある。TDDとBDDどちらの記法でも書ける。アサーションライブラリはバンドルされてないのでお好みのライブラリを選択する必要がある。アサーションライブラリと言うのがイマイチよく分からないけど、it.should.have.('hogehoge')みたいなテストコードで出てくる表現を記述できるようにするためのライブラリっぽい。有名なのはChai、shouldなど。

【ESLint】

ES6対応のJavaScript構文チェックツール。拡張性が高く、柔軟性のあるルール設定が可能。gulpのタスクに組み込んで使える。JSHintから乗り換える人が出てきている後発のリントツール。
http://qiita.com/inuscript/items/dcf48f56d8f484c0a1a8

【CreateJS】

HTML5のCanvasを使ったアニメーションが作れるフレームワーク。
何かと紛らわしい名前のため、まとめに入れてみた。



ということで数回にわたりお送りしたフロントエンド用語まとめ、いかがだったでしょうか。途中で私のココロの声がダダ漏れしてしまうハプニングもありましたが、概ね冷静な解説ができたかと思います。

思っていたよりたくさんありましたねー。
こうやって見ているとRubyがWeb業界に与えた影響は非常に大きいですね。
あと、フロントエンドにもサーバーサイドの文化が流入してきていて、逆にサーバーサイドにもフロントエンドの文化が流入してきていて、お互いに影響を与え合っているという感じでしょうか。

昔は住む世界が違うと思ってた大嫌いなアイツ。だけど、最近はなんだかいつも気になって仕方ない。これって、もしかして恋??ううん、絶対ちがう。でも…。

うん、一番いい時期だな。

こういうおニューな技術の動向について、少し流し読みしておくと、イケてる人に話しかけられたときに
「ああ、Electronですね!知ってますよー。マカロンよりもっちりしてて美味しいですよねー」という定番のギャグを飛ばさなくて済むし、「ヘイ、シリー」を連呼しなくていいので安心です。
(先日、飲み会で酔っぱらってSiriさんに何度も絡んだら、Siriがガチギレして、再起動するまで何の質問にも答えてくれなくなったのはここだけの秘密)

でも専門用語とか横文字とかいっぱい言うと、オタク感(本来の姿)が出てしまいやや気持ち悪いので、「えーそれなんですかぁ? ◯◯さんて、すごく物知りでイケメンですよねぇ」って部活の後輩風に答えたほうが、ポイント高いかもしれないです。
特に女子は、優秀だけどオタクという印象を相手に与えても何もいいことないです。マニアしか釣れないです。

冗談はさておき、コードの分離に関心が集まっていたかと思うと、むしろコードを共有しようという流れがあったりと、人はいろんなことを考えるものですね。Node.jsの人気の高まりにつれ、Webアプリケーションの世界では、フロントエンドとサーバーサイドの境界はあいまいになっているのかもしれません。

ページ遷移なしに状態を保持しながら複雑な更新を行うということは、これからはフロントエンド側のコードもきちんとした設計思想に則ってオーガナイズする必要がありそうです!
フレームワークなしでやってると、どうしてもJSが「きゃー今散らかってるから、絶対見ないでぇー」な雰囲気になってきてしまいます。
そういった意味で、ハイレベルなフロントエンド開発がこれからのWebアプリケーション構築では必須になっていきそうです。

Sass、Lessもそうですが、後発が流行ったと思ったら先発が巻き返したりもしますし、Web業界の移り変わりはホントに目まぐるしいですね。
でも目まぐるしいから面白いとも言えるし、どんどん便利になっていくとも言えます。

新しいだけじゃなくて、すごいだけじゃなくて、クライアントにもエンジニアにもうれしい、そんなフロントエンド構成を選択していきたいものですね!!あと未来の自分と同僚のためにも!!
(それが弊社の社是だし)

TL;DRってまさにこういうときに使うべき。

では、また来月会おう。

拍手[1回]

フロントエンドをモダンにするための用語まとめ(3)

どうも!

フロントエンドをモダンにするための用語まとめシリーズの最新号です。

フロントエンドをモダンにするための用語まとめ(1)
フロントエンドをモダンにするための用語まとめ(2)


【jekyll】
みんな大好きマークダウン記法で記事を書き、黒い画面で呪文を唱えると、静的なhtmlが大量に出来上がる静的サイトジェネレータ。主にブログ用。
Rubyで書かれているのでRuby使いとの親和性が高い。コンパイル後はただの静的ファイル群のため、扱いが非常に楽。WordPressに疲れた人向けらしい。

【シンタックスシュガー】
日本語で糖衣構文。ある構文を、より簡単に人間が読み書きできるように書き換えた構文のこと。

【CoffeeScript】
JavaScriptのシンタックスシュガーと紹介されることが多い。
JavaScriptをRubyライクに記述できるメタ言語。Ruby on Railsで標準サポートされていることから、Ruby使いに愛用されている。
Nodeモジュールでコンパイルができるほか、公式サイトにはオンラインのインタープリタがあるので、ちょっと括弧やセミコロンを書くのが面倒になったら、気軽に使うことができる。
クラスベースオブジェクト指向な書き方ができる(←本来の使い方)。
変数展開ができたり、変数宣言が省略できたりして、JavaScriptで陥りがちなミスを未然に防いでくれるという効能もある。
Laravel ElixirでもCoffeeScriptを標準サポートしている

【TypeScript】
マイクロソフトが開発しているaltJS。JavaScriptに静的型付けやクラス、継承、インターフェイスのようなオブジェクト指向プログラミング構文拡張を加えた拡張言語。
また構文拡張という点からES6を先取りできるトランスパイラーであるBabelとの比較もされる。2015年3月AngularJS2.0がTypeScriptで開発されることが発表され、注目を浴びた。
また、TypeScriptの外部モジュールシステムはCommonJS形式とAMD形式のどちらにもコンパイルできる。

【Edge】
マイクロソフト社製の最新ブラウザー。マイクロソフトは後方互換性や独自性にこだわったため、ブラウザのモダン化、Web標準化に遅れをとり、モダンブラウザという指針を掲げては失敗してきた。その経験から、IEを切り離した新ブラウザEdgeの開発を決断することとなった。新ブラウザEdgeはIEのHTMLレンダリングエンジンTridentを搭載しない全く新しいブラウザだ。
Tridentは1997年発表のIE4で初めて搭載されたレンダリングエンジンで、20年近くマイクロソフトはこのエンジンに改修を続けてきた。使い古されたこのエンジンと別れを告げること(厳密にはTridentをフォークして大量の古えコードを削除)そして今後は各OSで最新のブラウザのみをサポートとすることを発表し話題となった。
また、発表時にこれからは周りと足並みを揃えることも誓った。これをマイクロソフトは相互運用性と表現している。現在出てきているベンチマークテストの結果からすると、ようやく他のブラウザと同じ水準になった感がある(もちろん私の個人的な感想)。生まれたてのブラウザとしては悪くないとの評価も見られた(こっちはすごそうな人の意見)。html5テストの結果は他と比べてまだ低いが、驚くべきことに次世代JavaScriptと呼ばれるECMAScript6のサポート率が飛び抜けて高い。Edge13ではBabelのサポート率71%を大きく上回る84%の文法に準拠する。Chromeの65%と比べるとその差は20%に迫る。
このような背景から、ユーザーエージェントにChrome、AppleWebkit、Safariなどの文字が入り乱れ全部盛り状態となっているのも特徴だ。
ES6対応状況:http://kangax.github.io/compat-table/es6/

【Yeoman】
yo、Bower、Gruntの3種のツールで構成される統合ウェブサイトジェネレートワークフローのこと。雛形をつくる→ライブラリを取り込む→タスクランナーを走らせる。このような開発フローを提案する概念的なもの。またはyeoman-generatorのことを指す。

【yo】
Ruby on Railsのscaffoldに影響を受けて作成されたNode製の雛形作成ジェネレータ。対話形式で質問に答えていくとモダンなWebアプリの雛形が出来上がる。
npmで公開されている様々なyeoman-generatorを利用することで、お好みのフロントエンド、サーバーサイドのライブラリ群を取り揃えたWebアプリテンプレートが作成できる。さらに、自分でgeneratorを作り公開することもできるので、自分好みのライブラリを取り揃えた雛形を、黒い画面に呪文を唱えるだけで、いつでもすぐに展開することができる。

【タスクランナー】
面倒な作業を自動化するビルドツール。何の作業を自動化するのか分からない人のために、伝統的な手作業のWeb制作風景をおさらいしよう。

1.HTMLを全部カッコつきで丁寧に書く。
2.リセット用CSSとフレームワーク用CSSと共有CSSと
  ページユニークCSSと共通コンポーネントCSSを別々のファイルで作成する。
3.共通JSとページユニークJSとコンポーネントJSを別々のファイルで作成する。
4.共通で使う画像を1枚にまとめてCSSを調整。
5.構文チェックにかける。
6.納品用にファイルを加工するため本番用のフォルダを作成する。
7.自作のCSSを1枚にまとめる。
8.自作のJSを1枚にまとめる。
9.自作で作ったCSSとJSを圧縮する。
10.依存関係のあるJSファイルを1つにまとめて圧縮する。

一般ユーザー向けサービスのフロント側では少しでも表示速度を速くしてくれとの要求度が高い。モバイルページやアニメ効果を多様したページでのレンダリングスピード向上のために、このような作業をフロントエンドのエンジニアは行う。
この作業は納品時の工数もバカにならないどころか、メンテナンスの際にミスを誘発し自分を呪いたくさせたり、デザイナーやオペレータがCSSを綺麗に戻せなくなるという人間関係のいざこざまで引き起こし、「ちょっとした修正」を「すごくめんどくさい修正」に変えてしまう、非常にやっかいな作業である。
特にCSSスプライトは画像修正のたびに1pxずれてロールオーバーや表示がおかしくなる現象を引き起こす原因となり、画像修正作業をデザイナーに丸投げできない状態にもさせる。
そういう悪夢のような作業を自動でやってくれるのがタスクランナーだ。
さらにCSSメタ言語やJade、CoffeeScriptなど各種メタ言語のコンパイルも自動化できる。

タスクランナーを走らせるコマンドは、ES6構文、Browserify、CoffeeScript、Sassなど、あらゆるものを一度でコンパイルしプロダクション用に加工してくれる魔法の呪文と化している。

【Grunt】
先発のJavaScriptベースのタスクランナー。さまざまなプラグインを読み込むことにより、いろいろなタスクを自動化できる。JavaScript寄りの記述方法。タスクをJSON形式で記述して追加する。
JSON形式なので分かりやすい反面、タスクが増えてきて複雑な処理になってくると、"読みづらいしコード量が多くなる"との意見が見受けられる。

【Gulp】
後発のタスクランナー。
Gruntに比べてコード量が少なくて済む。
タスク量が増えたときにGruntに比べて何をしているのかが分かりやすい。処理がGruntに比べてやや高速(らしい)。
当初はプラグインが少なかったことからGrunt派が多かったが、現在では遜色ない。Node寄りの記述方法で、Node使い以外の使い手にはとっつきにくい。Laravel ElixirではGulpを採用している。
公式サイト
 
【SourceMap】
圧縮したりコンパイルしたりした後のJavaScriptファイルやCSSファイルが元のファイルの何行目なのかというマッピング情報を記録したファイルのこと。
このSourceMapの呪文がコンパイル後のファイルに埋め込んであると、SourceMapに対応したChromeなどのブラウザでは、コンパイル後の難読化したファイルのままでデバッグができるという優れもの。Laravel Elixirでは標準装備。

【polyfill】
読み方はポリフィル。ポリリズムと似ているが全くの別物。
古いブラウザーにない機能を補完するコード(ライブラリ)のこと。

【Web Components】
Googleが提唱しはじめたHTMLをコンポーネント化する概念、または思想のこと。またはその仕様。
ブラウザ標準仕様となることを目指している。
目指しているけど現状ではChromeとOperaとFirefoxで実装が進んでいるだけ。以下のページでブラウザ対応表的なものが見られる。
http://jonrimmer.github.io/are-we-componentized-yet/
だけどChromeでさえabout:flagsで有効化しないと現状では動かない。
でもWeb Componentsのポリフィルライブラリwebcomponents.jsを使えばSafariとIEでも利用できる。

Web Componentsは以下の4つの基本仕様で構成される。
・Custom Elements
・Templates
・HTMLImports
・Shadow DOM
Shadow DOMとTemplatesを使って新たな要素を作成しCustom Elementsを定義する。それらをHTMLImportsでロードすることでカスタムHTMLタグを使用できるようになる。
こんなふうに書くと自分でも何のことやら分からない。
要するに
<lara-beruko></lara-beruko>
と書くと
[かわいいね][セクスィーだね][オシャンティーだね]
の3ボタンができて、クリックするとそれぞれの動きをする、というようなカスタムUIコンポーネントが自作できる。
そんな夢のような仕様のこと。
「あれ、でもそれってどこかで聞いたことがあるような気がするぞ」感がすごい。
Web Componentsの詳細解説→https://html5experts.jp/1000ch/11142/
公式サイト

【Polymer】
Web Componentsにシンタックスシュガーを与えるフレームワーク的要素の強いライブラリ。ブラウザ標準仕様を目指しているはずなのに公式フレームワークが存在するというモニョモニョ感がマジパない。
Polymer の詳細解説→https://html5experts.jp/1000ch/11905/
公式サイト




いかがでしたか。
今回もハンパじゃない文字量でお届けしました。
書いてる私が言うのもなんですが、どんだけー!って言いたくなります。

最後まで読んでくれた真面目で勉強熱心なあなたのために、ちょっとした雑談をしまーす。
今月、というか先月でプログラマになって半年が経ちました!
早いものですねー。

楽しい日もあるし、鬼コーチにしごかれて号泣する日もあったりなかったりもしました。

先日、みんなの先輩こと匠師匠(重複表現すぎw)と話していたときのこと。
「俺も3年くらいはすげー勉強してたからね」
そうか、孤高の天才的なオーラを醸しだしていて一見、天才肌的な感じの匠師匠にも、そんな努力家的な一面があったんですね。
まあ、そうだろうと思ってましたけど。

言い換えたら「3年くらいは、しっかり勉強しないとダメだよ」ということでしょうね。

まだまだ足りない部分の多い私ですが、これからも皆様よろしくお願いしますm(_ _)m

拍手[0回]

フロントエンドをモダンにするための用語まとめ(2)

みんなー元気してるー?
すごいテンションで始めるよー。
今日は、何となく友達に話すような感じで書いてみる★N★E。

今日は、フロントエンドをモダンにするための用語まとめ(1)の第2弾だよー。
前回の記事がリトルベル子の中でとても好評だったから、どんどん続けて書いていこうと思ってる。
簡潔にまとめようと思うと、分かってるつもりだったやつでも少し勘違いしてたり、また新しいことを知ったりして、すっごく自分の勉強になるってことに気づいた。

でもあれだねぇ、やっぱさフロントエンドってホントにいろんな用語というか関連フレームワークっていうか、新しい技術っていうか、そういうの多くてさぁ、それを事前に理解してないと記事とか読んでても、まったく意味不明でチンプンカンプンだしー、勉強会とか行っても登壇者の言ってることの10%も分からないとかあり得ると思う。マジで。

しかも今日はjs関連だから内容マジ濃ゆいのをお茶漬けにしたったぞぉ。
これを全部読めばとりまフロントエンダーの勉強会に行っても涙目にはならない。
はずだょ。

【Node.js】
サーバーサイドJavaScriptの代名詞。
ChromeのJavaScriptエンジンV8とlibなんとかを使ってサーバーサイドでJavaScriptを実行する技術(実行環境)のことである。
『ノンブロッキングな非同期I/O処理で大量の接続を高速に処理することができる』というすごそう感あふれる説明で紹介されるのが一般的。
その辺のすごそうなところはよく分からなくても、猫も杓子もNodeモジュール(パッケージ)はとにかくみんな大好き。
Nodeはバージョンがいろいろあるのでバージョン管理をしている人も多い。
バージョン番号の2ndセグメントの奇数のバージョンが開発版、偶数のバージョンが安定版である。Socket.IOという神ライブラリを使うことでチャットアプリのようなリアルタイム通信アプリが簡単に作れる。と、すごそうな人が言っているのをよく耳にする。
↓この人がPHPのシステムにも簡単に組み込めるって言ってる
http://kimagureneet.hatenablog.com/entry/2015/05/24/171217
LaracastsのマスターであるジェフリーもLaravelと組み合わせて使う方法をLaracastsで紹介している。

【npm】
Node.jsのパッケージマネジャー。Node Package Maneger、略してnpm。
このパッケージマネジャーを使うことにより、サードパーティが作成したNode.jsの拡張モジュールを手軽にインストールすることができる。『スマホにアプリを入れる』とほぼ同じ感覚(私が)。
Gulp、Grunt、Less、Browserify、CoffeeScriptなど近年のホットでクールなクライアントサイド技術の多くがNode製ということから、npm installは「いただきます」と同義語になりつつある(※個人の意見です)。
Rubyのgem。PHPのcomposer。Node.jsのnpm。

【Express】
Node.jsのWebアプリケーションフレームワーク。
RubyのSinatraにインスパイアされた軽量フレームワーク。

【Vanilla JS】
何のフレームワークも使わない素のJavaScriptのこと。
jQueryなどのフレームワークを使ってJSを書くことが日常化したことから、フレームワークを使わない素の言語仕様のみで記述したJSのことを、このように呼ぶようになった。 "Vanilla JSは世界最高速で最軽量のフレームワーク”というネタで知られる。英語圏でVanillaという表現は、何のトッピングもしていないバニラアイスクリームから「ノーマルの」「素の」「面白みのない」のような意味で使われる。

【ECMAScript 6】
ECMAScript 6またはECMAScript 2015と表記される。
コードネームは”harmony”。
ECMAScriptは、通常、私たちがJavaScriptと呼んでいるプログラミング言語の正式名称で、その最新標準仕様がECMAScript 6である。
今年の6月に標準化団体ECMAインターナショナルが正式に承認し、今後Webブラウザでの実装が進むことが予想される。
ちなみに標準化団体がW3Cでないのは、政治的な背景があるとのこと。
ES6ではClass構文など多くの構文が追加され、オブジェクト指向が大好きなサーバーサイダーたちにとって胸アツの仕様となっている。
「でも、ほら、まだ早いんでしょ? 使えないんでしょ?」
と思いきや、ES6用トランスパイラBabelを使えば、ES6構文を現状の仕様に則ったコードに変換してくれるので、ES6をいち早く取り入れることができる。

【Babel】
ES6をES5(JavaScriptの現行バージョン)にトランスパイルしてくれるトランスパイラー。
現在、大変注目が集まっておりLaravel Elixirにも標準装備されているので、Laravel5使いは今日からES6構文を取り入れることができる。BabelはBrowserifyとセットで使われることが多く、BrowserifyのBabel変換ライブラリBabelifyを組み合わせて使うことで非常にモダンなJavaScriptを書くことができる。だが、ES6をES5に変換するという性質上、変換の際にコード量がかなり増える構文もあるため、変換後のファイルサイズには注意が必要だ。

【Bower】
Nodeのnpmに影響を受けて開発されたフロントエンド用パッケージマネジャー。
クライアントサイドで利用するライブラリを管理できるツール。管理できる代表的なライブラリは、jQuery、Bootstrap、Font Awesome、Backbone.js、Underscore.js、normalize.css、Vue.jsなど。

【JavaScriptのモジュール管理問題】
本来、ブラウザで処理される言語であったJavaScriptには他のプログラム言語にあるような外部モジュールを取り込んだり依存関係を解決したりするモジュール定義の言語仕様が存在しない。そのため、依存関係があるファイルを人の目で並べたり結合したりする必要性があった。

▼よくあるフロントエンダーの作業風景
1.jsを書き始めた。
2.1枚にたくさんのメソッドが書いてあって何がなんだか分からない。
  別ページではspecificなこれだけ使いたいのに…。
  てゆうか、いつかの私よ、これどこに使ってる何よ!?
3.よしコンポーネントごとにファイルを分けるぞ!
4.ファイルがたくさん出来すぎてHTTPリクエスト飛びすぎワロタ。
5.別の作業者が依存関係のあるファイルが分からず、綺麗にするためよかれと思って行を入れ替えたら、エラー出まくり。
6.依存関係とリクエストの問題あるから、納品のときはやっぱ1枚にまとめることにするわ(´;ω;`)
7.1ヶ月後に、修正依頼が来てjsを開いた。
8.(2に戻る)

jsのコード量が肥大化するにつれ、人々はこのような問題に直面するようになる。さらにサーバーサイドでJS使いたい人とかアプリで使いたい人とかも現れ、モジュール機構ないと無理ゲーだよってことになり、モジュール管理するための仕様がいろいろと考えだされた。
代表的なJavaScriptのモジュール仕様にCommonJS、AMD、UMD、ES6(言語標準仕様)がある。

【CommonJS】
JavaScriptをサーバーで使いたいと思った人たちが俺様APIをいろいろ作ってカオスになってきたので、話し合って仕様を標準化しようとするプロジェクトのこと。またはそのプロジェクトで提案されている仕様のこと。またはrequire()って書いて他のJSファイルのモジュールをインポートできるモジュール構文のこと。本来のCommonJSは様々なAPI仕様を含んでいたが、あまりうまくまとまらなかった。しかしNode.jsがCommonJSのモジュール構文を採用したことで認知度が高まったことから、CommonJS=モジュール構文というような表現がされる。というかむしろCommonJSと書かれた場合の殆どは、CommonJSのモジュール仕様のことを指す。もっと踏み込んで言えばNode.jsのモジュール構文を指す。
同期的にほかのモジュールを読み込むことができるのが特徴。

【AMD】
(Asynchronous Module Definition)
CommonJSはサーバー側で使うために考えられた仕様のため、ブラウザ側でもモジュール管理したいということで、ブラウザ向けに考えだされたモジュール構文の仕様。非同期的な読み込みができるのが特徴。
Nodeでは標準だとAMDモジュールを読み込めない。

【UMD】
(Universal Module Definition)
モジュール定義の書き方をサーバーでもブラウザでも読み込めるように書く書き方のこと。

【モジュールローダー】
本来は非標準であるモジュール構文をブラウザで読めるようにするやつ。モジュールバンドラーなどとも言われる。代表的なものにRequireJS、Browserify、webpackがある。

【RequireJS】
AMDで実装されたモジュールを読み込むことができるようになるモジュール管理フレームワーク(モジュールローダー)。ブラウザでrequire.jsを読み込み、起点となるメインjsファイルに依存関係ファイルを記述すれば読み込むことができるようになる。
jQueryやUnderscore.jsはAMD形式に対応しているため、簡単に読み込める。
r.jsというNodeモジュールもあり、1つのファイルにビルドすることもできる。

【Browserify】
CommonJSのモジュールシンタックスをブラウザ上で動くように変換してくれるビルドツール。簡単に言うとrequire()って書いたやつをブラウザで読み込めるソースにしてくれるやつ。
npmでインストールできるNodeモジュールでNode実行環境に依存しないものは、Browserifyでビルドすればブラウザで使えるようになる。jQueryのようなフレームワークやjQueryプラグインなどもnpm installしてBrowserifyでビルドすると使えるので、パッケージマネージをBowerでするのか、npm+Browserifyでnpmでまとめてするのかという話がよくされる。
Laravelで標準サポートされている。

【webpack】
Browserifyより後発のモジュールローダー。CommonJSモジュールとAMDモジュールの両方をサポートするモジュールローダー。
設定ファイルを作っておけるので毎回コマンドオプションを指定する必要がない。
ファイルの分割ができる。
Browserifyと違い、htmlとcssなどもまとめられる。Browserifyを使用していてもpartialifyと組み合わせればhtmlとcssをrequireできるが、webpackにはloaderという拡張システムがあり、例えばCoffeeScriptで書いたものをコンパイルしてパックするということもできる。
SassやLessなどのloaderもあるためGulpのようなタスクランナーを使わなくてもwebpackだけでビルドが完結できる。
上記の理由から、タスクランナーとして採用するという考え方もある。
現状、Laravelでは標準サポートされていない。


用語をまとめることだけに特化してるから、サンプルコードとか一切載せないぞw
気になる技術があったら、このサイトで調べてみてね★
たぶん私の箇条書きより分かりやすいし読みやすいから。

ほんじゃあ、またね〜

拍手[0回]

        
  • 1
  • 2