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

[PR]

×

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

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初の長期間サポートバージョンですしね
(今回調べて初めて知ったことだけどね
(`・ω・´)キリッ)

真面目に話すと、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のコーディングスタイル規約を採用した。
http://bashalog.c-brains.jp/15/08/13-100000.php

・Bladeへのサービス注入
Classのオブジェクトを直接Bladeに注入できるようになった。
(ただ、これをやると何となく誰かに怒られる気がしてならない。)
http://readouble.com/laravel/5/1/ja/blade.html#service-injection

・Elixirの向上
 1.自動で2つのless、sass、coffeeファイルを1つにまとめてくれるようになった。
 2.Babelコンパイルに対応した。
http://readouble.com/laravel/5/1/ja/elixir.html

・テスト設備の改善
FakerとMockeryが最初からインストールされるようになって結合テストが簡単に書けるようになった。

・モデルファクトリー
データベースにシードする際や開発中にテストする際に、ランダムなダミーデータを簡単な記述方法で作成してくれるモデルファクトリー機構が追加された。クロージャーで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するブロードキャスト機能が追加された。
設定ファイル Config/broadcasting.php ではPusher、Redis(Socket.io)、logの3種からブロードキャストドライバーを選択できる。

・ACL(アクセスコントロールリスト)認証 (Laravel 5.1.11+)
Laravel 5.1.11からACL認証ロジックがサポートされリソースへのアクセスを簡潔にコントロールすることができるようになった。
新たに追加されたGateファサードを利用して制限を定義する。
制限はコールバック、または新たに追加されたPolicyクラスを利用して定義することができ、Gateに用意されているメソッドを呼び出し利用することができる。
合わせてビューテンプレートには@can ~ @endcanディレクティブが追加になり、ビュー側でも認証コントロールが簡単にできるようになった。

・暗号化
これまでは暗号化にmcrypt拡張モジュールが使用されていたが5.1からは、より積極的に保守されているopenssl拡張モジュールに変更になった。
=====================================================

どうですか?
今まで5.0を使っていて次は5.1使おうかなって人は参考にしてみてくださいなー。

それでは、また!

拍手[0回]

PR

来年、勉強しようと思ってること

今年も残りわずかですねー。
ある日とつぜん、通りすがりの王子様っぽい人に「ベル子さん、ラフマニノフの『パガニーニの主題による狂詩曲』はお好きですか。よろしかったら、この私と一緒に聴きに行きませんか?」と跪いて誘ってもらいたいという夢が、今年も叶わなかったベル子です。
生きてるうちに、そんな日がくることを願いつつ、来年勉強しようと思ってることをまとめたいと思います。

ちなみに、ピアノなら王道すぎますがショパンとリストが好きです。
最も愛するクラシック曲は、ちょっとマニアックなのですが、ブルッフの『ヴィオラと管弦楽のためのロマンス』という曲で、あまりにも美しい旋律に感動しすぎてしまうため、作業用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個分くらいに収めたいと思います。

皆様、今年も一年お世話になりました。
よいお年を〜〜〜。

拍手[0回]

フロントエンドをモダンにするための用語まとめ(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回]

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

でアクセスしてみると、わーいアクセスできたぜー!

超苦労して解決した直後に、非常に丁寧に説明してある記事を見つけた。
なんかすごく悔しかった。
だからブログを書くことにした。

超わかりやすい記事



というわけでほぼ何も出来ずに終わりました!

いい夢見れるかな。。。(´・ω・`)
オフトゥンでもふもふしよ。

拍手[0回]