Laravel 5.0から5.1の変更点
あけましておめでとうございます!!
皆さん、「スター・ウォーズ/フォースの覚醒」はもう観ましたか?
私は観ました。
もう誰かにネタバレしたくて仕方ないのですが、そこは私もこんなに大きくなったので毎日グッとこらえています。
字幕を担当されていた翻訳者の林先生の講座に行って少しお話したことがあるんですけど、「俺は十分稼がせてもらったから今は後輩たちに仕事を譲ってやりたいんだけどね」と話していました。
でも、やっぱり大作になるとこういう有名な先生に白羽の矢が立ってしまうというのが世の常です。映画翻訳はホントに狭き門ですね。
ということで突然ですが、
今まで私はララ・ベル子という名にもかかわらず、
Laravel 4.2を普段使いしていて、5.0以上はふざけて使ったことしかなかったので、
そろそろ5.0以上を本気で使うために4.2から5.0の変更点をまとめようと思い立ちました。
(去年からずっと思ってたんだけど後回しにしてました。)
しかし、
リリースノートを見ただけでも4.2->5.0は変更点がめっちゃあるっぽい(ぐはぁっ)。
ということで4.2から5.0はすっ飛ばして、5.0->5.1の変更点をまとめるところから始めようという気持ちになりました。
5.1はLaravel初の長期間サポートバージョンですしね
(今回調べて初めて知ったことだけどね(`・ω・´)キリッ)。
皆さん、「スター・ウォーズ/フォースの覚醒」はもう観ましたか?
私は観ました。
もう誰かにネタバレしたくて仕方ないのですが、そこは私もこんなに大きくなったので毎日グッとこらえています。
字幕を担当されていた翻訳者の林先生の講座に行って少しお話したことがあるんですけど、「俺は十分稼がせてもらったから今は後輩たちに仕事を譲ってやりたいんだけどね」と話していました。
でも、やっぱり大作になるとこういう有名な先生に白羽の矢が立ってしまうというのが世の常です。映画翻訳はホントに狭き門ですね。
ということで突然ですが、
今まで私はララ・ベル子という名にもかかわらず、
Laravel 4.2を普段使いしていて、5.0以上はふざけて使ったことしかなかったので、
そろそろ5.0以上を本気で使うために4.2から5.0の変更点をまとめようと思い立ちました。
(去年からずっと思ってたんだけど後回しにしてました。)
しかし、
リリースノートを見ただけでも4.2->5.0は変更点がめっちゃあるっぽい(ぐはぁっ)。
ということで4.2から5.0はすっ飛ばして、5.0->5.1の変更点をまとめるところから始めようという気持ちになりました。
5.1はLaravel初の長期間サポートバージョンですしね
(今回調べて初めて知ったことだけどね(`・ω・´)キリッ)。
真面目に話すと、4.2->5.0の場合は概念的なものも入り込んでくるので、じっくり勉強したいということもあり、後回しにしました。
決して面倒くさかったわけじゃないです。
決して!!ホントに!いま私、勉強してるからっ!
ちなみに、今回、参考にしたのはLaravelの公式リリースノートとLaracastsのWhat's New in Laravel 5.1です。
★Laravel 5.0から5.1の変更点
=====================================================
・PHP 5.5.9+
動作条件はPHP 5.5.9以上。
・PSR-2に準拠
PSR-2のコーディングスタイル規約を採用した。
・Bladeへのサービス注入
Classのオブジェクトを直接Bladeに注入できるようにな った。
(ただ、これをやると何となく誰かに怒られる気がしてならない。)
・Elixirの向上
1.自動で2つのless、sass、 coffeeファイルを1つにまとめてくれるようになった。
2.Babelコンパイルに対応した。
・テスト設備の改善
・モデルファクトリー
・ディレクトリ構成の変更
・ドキュメントの改善とLTS(Long-term support)
・ミドルウェアパラメーター
・ルートグループ名
・ログイン試行回数制御 (Laravel 5.1.4+)
データベースにシードする際や開発中にテストする際に、 ランダムなダミーデータを簡単な記述方法で作成してくれるモデル ファクトリー機構が追加された。クロージャーでFaker Libraryのインスタンスを受け取りランダムデータの作成に 利用できる。
・自作artisanコマンドの引数とオプションの書き方の改善
自作artisanコマンドの書き方が変わり、 引数とオプションの定義の方法が改善されrouteの記述方式に 近くなり、より簡潔に書けるようになった。
protected $signature = 'email:send {user}';
・ディレクトリ構成の変更
app/Commands → app/Jobs
app/Handlers → app/Listeners
ただし、 このディレクトリ変更はコアシステムに影響する変更ではないため5. 1にアップデートする際に必須ではない。
・ドキュメントの改善とLTS(Long-term support)
公式ドキュメントの検索がオートコンプリート機能つきリアルタイ ム検索になり、 スピーディに該当ドキュメントを見つけられるようになった。
5.1はLaravel初のLTS(長期間サポート)版で、 バグ修正は2年間、セキュリティー修正は3年間対応する。
・ミドルウェアパラメーター
middlewareでカスタムパラメーターを受け取れるように なった。
・ルートグループ名
個別のルートだけでなくルートグループに独自の識別名を付けられ るようになった。 これにより名前付きルートグループ内では名前をつなげるだけで簡 潔にルート名が表現できるようになった( ネスト表記できるようになった)。
Route::group(['as' => 'admin::'], function () {
Route::get('dashboard', ['as' => 'dashboard', function () {
// Route named "admin::dashboard"
}]);
});
・ログイン試行回数制御 (Laravel 5.1.4+)
ログイン試行回数により一定時間ログイン処理を受け付けない制御 ができるようになった。
・イベントブロードキャスト機能
クライアントにLaravelイベントをPushするブロードキ ャスト機能が追加された。
新たに追加されたGateファサードを利用して制限を定義する。
制限はコールバック、 または新たに追加されたPolicyクラスを利用して定義するこ とができ、 Gateに用意されているメソッドを呼び出し利用することができ る。
合わせてビューテンプレートには@can ~ @endcanディレクティブが追加になり、 ビュー側でも認証コントロールが簡単にできるようになった。
・暗号化
これまでは暗号化にmcrypt拡張モジュールが使用されていた が5.1からは、 より積極的に保守されているopenssl拡張モジュールに変更 になった。
=====================================================
どうですか?
今まで5.0を使っていて次は5.1使おうかなって人は参考にしてみてくださいなー。
それでは、また!
=====================================================
どうですか?
今まで5.0を使っていて次は5.1使おうかなって人は参考にしてみてくださいなー。
それでは、また!
来年、勉強しようと思ってること
今年も残りわずかですねー。
ある日とつぜん、通りすがりの王子様っぽい人に「ベル子さん、ラフマニノフの『パガニーニの主題による狂詩曲』はお好きですか。よろしかったら、この私と一緒に聴きに行きませんか?」と跪いて誘ってもらいたいという夢が、今年も叶わなかったベル子です。
生きてるうちに、そんな日がくることを願いつつ、来年勉強しようと思ってることをまとめたいと思います。
ちなみに、ピアノなら王道すぎますがショパンとリストが好きです。
最も愛するクラシック曲は、ちょっとマニアックなのですが、ブルッフの『ヴィオラと管弦楽のためのロマンス』という曲で、あまりにも美しい旋律に感動しすぎてしまうため、作業用BGMには向いてません!
ヴィオラのくぐもった声色とロマンティックな旋律(´;ω;`)
涙なしには聴けません。
実は私、小学生の時に吹奏楽部に入っていてユーフォニウム担当だったんです。
聞いたこともない楽器だと思いますがw
やたらでかいのに何故かメロディラインを吹いたり、ソロまであったり、なぞの存在感を醸し出す楽器で、超無名なのに実は花形の楽器なんです。
もし皆さんも機会があれば、是非、吹いてみてくださいね。
すごく気持ちがいいんで。
あ、いつもどおり話がどんどん脱線していくYO。
ということで本題に戻ります。
【勉強すること】
・Laravel 5.0と5.1と5.2の変更点をまとめる。
https://laravel.com/docs/master/upgrade#upgrade-5.0
https://laracasts.com/series/whats-new-in-laravel-5-1
・Vue.js
http://jp.vuejs.org/
・PHPのデザインパターン
http://liginc.co.jp/web/programming/php/136131
・PHP7
http://www.slideshare.net/hnw/phpcon-kansai20150530
・ES2015(特にPromise周りとか)
http://www.html5rocks.com/ja/tutorials/es6/promises/
・Advent Calendarの記事をチェックする(Laravel、Vue.js、JavaScriptなど)
http://jumilla.me/laravel-2015-looking-back
・WebPack
http://liginc.co.jp/web/js/other-js/148813
(↑先日、このCTOの方とイベントでお会いしました。いろいろなフロントエンドのツールを使用してきて、今はWebPackに落ち着いてるとのことでした。)
・フロントエンドをモダンにするための用語まとめ(4)の執筆
来年の初めはここらへんを勉強していこうと思います!
そして来年は、もうちょっとお出かけしてアクティブに過ごしたいな、と。
あとは、少しわがままボディすぎるので体重をりんご3個分くらいに収めたいと思います。
皆様、今年も一年お世話になりました。
よいお年を〜〜〜。
ある日とつぜん、通りすがりの王子様っぽい人に「ベル子さん、ラフマニノフの『パガニーニの主題による狂詩曲』はお好きですか。よろしかったら、この私と一緒に聴きに行きませんか?」と跪いて誘ってもらいたいという夢が、今年も叶わなかったベル子です。
生きてるうちに、そんな日がくることを願いつつ、来年勉強しようと思ってることをまとめたいと思います。
ちなみに、ピアノなら王道すぎますがショパンとリストが好きです。
最も愛するクラシック曲は、ちょっとマニアックなのですが、ブルッフの『ヴィオラと管弦楽のためのロマンス』という曲で、あまりにも美しい旋律に感動しすぎてしまうため、作業用BGMには向いてません!
ヴィオラのくぐもった声色とロマンティックな旋律(´;ω;`)
涙なしには聴けません。
実は私、小学生の時に吹奏楽部に入っていてユーフォニウム担当だったんです。
聞いたこともない楽器だと思いますがw
やたらでかいのに何故かメロディラインを吹いたり、ソロまであったり、なぞの存在感を醸し出す楽器で、超無名なのに実は花形の楽器なんです。
もし皆さんも機会があれば、是非、吹いてみてくださいね。
すごく気持ちがいいんで。
あ、いつもどおり話がどんどん脱線していくYO。
ということで本題に戻ります。
【勉強すること】
・Laravel 5.0と5.1と5.2の変更点をまとめる。
https://laravel.com/docs/master/upgrade#upgrade-5.0
https://laracasts.com/series/whats-new-in-laravel-5-1
・Vue.js
http://jp.vuejs.org/
・PHPのデザインパターン
http://liginc.co.jp/web/programming/php/136131
・PHP7
http://www.slideshare.net/hnw/phpcon-kansai20150530
・ES2015(特にPromise周りとか)
http://www.html5rocks.com/ja/tutorials/es6/promises/
・Advent Calendarの記事をチェックする(Laravel、Vue.js、JavaScriptなど)
http://jumilla.me/laravel-2015-looking-back
・WebPack
http://liginc.co.jp/web/js/other-js/148813
(↑先日、このCTOの方とイベントでお会いしました。いろいろなフロントエンドのツールを使用してきて、今はWebPackに落ち着いてるとのことでした。)
・フロントエンドをモダンにするための用語まとめ(4)の執筆
来年の初めはここらへんを勉強していこうと思います!
そして来年は、もうちょっとお出かけしてアクティブに過ごしたいな、と。
あとは、少しわがままボディすぎるので体重をりんご3個分くらいに収めたいと思います。
皆様、今年も一年お世話になりました。
よいお年を〜〜〜。
フロントエンドをモダンにするための用語まとめ(3)
【シンタックスシュガー】
日本語で糖衣構文。ある構文を、 より簡単に人間が読み書きできるように書き換えた構文のこと。
Nodeモジュールでコンパイルができるほか、 公式サイトにはオンラインのインタープリタがあるので、 ちょっと括弧やセミコロンを書くのが面倒になったら、 気軽に使うことができる。
クラスベースオブジェクト指向な書き方ができる(← 本来の使い方)。
クラスベースオブジェクト指向な書き方ができる(←
Laravel ElixirでもCoffeeScriptを標準サポートしている 。
【TypeScript】
マイクロソフトが開発しているaltJS。 JavaScriptに静的型付けやクラス、継承、 インターフェイスのようなオブジェクト指向プログラミング構文拡 張を加えた拡張言語。
また構文拡張という点からES6を先取りできるトランスパイラー であるBabelとの比較もされる。 2015年3月AngularJS2. 0がTypeScriptで開発されることが発表され、 注目を浴びた。
また構文拡張という点からES6を先取りできるトランスパイラー
【Edge】
マイクロソフト社製の最新ブラウザー。マイクロソフトは後方互換性や独自性にこだわったため、 ブラウザのモダン化、Web標準化に遅れをとり、 モダンブラウザという指針を掲げては失敗してきた。その経験から、 IEを切り離した新ブラウザEdgeの開発を決断することとなっ た。新ブラウザEdgeはIEのHTMLレンダリングエンジンTri dentを搭載しない全く新しいブラウザだ。
Tridentは1997年発表のIE4で初めて搭載されたレン ダリングエンジンで、 20年近くマイクロソフトはこのエンジンに改修を続けてきた。 使い古されたこのエンジンと別れを告げること( 厳密にはTridentをフォークして大量の古えコードを削除) 、 そして今後は各OSで最新のブラウザのみをサポートとすることを 発表し話題となった。
また、 発表時にこれからは周りと足並みを揃えることも誓った。 これをマイクロソフトは相互運用性と表現している。 現在出てきているベンチマークテストの結果からすると、 ようやく他のブラウザと同じ水準になった感がある( もちろん私の個人的な感想)。 生まれたてのブラウザとしては悪くないとの評価も見られた(こっちはすごそうな人の意見)。 html5テストの結果は他と比べてまだ低いが、 驚くべきことに次世代JavaScriptと呼ばれるECMAS cript6のサポート率が飛び抜けて高い。 Edge13ではBabelのサポート率71% を大きく上回る84%の文法に準拠する。Chromeの65% と比べるとその差は20%に迫る。
Tridentは1997年発表のIE4で初めて搭載されたレン
また、
このような背景から、ユーザーエージェントにChrome、 AppleWebkit、 Safariなどの文字が入り乱れ全部盛り状態となっているのも 特徴だ。
ES6対応状況:http://kangax.github.io/compat-table/es6/
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を作り公開することもできるので、 自分好みのライブラリを取り揃えた雛形を、 黒い画面に呪文を唱えるだけで、 いつでもすぐに展開することができる。
npmで公開されている様々なyeoman-
【タスクランナー】
面倒な作業を自動化するビルドツール。 何の作業を自動化するのか分からない人のために、 伝統的な手作業のWeb制作風景をおさらいしよう。
1.HTMLを全部カッコつきで丁寧に書く。
4.共通で使う画像を1枚にまとめてCSSを調整。
5.構文チェックにかける。
6. 納品用にファイルを加工するため本番用のフォルダを作成する。
7.自作のCSSを1枚にまとめる。
8.自作のJSを1枚にまとめる。
9.自作で作ったCSSとJSを圧縮する。
10.依存関係のあるJSファイルを1つにまとめて圧縮する。
一般ユーザー向けサービスのフロント側では少しでも表示速度を速 くしてくれとの要求度が高い。 モバイルページやアニメ効果を多様したページでのレンダリングス ピード向上のために、 このような作業をフロントエンドのエンジニアは行う。
この作業は納品時の工数もバカにならないどころか、 メンテナンスの際にミスを誘発し自分を呪いたくさせたり、 デザイナーやオペレータがCSSを綺麗に戻せなくなるという人間 関係のいざこざまで引き起こし、「ちょっとした修正」を「 すごくめんどくさい修正」に変えてしまう、 非常にやっかいな作業である。
そういう悪夢のような作業を自動でやってくれるのがタスクランナ ーだ。
【Grunt】
先発のJavaScriptベースのタスクランナー。 さまざまなプラグインを読み込むことにより、 いろいろなタスクを自動化できる。 JavaScript寄りの記述方法。 タスクをJSON形式で記述して追加する。
JSON形式なので分かりやすい反面、タスクが増えてきて複雑な処理になってくると、"読みづらいしコード量が多くなる"との意見が見受けられる。
JSON形式なので分かりやすい反面、タスクが増えてきて複雑な処理になってくると、"読みづらいしコード量が多くなる"との意見が見受けられる。
【Gulp】
後発のタスクランナー。
Gruntに比べてコード量が少なくて済む。
タスク量が増えたときにGruntに比べて何をしているのかが分 かりやすい。処理がGruntに比べてやや高速(らしい)。
当初はプラグインが少なかったことからGrunt派が多かったが 、現在では遜色ない。Node寄りの記述方法で、 Node使い以外の使い手にはとっつきにくい。Laravel ElixirではGulpを採用している。
公式サイト
公式サイト
【SourceMap】
このSourceMapの呪文がコンパイル後のファイルに埋め込 んであると、 SourceMapに対応したChromeなどのブラウザでは、 コンパイル後の難読化したファイルのままでデバッグができるとい う優れもの。Laravel Elixirでは標準装備。
【Web Components】
ブラウザ標準仕様となることを目指している。
だけどChromeでさえabout: flagsで有効化しないと現状では動かない。
Web Componentsは以下の4つの基本仕様で構成される。
・Custom Elements
・Templates
・HTMLImports
・Shadow DOM
Shadow DOMとTemplatesを使って新たな要素を作成しCust om Elementsを定義する。 それらをHTMLImportsでロードすることでカスタムHT MLタグを使用できるようになる。
こんなふうに書くと自分でも何のことやら分からない。
要するに
<lara-beruko></lara-beruko>
と書くと
[かわいいね][セクスィーだね][オシャンティーだね]
の3ボタンができて、クリックするとそれぞれの動きをする、 というようなカスタムUIコンポーネントが自作できる。
そんな夢のような仕様のこと。
【Polymer】
Web Componentsにシンタックスシュガーを与えるフレームワ ーク的要素の強いライブラリ。 ブラウザ標準仕様を目指しているはずなのに公式フレームワークが 存在するというモニョモニョ感がマジパない。
Polymer の詳細解説→https://html5experts.jp/ 1000ch/11905/
Polymer の詳細解説→https://html5experts.jp/
いかがでしたか。
今回もハンパじゃない文字量でお届けしました。
書いてる私が言うのもなんですが、どんだけー!って言いたくなります。
最後まで読んでくれた真面目で勉強熱心なあなたのために、ちょっとした雑談をしまーす。
今月、というか先月でプログラマになって半年が経ちました!
早いものですねー。
楽しい日もあるし、鬼コーチにしごかれて号泣する日もあったりなかったりもしました。
先日、みんなの先輩こと匠師匠(重複表現すぎw)と話していたときのこと。
「俺も3年くらいはすげー勉強してたからね」
そうか、孤高の天才的なオーラを醸しだしていて一見、天才肌的な感じの匠師匠にも、そんな努力家的な一面があったんですね。
まあ、そうだろうと思ってましたけど。
言い換えたら「3年くらいは、しっかり勉強しないとダメだよ」ということでしょうね。
まだまだ足りない部分の多い私ですが、これからも皆様よろしくお願いしますm(_ _)m
フロントエンドをモダンにするための用語まとめ(2)
みんなー元気してるー?
すごいテンションで始めるよー。
今日は、何となく友達に話すような感じで書いてみる★N★E。
今日は、フロントエンドをモダンにするための用語まとめ(1)の第2弾だよー。
前回の記事がリトルベル子の中でとても好評だったから、どんどん続けて書いていこうと思ってる。
簡潔にまとめようと思うと、分かってるつもりだったやつでも少し勘違いしてたり、また新しいことを知ったりして、すっごく自分の勉強になるってことに気づいた。
でもあれだねぇ、やっぱさフロントエンドってホントにいろんな用語というか関連フレームワークっていうか、新しい技術っていうか、そういうの多くてさぁ、それを事前に理解してないと記事とか読んでても、まったく意味不明でチンプンカンプンだしー、勉強会とか行っても登壇者の言ってることの10%も分からないとかあり得ると思う。マジで。
しかも今日はjs関連だから内容マジ濃ゆいのをお茶漬けにしたったぞぉ。
これを全部読めばとりまフロントエンダーの勉強会に行っても涙目にはならない。
はずだょ。
【Node.js】
すごいテンションで始めるよー。
今日は、何となく友達に話すような感じで書いてみる★N★E。
今日は、フロントエンドをモダンにするための用語まとめ(1)の第2弾だよー。
前回の記事がリトルベル子の中でとても好評だったから、どんどん続けて書いていこうと思ってる。
簡潔にまとめようと思うと、分かってるつもりだったやつでも少し勘違いしてたり、また新しいことを知ったりして、すっごく自分の勉強になるってことに気づいた。
でもあれだねぇ、やっぱさフロントエンドってホントにいろんな用語というか関連フレームワークっていうか、新しい技術っていうか、そういうの多くてさぁ、それを事前に理解してないと記事とか読んでても、まったく意味不明でチンプンカンプンだしー、勉強会とか行っても登壇者の言ってることの10%も分からないとかあり得ると思う。マジで。
しかも今日はjs関連だから内容マジ濃ゆいのをお茶漬けにしたったぞぉ。
これを全部読めばとりまフロントエンダーの勉強会に行っても涙目にはならない。
はずだょ。
【Node.js】
『ノンブロッキングな非同期I/O処理で大量の接続を高速に処理することができる』というすごそう感あふれる説明で紹介されるのが一般的。
その辺のすごそうなところはよく分からなくても、猫も杓子もNodeモジュール(パッケージ)はとにかくみんな大好き。
Nodeはバージョンがいろいろあるのでバージョン管理をしている人も多い。
バージョン番号の2ndセグメントの奇数のバージョンが開発版、偶数のバージョンが安定版である。Socket.IOという神ライブラリを使うことでチャットアプリのようなリアルタイム通信アプリが簡単に作れる。と、すごそうな人が言っているのをよく耳にする。
バージョン番号の2ndセグメントの奇数のバージョンが開発版、偶数のバージョンが安定版である。Socket.IOという神ライブラリを使うことでチャットアプリのようなリアルタイム通信アプリが簡単に作れる。と、すごそうな人が言っているのをよく耳にする。
↓この人がPHPのシステムにも簡単に組み込めるって言ってる
LaracastsのマスターであるジェフリーもLaravelと組み合わせて使う方法をLaracastsで紹介している。
【npm】
Node.jsのパッケージマネジャー。Node Package Maneger、略してnpm。
このパッケージマネジャーを使うことにより、サードパーティが作成したNode.jsの拡張モジュールを手軽にインストールすることができる。『スマホにアプリを入れる』とほぼ同じ感覚(私が)。
Gulp、Grunt、Less、Browserify、CoffeeScriptなど近年のホットでクールなクライアントサイド技術の多くがNode製ということから、npm installは「いただきます」と同義語になりつつある(※個人の意見です)。
このパッケージマネジャーを使うことにより、サードパーティが作成したNode.jsの拡張モジュールを手軽にインストールすることができる。『スマホにアプリを入れる』とほぼ同じ感覚(私が)。
Gulp、Grunt、Less、Browserify、CoffeeScriptなど近年のホットでクールなクライアントサイド技術の多くがNode製ということから、npm installは「いただきます」と同義語になりつつある(※個人の意見です)。
【Express】
【Vanilla JS】
何のフレームワークも使わない素のJavaScriptのこと。
jQueryなどのフレームワークを使ってJSを書くことが日常化したことから、フレームワークを使わない素の言語仕様のみで記述したJSのことを、このように呼ぶようになった。 "Vanilla JSは世界最高速で最軽量のフレームワーク”というネタで知られる。英語圏でVanillaという表現は、何のトッピングもしていないバニラアイスクリームから「ノーマルの」「素の」「面白みのない」のような意味で使われる。
jQueryなどのフレームワークを使ってJSを書くことが日常化したことから、フレームワークを使わない素の言語仕様のみで記述したJSのことを、このように呼ぶようになった。 "Vanilla JSは世界最高速で最軽量のフレームワーク”というネタで知られる。英語圏でVanillaという表現は、何のトッピングもしていないバニラアイスクリームから「ノーマルの」「素の」「面白みのない」のような意味で使われる。
【ECMAScript 6】
ECMAScript 6またはECMAScript 2015と表記される。
コードネームは”harmony”。
今年の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に影響を受けて開発されたフロントエンド用パッ
クライアントサイドで利用するライブラリを管理できるツール。
【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(言語標準仕様)がある。
代表的な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ファイルに依存関係ファイルを記述すれば読み込むことができるようになる。
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
気になる技術があったら、このサイトで調べてみてね★
たぶん私の箇条書きより分かりやすいし読みやすいから。
ほんじゃあ、またね〜
用語をまとめることだけに特化してるから、サンプルコードとか一切載せないぞw
気になる技術があったら、このサイトで調べてみてね★
たぶん私の箇条書きより分かりやすいし読みやすいから。
ほんじゃあ、またね〜
LaravelでPHPのビルトインサーバを立ち上げてiPhoneで確認したいとき
とりあえず、題名長すぎた。
どうも、ベル子です。
-------回想シーン
3時間くらい前、午前0時すぎ。
ふと私はこんなことを思い立ってしまった。
「Laravelで今どこシートWeb版の試作を作ろうじゃないか!
いろいろ実験的にやってみたいことがあるから、勉強も兼ねて。
たぶんすぐ作れるし!」
説明しよう。
今どこシートとは、今だれがどこにいるのか一目で分かる機能を有し、一般的にホワイトボードなどに「NR」と書いてあって社会人になりたての時に「NR」って何ですか?と思わず聞いてしまう例のアレのことである。
いつものようにLaravelをインストールする。
migrationとかそういうのは置いておいてUIからつくることにした。
CSS3のflexboxの勉強を兼ねていろいろいじってみる。
flexboxを使うと中央揃えとか均等配置とかが超絶カンタンにできるのだが、
まだ不慣れなためいろいろやって実験してみた。
すごく面白い。
次はステータス変更の部分のUIだ。
jQueryUIのdraggableをいろいろいじってみるも、
「違う、そういうことじゃない」な出来上がりになったので
結局sortableに落ち着いた。
ここでふと思い出す。
「そういえば、jQueryUIってタッチ対応してないんだったな。
なんかライブラリとかあるかな。
とりあえずiPhoneで確認してみよう。」
iPhoneで確認してみようと
http://localhost:8000/
と打ってみた。
php artisan serveするとデフォルトで設定されるアドレスだ。
うっすらダメだろうなと思ってはいたが、やっぱりダメだった。
じゃあ、IPアドレスを打てばいいのかな?
よく分かんないけど、直打ちならいけるよね?そうだよね?
と女子特有の【勘でどうにかなるだろう戦法】を使ってifconfigしてみた。
AirMacを使ってるからなのか、なんかIPアドレスがちょっと複雑なことになっている。
とりあえずIPアドレスっぽいものを全部試してみる。
全部ダメだった。
やっぱりググッてみる。
私にはググるくらいの才能しかないのだとちょっと自虐的になる。
「iPhoneでMacのLocalhost見るときは{コンピュータ名}.localだぜ!」
という神々しい書き込みを見つける。
$ uname -n
すると出てくる。
今度こそ!と思って自信満々にタタンと打ってみる。
{コンピュータ名}.local:8000
でも、つながらない(´・ω・`)
いろいろ検索して、いろいろ試すもよく分からない。
さまよった挙句、
php artisan serve --host 0.0.0.0
これで立ち上げてアクセスしたまえ
という書き込みを見つける。
{コンピュータ名}.local:8000
でアクセスしてみると、わーいアクセスできたぜー!
超苦労して解決した直後に、非常に丁寧に説明してある記事を見つけた。
なんかすごく悔しかった。
だからブログを書くことにした。
超わかりやすい記事
というわけでほぼ何も出来ずに終わりました!
いい夢見れるかな。。。(´・ω・`)
オフトゥンでもふもふしよ。
どうも、ベル子です。
-------回想シーン
3時間くらい前、午前0時すぎ。
ふと私はこんなことを思い立ってしまった。
「Laravelで今どこシートWeb版の試作を作ろうじゃないか!
いろいろ実験的にやってみたいことがあるから、勉強も兼ねて。
たぶんすぐ作れるし!」
説明しよう。
今どこシートとは、今だれがどこにいるのか一目で分かる機能を有し、一般的にホワイトボードなどに「NR」と書いてあって社会人になりたての時に「NR」って何ですか?と思わず聞いてしまう例のアレのことである。
いつものようにLaravelをインストールする。
migrationとかそういうのは置いておいてUIからつくることにした。
CSS3のflexboxの勉強を兼ねていろいろいじってみる。
flexboxを使うと中央揃えとか均等配置とかが超絶カンタンにできるのだが、
まだ不慣れなためいろいろやって実験してみた。
すごく面白い。
次はステータス変更の部分のUIだ。
jQueryUIのdraggableをいろいろいじってみるも、
「違う、そういうことじゃない」な出来上がりになったので
結局sortableに落ち着いた。
ここでふと思い出す。
「そういえば、jQueryUIってタッチ対応してないんだったな。
なんかライブラリとかあるかな。
とりあえずiPhoneで確認してみよう。」
iPhoneで確認してみようと
http://localhost:8000/
と打ってみた。
php artisan serveするとデフォルトで設定されるアドレスだ。
うっすらダメだろうなと思ってはいたが、やっぱりダメだった。
じゃあ、IPアドレスを打てばいいのかな?
よく分かんないけど、直打ちならいけるよね?そうだよね?
と女子特有の【勘でどうにかなるだろう戦法】を使ってifconfigしてみた。
AirMacを使ってるからなのか、なんかIPアドレスがちょっと複雑なことになっている。
とりあえずIPアドレスっぽいものを全部試してみる。
全部ダメだった。
やっぱりググッてみる。
私にはググるくらいの才能しかないのだとちょっと自虐的になる。
「iPhoneでMacのLocalhost見るときは{コンピュータ名}.localだぜ!」
という神々しい書き込みを見つける。
$ uname -n
すると出てくる。
今度こそ!と思って自信満々にタタンと打ってみる。
{コンピュータ名}.local:8000
でも、つながらない(´・ω・`)
いろいろ検索して、いろいろ試すもよく分からない。
さまよった挙句、
php artisan serve --host 0.0.0.0
これで立ち上げてアクセスしたまえ
という書き込みを見つける。
{コンピュータ名}.local:8000
でアクセスしてみると、わーいアクセスできたぜー!
超苦労して解決した直後に、非常に丁寧に説明してある記事を見つけた。
なんかすごく悔しかった。
だからブログを書くことにした。
超わかりやすい記事
というわけでほぼ何も出来ずに終わりました!
いい夢見れるかな。。。(´・ω・`)
オフトゥンでもふもふしよ。
フロントエンドをモダンにするための用語まとめ(1)
こんばんは、サーバーサイダーの皆様。
とにかく明るいベル子です。
安心してください。var_dumpしてますよ!
だっふんだ
突然、何事かと思ったことでしょう。
先日、社長からブログにギャグが盛り込んであるとほっこりするね!とのお話があったので、ちょっとぶっ込んでみました。
話が込み入ってきたら、また懐かしのギャグを挟んでいこうと思います。
というのも、今日のブログの内容はまとめ的なものなので、なかなか私の文才をひけらかせる箇所がありませんでした。全国のベル子ファンの皆さん、ごめんなさい。
では、さっそく始めます。
ここ数年でフロントエンド周りの技術は目まぐるしく発展を遂げました。
それ故に「専門用語が多くて、記事を読んでいても何のことやら分からない。。。。」という経験をしたことありませんか?
「俺はサーバーサイダーだからフロントエンドなんてどうでもいい。男ならPHP」と強がってみたことはありませんか?
「フロントエンドの集会に行ってみたいけど、今どき感満載の専門用語をいっぱい出してくるチャラいフロントエンダーが怖いから行けない」と思ったことはないですか?
そんなあなたに、ベル子がこっそりフロントエンド周りのキーワードをまとめて教えてあげたいと思いますっ!レッツ・フロントエンド♪
これさえ読めば、あなたも明日からフロントエンド通っぽい雰囲気を醸し出せます。
「もう全部知ってた!」って人は、かなりのフロントエンド通です。
※ベル子が調べてまとめたものなので、もしかしたら間違いや勘違いもあるかもしれないです。ご使用はノークレーム・ノーリターンでお願いします。
だっちゅーの
【Haml】
【Sass】
【Less】
【Stylus】
【Compass】
このまとめは、あと2〜3回ほど続く予定です。
とにかく明るいベル子です。
安心してください。var_dumpしてますよ!
だっふんだ
突然、何事かと思ったことでしょう。
先日、社長からブログにギャグが盛り込んであるとほっこりするね!とのお話があったので、ちょっとぶっ込んでみました。
話が込み入ってきたら、また懐かしのギャグを挟んでいこうと思います。
というのも、今日のブログの内容はまとめ的なものなので、なかなか私の文才をひけらかせる箇所がありませんでした。全国のベル子ファンの皆さん、ごめんなさい。
では、さっそく始めます。
ここ数年でフロントエンド周りの技術は目まぐるしく発展を遂げました。
それ故に「専門用語が多くて、記事を読んでいても何のことやら分からない。。。。」という経験をしたことありませんか?
「俺はサーバーサイダーだからフロントエンドなんてどうでもいい。男ならPHP」と強がってみたことはありませんか?
「フロントエンドの集会に行ってみたいけど、今どき感満載の専門用語をいっぱい出してくるチャラいフロントエンダーが怖いから行けない」と思ったことはないですか?
そんなあなたに、ベル子がこっそりフロントエンド周りのキーワードをまとめて教えてあげたいと思いますっ!レッツ・フロントエンド♪
これさえ読めば、あなたも明日からフロントエンド通っぽい雰囲気を醸し出せます。
「もう全部知ってた!」って人は、かなりのフロントエンド通です。
※ベル子が調べてまとめたものなので、もしかしたら間違いや勘違いもあるかもしれないです。ご使用はノークレーム・ノーリターンでお願いします。
【メタ言語】
あるコンピュータ言語を効率的に書くために用いられる言語。代表的なものにJavaScriptを効率的に書くCoffeeScript、TypeScriptなどがある。
【altJS】
JavaScriptを効率的に書くためのJavaScript代替言語のこと。JavaScriptメタ言語と同義。代表的なものにCoffeeScript, TypeScript, Haxe, JSX, Dartがある。
だっちゅーの
【Haml】
Sass記法の元になったと言われるHTMLをより簡潔に書くためのマークアップ言語(HTMLメタ言語)。主にRuby on Railsのビューテンプレートの記法として使用されるため、ビューテンプレートエンジンと紹介されることもある。Sass同様にGruntやGulpを使いコンパイルできる。Sublime Textのようなビルドツールつきのエディタなら、エディタだけでもコンパイルし使用できる。インラインでRubyもインサートできる。
【Jade】
【Sass】
Ruby(Haml)ライクに書ける.sass記法と、CSSライクに書ける.scss記法がある。先発であるSassだが、Rubyチックな記法がCSS使いのデザイナーには敷居が高く、当初は注目を集めなかった。.scss記法を採用してからLessからSassへ流れた人が多い。
【Less】
JavaScriptで書かれたNode製CSSプリプロセッサ。JavaScriptで書かれているので、黒い画面を使わなくてもJSを読み込むだけで使うことができるが、初回アクセス時にロード時間がかかるため、あくまでブラウザでのコンパイルは開発用の確認程度とするように公式サイトで注意書きされている。
普通の人はNode.jsでLessモジュールとかGruntモジュールとかそういうのをインストールしてコンパイルして使う。SassにインスパイアされてCSSライクな記法を編み出し、Sassにも影響を与えた。CSS&JS使いとの親和性が高くCSSプリプロセッサに注目が集まるきっかけとなった。CSSライクな書き方が分かりやすいことから人気が出たが、Sassで.scss記法が書けるようになった頃からSassへシフトする風潮がある。
普通の人はNode.jsでLessモジュールとかGruntモジュールとかそういうのをインストールしてコンパイルして使う。SassにインスパイアされてCSSライクな記法を編み出し、Sassにも影響を与えた。CSS&JS使いとの親和性が高くCSSプリプロセッサに注目が集まるきっかけとなった。CSSライクな書き方が分かりやすいことから人気が出たが、Sassで.scss記法が書けるようになった頃からSassへシフトする風潮がある。
【Stylus】
Sass、Lessよりも後発で出てきたNode製のCSSプリプロセッサ。最大の特徴は文法に柔軟性があり、sass記法っぽい書き方とscss記法っぽい書き方の両方を混雑させて書けるという点。
Sassと違い拡張子を変える必要もない。
近頃、採用するエンジニアが増えているようである。Laracastsのマスター、ジェフリーも最近ではStylusがお気に入りのようでLaravel Elixir にStylusを追加するライブラリを公開しているので、Laravelでの採用も超絶簡単。Laravel Elixir2.0ではエラーが出るので、3.0以上にアップデートしないとダメ。
Sassと違い拡張子を変える必要もない。
近頃、採用するエンジニアが増えているようである。Laracastsのマスター、ジェフリーも最近ではStylusがお気に入りのようでLaravel Elixir にStylusを追加するライブラリを公開しているので、Laravelでの採用も超絶簡単。Laravel Elixir2.0ではエラーが出るので、3.0以上にアップデートしないとダメ。
【Compass】
このまとめは、あと2〜3回ほど続く予定です。
それでは次回をお楽しみにね!
アディオス
アディオス
Eager Loadingのつづき
ちわっす。
今月のブログノルマがギリギリアウト気味のベル子です。
シルバーウィークには青森に行ってきました。
なんと東京のほうが青森より涼しいです!
寒いぞ寒いぞ詐欺ってこういうことだなって思いましたね。
東京って、やっぱ結構、寒いんですよ。
初めて青森に行ったときは、ちょっとふざけてペラペラのコンバースとか履いて行って足が凍傷になりそうになりましたけど、やや厚めのスニーカーくらいなら何とかなります。
真冬の東京の木造アパート、暖房なしのほうがよっぽど寒い自信があります。
何に対抗しているのか分かりませんがw
ということで本日もEager Loadingについてです。
先日、リレーションメソッド名にはスネークケース(something_like_this)を使わないほうがよいという話をしたと思うのですが、
> 動的プロパティでアクセスする際はスネークケースでもキャメルケースでもアクセスはできます。
とも書きました。
しかし、本日、実案件でEager Loadする際に気づいたのですが、
モデルで
このようなリレーションメソッドを定義してコントローラで
$some_models = SomeModel::with('parent.childrenDocs.grandChild')->get();
みたいにネストしてEager Loadして、View側で
@foreach ($some_models as $some_model)
$some_model->parent->children_docs->grand_child->id
@endforeach
みたいに書くと、parentしかEager Loadしてくれません。
@foreach ($some_models as $some_model)
$some_model->parent->childrenDocs->grandChild->id
@endforeach
のようにすれば、ちゃんと全てのモデルのデータをEager Loadしてくれます。
ですので、やはりリレーションメソッドは、必ず、キャメルケース(somethingLikeThis)で定義して、キャメルで呼び出すという癖をつけたほうがよさそうです。
今月のブログノルマがギリギリアウト気味のベル子です。
シルバーウィークには青森に行ってきました。
なんと東京のほうが青森より涼しいです!
寒いぞ寒いぞ詐欺ってこういうことだなって思いましたね。
東京って、やっぱ結構、寒いんですよ。
初めて青森に行ったときは、ちょっとふざけてペラペラのコンバースとか履いて行って足が凍傷になりそうになりましたけど、やや厚めのスニーカーくらいなら何とかなります。
真冬の東京の木造アパート、暖房なしのほうがよっぽど寒い自信があります。
何に対抗しているのか分かりませんがw
ということで本日もEager Loadingについてです。
先日、リレーションメソッド名にはスネークケース(something_like_this)を使わないほうがよいという話をしたと思うのですが、
> 動的プロパティでアクセスする際はスネークケースでもキャメルケースでもアクセスはできます。
とも書きました。
しかし、本日、実案件でEager Loadする際に気づいたのですが、
モデルで
public function childrenDocs()
{
return $this->hasMany('childrenDocs');
}
このようなリレーションメソッドを定義してコントローラで
$some_models = SomeModel::with('parent.childrenDocs.grandChild')->get();
みたいにネストしてEager Loadして、View側で
@foreach ($some_models as $some_model)
$some_model->parent->children_docs->grand_child->id
@endforeach
みたいに書くと、parentしかEager Loadしてくれません。
@foreach ($some_models as $some_model)
$some_model->parent->childrenDocs->grandChild->id
@endforeach
のようにすれば、ちゃんと全てのモデルのデータをEager Loadしてくれます。
ですので、やはりリレーションメソッドは、必ず、キャメルケース(somethingLikeThis)で定義して、キャメルで呼び出すという癖をつけたほうがよさそうです。
まあ、そうだろうね。と思う話だと思うんですが、テーブル名にスネークを使っていたりすると揃えたい気持ちが湧いて、忘れてスネークで書いちゃうんですよね。視認性もいいし。
ということで、Eager Loadingをするときはキャメルケースじゃなきゃ、ダメ、絶対という話でした。
余談ですが、Eager Loadして、100以上のクエリが20とかになるとすごく気持ちがいいです。
なぜか分かりませんが、重複がなくなったぞーーーーーわーーーやったーーーーどうだーー見たかーーー!
みたいな気持ちになります。
ではでは、また近いうちにっ!
ということで、Eager Loadingをするときはキャメルケースじゃなきゃ、ダメ、絶対という話でした。
余談ですが、Eager Loadして、100以上のクエリが20とかになるとすごく気持ちがいいです。
なぜか分かりませんが、重複がなくなったぞーーーーーわーーーやったーーーーどうだーー見たかーーー!
みたいな気持ちになります。
ではでは、また近いうちにっ!