nanisore oishisou

Webエンジニアあるまさんのゆるふわ奮闘記。

フロントエンドをモダンにするための用語まとめ（２）

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

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

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

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

【Node.js】
サーバーサイドJavaScriptの代名詞。
ChromeのJavaScriptエンジンV8とlibなんとかを使ってサーバーサイドでJavaScriptを実行する技術(実行環境)のことである。
『ノンブロッキングな非同期I/O処理で大量の接続を高速に処理することができる』というすごそう感あふれる説明で紹介されるのが一般的。
その辺のすごそうなところはよく分からなくても、猫も杓子もNodeモジュール（パッケージ）はとにかくみんな大好き。
Nodeはバージョンがいろいろあるのでバージョン管理をしている人も多い。
バージョン番号の2ndセグメントの奇数のバージョンが開発版、偶数のバージョンが安定版である。Socket.IOという神ライブラリを使うことでチャットアプリのようなリアルタイム通信アプリが簡単に作れる。と、すごそうな人が言っているのをよく耳にする。
↓この人がPHPのシステムにも簡単に組み込めるって言ってる
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である。
今年の６月に標準化団体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には他のプログラム言語にあるような外部モジュールを取り込んだり依存関係を解決したりするモジュール定義の言語仕様が存在しない。そのため、依存関係があるファイルを人の目で並べたり結合したりする必要性があった。

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

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
気になる技術があったら、このサイトで調べてみてね★
たぶん私の箇条書きより分かりやすいし読みやすいから。

ほんじゃあ、またね〜

LaravelでPHPのビルトインサーバを立ち上げてiPhoneで確認したいとき

Laravel
とりあえず、題名長すぎた。

どうも、ベル子です。

-------回想シーン

３時間くらい前、午前０時すぎ。
ふと私はこんなことを思い立ってしまった。

「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

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

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

超わかりやすい記事

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

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

フロントエンドをモダンにするための用語まとめ（１）

フロントエンド
こんばんは、サーバーサイダーの皆様。
とにかく明るいベル子です。
安心してください。var_dumpしてますよ！

だっふんだ

突然、何事かと思ったことでしょう。
先日、社長からブログにギャグが盛り込んであるとほっこりするね！とのお話があったので、ちょっとぶっ込んでみました。
話が込み入ってきたら、また懐かしのギャグを挟んでいこうと思います。

というのも、今日のブログの内容はまとめ的なものなので、なかなか私の文才をひけらかせる箇所がありませんでした。全国のベル子ファンの皆さん、ごめんなさい。

では、さっそく始めます。
ここ数年でフロントエンド周りの技術は目まぐるしく発展を遂げました。
それ故に「専門用語が多くて、記事を読んでいても何のことやら分からない。。。。」という経験をしたことありませんか？
「俺はサーバーサイダーだからフロントエンドなんてどうでもいい。男ならPHP」と強がってみたことはありませんか？
「フロントエンドの集会に行ってみたいけど、今どき感満載の専門用語をいっぱい出してくるチャラいフロントエンダーが怖いから行けない」と思ったことはないですか？

そんなあなたに、ベル子がこっそりフロントエンド周りのキーワードをまとめて教えてあげたいと思いますっ！レッツ・フロントエンド♪
これさえ読めば、あなたも明日からフロントエンド通っぽい雰囲気を醸し出せます。
「もう全部知ってた！」って人は、かなりのフロントエンド通です。

※ベル子が調べてまとめたものなので、もしかしたら間違いや勘違いもあるかもしれないです。ご使用はノークレーム・ノーリターンでお願いします。


あるコンピュータ言語を効率的に書くために用いられる言語。代表的なものにJavaScriptを効率的に書くCoffeeScript、TypeScriptなどがある。

CSSメタ言語とも言われる。CSSを効率的に書いたものを普通のCSSにコンパイルしてくれるやつ。代表的なものにSass、Less、Stylusなどがある。

【altJS】
JavaScriptを効率的に書くためのJavaScript代替言語のこと。JavaScriptメタ言語と同義。代表的なものにCoffeeScript, TypeScript, Haxe, JSX, Dartがある。

だっちゅーの

【Haml】
Sass記法の元になったと言われるHTMLをより簡潔に書くためのマークアップ言語(HTMLメタ言語)。主にRuby on Railsのビューテンプレートの記法として使用されるため、ビューテンプレートエンジンと紹介されることもある。Sass同様にGruntやGulpを使いコンパイルできる。Sublime Textのようなビルドツールつきのエディタなら、エディタだけでもコンパイルし使用できる。インラインでRubyもインサートできる。

【Jade】
Hamlに影響を受けて作られたJavaScriptテンプレートエンジン(JST)。Node.jsのフレームワークであるExpressのビューエンジンとして標準採用されている。もちろん単独でも使える。

【Sass】
Rubyで書かれた先発のCSSプリプロセッサ。
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へシフトする風潮がある。

【Stylus】
Sass、Lessよりも後発で出てきたNode製のCSSプリプロセッサ。最大の特徴は文法に柔軟性があり、sass記法っぽい書き方とscss記法っぽい書き方の両方を混雑させて書けるという点。
Sassと違い拡張子を変える必要もない。
近頃、採用するエンジニアが増えているようである。Laracastsのマスター、ジェフリーも最近ではStylusがお気に入りのようでLaravel Elixir にStylusを追加するライブラリを公開しているので、Laravelでの採用も超絶簡単。Laravel Elixir2.0ではエラーが出るので、3.0以上にアップデートしないとダメ。

【Compass】
Sassを恐ろしく高機能にするフレームワーク。ベンダープリフィックスやCSS Spriteを簡単に作成する事ができる。


このまとめは、あと２〜３回ほど続く予定です。
それでは次回をお楽しみにね！
アディオス

Eager Loadingのつづき

Laravel
ちわっす。
今月のブログノルマがギリギリアウト気味のベル子です。

シルバーウィークには青森に行ってきました。
なんと東京のほうが青森より涼しいです！
寒いぞ寒いぞ詐欺ってこういうことだなって思いましたね。
東京って、やっぱ結構、寒いんですよ。

初めて青森に行ったときは、ちょっとふざけてペラペラのコンバースとか履いて行って足が凍傷になりそうになりましたけど、やや厚めのスニーカーくらいなら何とかなります。
真冬の東京の木造アパート、暖房なしのほうがよっぽど寒い自信があります。
何に対抗しているのか分かりませんがｗ

ということで本日も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（２）私の季節編

Laravel
さて、引き続きEager Loadingについて書いていきますYO。
お気づきだと思いますが
前回、Eager Loadingについての記事なのに、Eager Loadingについて何の説明もせずに終わらせたベル子です。てへぺろ

突然ですが、私の一番好きな季節は秋です。
ご飯も美味しいし、紅葉も綺麗だし、気候もちょうどいい。
日本の一番に気に入ってるところは、秋があるというところと言っても過言ではありません。

落ち葉が舞う上野公園を少し散歩してから、国立西洋美術館で絵画を眺める。
少し肌寒いなあと思いながら、チャイを片手にベンチでミステリー小説を読む。
青梅街道のイチョウ並木沿いを自転車を走らせ、新宿に映画を観にいく。

孤独で気ままな生活が懐かしいです。
１日でいいから、そんなことをして過ごしたいなぁと切望する毎日です。
I'm eager to spend time doing things like that.

Eagerの英語での使い方を紹介してみました。

さて、おさらいです。
記事の一覧を表示し、記事に紐づくユーザー名を表示する場合で考えてみます。
↓のようにControllerに書いて、view側にarticlesのオブジェクトを渡すとします。

$articles = Article::all();

return View::make('articles')->with('articles', $articles);

そしてview側でこのように書くと、usersテーブルのrowを取得するクエリがN+1回走ってしまいます。

@foreach ($articles as $article)
     <h2>{{{$article->title}}}</h2>
     <p>posted by {{{$article->user->name}}}</p>
@endforeach

このような場合に、先行して1回のクエリで、関連したusersのデータを全て取ってきてくれるのがEager Loadingというしくみです。

では実際の書き方の紹介をします。

$articles = Article::with('user')->get();

簡単ですね。
先行して欲しいデータのリレーションメソッド名をwithメソッドの引数に入れるだけです。

このようにシンプルな関係を表現したいだけなら、とても簡単なのですが、実際のシステムを作る場合には、こんなにシンプルにはいきません。
テーブルはもっと複雑に絡み合っていて、表示させなければならないデータもたくさんあります。

たとえば、記事には筆者と編集者と提供した会社が紐付いているとしたらどうでしょうか。
まずはモデルでリレーションを定義します。

class Article extends Eloquent {

    public function writer()
    {
        return $this->belongsTo('Writer');
    }

    public function editor()
    {
        return $this->belongsTo('Editor');
    }
    public function company()
    {
        return $this->belongsTo('Company');
    }

}

@foreach ($articles as $article)
     <h2>{{{$article->title}}}</h2>
     <p>筆者： {{{$article->writer->name}}}</p>
     <p>編集者： {{{$article->editor->name}}}</p>
     <p>提供社： {{{$article->company->name}}}</p>
@endforeach

上記の場合、記事が10本あると、なんと31回もクエリが走ってしまいます。
（やってみてないけど多分そうです。）

ここでようやく本当の本題であるEager Loadingのいろいろな書き方の紹介をしたいと思います！


★１、複数のリレーションデータをいっぺんに取得したい。

上記のようなパターンで、すべてのリレーションテーブルのデータをEager Loadingするには下記のように書きます。


$articles = Article::with('writer', 'editor', 'company')->get();

このように書くことで今まで31回クエリが走っていたところ、4回のクエリで済むのです！
（やってないから、やってみて確かめてみてください。）


★２、さらに先のリレーションデータまでいっぺんに取得したい。

例えば、編集者は提供社に所属しているので、編集者のクラスに提供社とのリレーションが定義されているようなネスト構造になっているデータを取得したい場合です。

@foreach ($articles as $article)
     <h2>{{{$article->title}}}</h2>
     <p>編集者： {{{$article->editor->name}}}</p>
     <p>提供社： {{{$article->editor->company->name}}}</p>
@endforeach

このように取得しようとすると、10本記事があると21回のクエリが走ってしまいます。
しかし、ネストしているリレーションも、↓このように取得することができるんです！
すごいですね、Laravel。

$articles = Article::with('editor.company')->get();

このように書いておくと、21回走っていたクエリが3回で済むようになります。
（何度も言いますが、やってみてないです。）

★３、リレーションテーブルのデータ取得に条件を足したい。

例えば、編集者が退職していた場合、記事一覧には編集者名を表示したくないのでdeleted=1のものは表示したくない、のような場合です。

リレーションメソッド内に条件をチェーンでつなげることはもちろんできるのですが、リレーションメソッドはいろんな場所から参照していることが多いと思うので、イレギュラーな表示パターンが出てきてしまった際に、『今回だけ条件を足したい』のようなことがあります。

そんなときは以下のように、withメソッドの引数を配列にしてクロージャーを渡してやることで、リレーションテーブルの取得に、新たなクエリを追加することができます。

$articles = Article::with(['editor' => function ($query) {
    $query->where('deleted', 0);
}])->get();


★４、何かの条件のときだけ、Eager Loadingしたい。

例えば、ログインユーザーが筆者の時だけ編集者と提供社を一覧に表示するので、そのときだけEager Loadingしたい、のような場合です。

$articles = Article::all();

if ($user->role == 'writer') {
    $articles->load('editor', 'company');
}

このことを、Laravelサイトでは、"Lazy Eager Loading"と表現しています。

おいおいLazyなのかEagerなのか訳わからんじゃないか。
ネーミングセンスｗ
先にモデルを取得しちゃったけど、あとから追加でEager Loadしたくなったときに使ってね！ってことですかね。

このようにEager Loadingの仕方にもいろいろあるんですね。
非常に便利です！
こんなふうに書かなくても全部モデル内で別メソッドにしてやるぜ！という声が聞こえてきそうですが、いろんな書き方があるということを知ってると、あとで何か困ったことがあったときに使えるかもしれないです。

あと、不確かなのですが、Eager Loadしたデータにクエリを加えて再度get()だのfirst()だのしてしまうと、Eager Loadingしてくれなくなるような気がしています。
どうしてもEagerできなかったら、諦めるほかないということでしょうね。

まだまだピヨピヨなので、分からないことだらけなのですが、Eager LoadingやORMと上手に付き合って、スッキリきれいで読みやすいコードが書けるように精進していきたいです！！

ホントはコードを書いて確認してからアップしようと思ってたのですが、最近、デスノートをhuluで見始めたら面白くて止まらなくて(*´ω｀*)

そのうち実際にコード書いて確かめてみますー。

いろんなEager Loading（１）ひみつ道具編

Laravel
こんばんは。ベル子です。
今は、夜中の2時です。眠いです。

1時くらいから書き始めたのですが、本当に無関係なことを書き出したら、話の収集がつかなくなったので、もう一度はじめから出直すことにしました。
人生と違ってブログはいつでも出直せるからいいですね。

さて、関係ない話で始まりましたが今日はEager Loadingのお話です。

突然ですが皆さんは以下のどれ派ですか？

1. Eager Loading
2. Eagerローディング
3. イーガーローディング
4. 事前に一括で関連データをロードしてくれるやつ
5. Eagerとか言わずに、要するに『先行ローディング』でよくないですか
6. Eager Loading？？何それこわい。でも美味しいんですよね！知ってます。

私はですね、断然６番派だったんですよ。
Eager Loadingとか難しい名前がついていますが、分かってしまえば簡単です。
全国中学校放送コンテスト東京地区大会アナウンス部門第３位にして、N◯K評価が出場者の中で最も高かったという武勇伝を持つ放送部部長、兼、演劇部副部長の私ですからね。
小難しい名前の得たいの知れない機構すらも、ほんの４ヶ月くらいで理解できます。

私のように、内気だけど好奇心旺盛な初心者のために、分かりやすく説明したいと思います。
LaravelのORM（オブジェクト関係マッパー）であるEloquantを使うとデータベースtable同士の関係を定義することができます。


class User extends Eloquent {

    public function articles()
    {
        return $this->hasMany('Article');
    }

}

ユーザーがログインして記事を書くようなアプリの場合、ユーザーにはたくさんの記事が紐づきます。articlesというテーブルの行には同じuser_idが何回も出てくるような関係です。

このように関係を定義すると

$articles = User::find(1)->articles;

こんなふうに、usersテーブルのid=1の人が書いたarticlesテーブルのデータ全件が取得できます。

ここで私のようにphpもオブジェクト指向もフレームワークも人としての成熟度も初級でピヨピヨの人は、こんな疑問が湧くことでしょう。
メソッドで定義したのに、なぜプロパティでアクセスできるの？

そこのピヨ子さん、いい質問ですね！！
これは『動的プロパティ』といって、↓のように書くべきところを、上記のように書けばデータを取ってきてくれるというものです。

$articles = User::find(1)->articles()->get();

ピヨ子「省略してるだけじゃん、どこが動的なの？」

動的プロパティが賢いのは、関係してるデータが複数のデータなのか1つのデータなのかを判断して自動的にget()かfirst()でデータを取ってきてくれるんです。
分かったか、ピヨ子よ。

例えば、ユーザーの住所を別テーブルで管理したいような場合、
ユーザーアカウントのテーブルとユーザーの住所を保管するテーブルとの関係は１対１です。
その場合は、hasOneというメソッドで関係を定義できます。 

    public function address()
    {
        return $this->hasOne('Address');
    }

そして以下のように書くと

$address = User::find(1)->address;

以下のようなデータを取ってきてくれます。

$address = User::find(1)->address()->first();

動的プロパティのさらに便利なところは、こんなふうにテーブルのカラムデータを取ってこれるところです。

$zip_code = User::find(1)->address->zip_code;

以下のように書くのと同義です。ずいぶん見やすいですよね。

$zip_code = User::find(1)->address()->first()->zip_code;

しかし、便利だけど混乱しやすいのが、この動的プロパティで

User::find(1)->articles->title;

としても記事のタイトルは取れません。

なぜかというと、記事は複数あるので、動的プロパティでデータを取得すると、get()したときと同じようにCollectionという配列をラップしたあの例のやつが返ってくるからです。
例のやつが返ってくるということは、以下のようにすれば、ちゃんとカラムのデータを取ってこれます。

$user = User::find(1);

foreach($user->articles as $article) {

    $title =  $article->title;

}

簡単ですね！
ちなみにメソッドで終わらせるとクエリが返ってくるようなので、気をつけてください。

$user = User::find(1)->address();
↑こういう終わり方をするとデータではなくクエリが返ってきます。

あと、このリレーションメソッドのメソッド名には（_）アンスコを含まないほうがいいです。
メソッド名にアンスコを含めると動的プロパティでのアクセスができなくなります。
メソッド名でクエリをつなげる場合はアンスコを含んでいても大丈夫ですが、リレーションメソッドとしての使い勝手が悪いので、リレーションメソッドにはアンスコは使えないと覚えたほうがいいでしょう。
メソッド名をキャメルケースで定義した場合、動的プロパティでアクセスする際はスネークケースでもキャメルケースでもアクセスはできます。

some_documents()　←これだとダメ
someDocuments()　←これだとOK
User::find(1)->some_documents　←これでもアクセスできる！
User::find(1)->someDocuments　←これは、もちろんOK


さて、前置きが長くなりましたが、ここからが本題です！

hasManyの関係のときに下記のようなコードを書いた場合、
11本の記事があったとすると12回のクエリが走ってしまいます。
1回目はユーザーに紐づく記事を取得するクエリで
それ以外の11回は、それぞれの記事に紐づくタイトルを取得するクエリです。

foreach($user->articles as $article) {

    $title =  $article->title;

}


これがいわゆるN+1問題とかいうやつです。
初めて読んだときは全く意味が分からなかったのですが、コードを書いてデバッガーでクエリを見てみるとよく分かります。
viewに何か大量なデータを渡して、viewの中でforeachを回してリレーションしているデータを取得してみてください。

ごらん、同じクエリが何回も登場しているよ。
1000件のデータがあったら1000件分、同じクエリが登場しているよ。

そしてあなたは思うはずだ。
同じこと何回もするのは、やっぱり効率が悪いんじゃなかろうか。
どうにかならんの？これ。
ドーラーえーもーーーん。

ええ、そういうときに使うのが、Eager Loadingです！！テッテレッテテテーテッテー！

いや〜ちょっと長くなってしまいました。
本題に辿りつけませんでしたが、さすがに眠くてたまらないので、続きは次回にしましょう！
次回は、Eager Loadingのあんなパターンやこんなパターン、さらにムフフなパターンまでご紹介します。

お楽しみにね♥

もっと便利なAdvancedNewFile

Sublime Text
どうも。

先日、高校のときの友だちが旧帝大の先生になっていたり、美容整形外科医になっていたり、子供を代官山の保育園に通わせていたり、IT社長と結婚してセレブ妻になっていたりして、ウワサのマウンティング女子を思う存分堪能したベル子です。

そんな中、みんなの注目を集めたのは「ベル子がプログラマやってるってよｗ」でした。
あのザ・文系女子のベル子が、数学の補習をマンツーマンで受けさせられてたベル子が、「こんな公式覚えて、何になんの？」と厨二的発言を堂々としていたベル子が、「数学って答えが出るからつまらないんだよね」と、一見、哲学的っぽいこと言ってるけど実は問題集やるのが面倒くさいだけなのがバレバレだったベル子が、遠足にへそ出しミニスカ膝上ロングブーツ姿でやってきたベル子が、「私、ハリウッド女優になるから」とアメリカに旅立っていったベル子が、なぜかプログラマをやっている。

好きこそ物の上手なれ。

世の子供たちよ。理系文系なんて関係ないぜ。私を見て。

それでは、いきなり本題です。

いくらSublime Textを使っていても、
コードを書いている時に新しいファイルを作ったり削除したりするのはとても面倒です。

今、開いてるディレクトリに真っ白な新規ファイル作るなら
Cmd + NしてCmd + S だけだと思うので簡単ですよね。

特定のディレクトリに新たに作る場合は、
Cmd + K , Cmd + B でサイドバーを表示し
マウスで既存のファイルを開いて
Cmd + NしてCmd + S ですよね。

全部ショートカットでやるなら
Cmd + K , Cmd + B でサイドバーを表示し
Ctrl + 0 でサイドバーにフォーカスを移して
↑↓←→で特定のディレクトリのファイルを開いて
Cmd + NしてCmd + S ですよね。

なんかショートカット多くて面倒(´・ω・`)
ファイル数多いとキーボードで移動するのも面倒(´・ω・`)

そこでAdvancedNewFileパッケージを使うとどうなるかと言うと、
Cmd + alt + Nでインプットエリアを表示しパスを入力すると新規ファイルが作れます。
奇跡のワンステップ！

でも、パスの入力のほうが面倒じゃないかと思う人もいると思います。
新たにディレクトリを作成したい場合も、そのままパスを打てば勝手に作ってくれるのでマウスを使わなくていいという利点があります。
パスは頭文字を打ってtabを打つと補完してくれるので、何となく覚えておけばおkという利点も。
さらに、Macの場合はファインダ上で右クリックして新規ファイルが作れないので、深い階層に自分がいるときにデスクトップにファイルを作ろうとすると、マウスでデスクトップを選択しないといけませんが、それも ~/Dとか打ってtabを打てばデスクトップに新規ファイルができるので、すごく便利です。

ただ、今、開いているファイルのカレントディレクトリにファイルを作りたいだけなのにフルパス指定しないといけないってのは、やっぱり不便ですよね。
だからCmd + NしてCmd + S をしちゃいますよね。

じゃあ、開いてるファイルをコピーしたい場合はどうしますか？
ファインダでディレクトリを開いてファイルをコピーしてエディタで開きますよね。
もちろんSublime Textなら右クリック一発で該当ディレクトリに移動はできるのですが、やっぱり、なんか面倒です(´・ω・`)

なんかいい方法ないのかなーってずっと思ってたんですよ。
なんだかんだでファイルを作ったり消したりするの面倒だなーって。

で、今日Laracastsを見ていて初めて知ったのですが、AdvancedNewFileを使いきれていないだけでした。AdvancedNewFileは実はもっと便利だったんです(´・ω・`)

カレントディレクトリのパスを指定するには「:」コロンを頭に付けるだけだったんです！
嘘だろー劇的に便利やーーーーーん！

さらに、Command Paleteを使うと、開いてるファイルのコピーもリネームも削除も一発でできるらしい！
便利すぎワロタｗ

具体的な方法は画像で詳しく説明します。




（0pxの変数作って何の意味があんの？とかいう話題と関係ないこと気にするのは禁止だぞ）

なんだ。めちゃんこ便利じゃないですか。
ただ、フォルダは削除できないみたいなので、そこはやっぱりマウスを使って右クリックとかしないといけないです(´・ω・`)

ターミナル＆vim使えばファイルの作成、編集、保存も同じウィンドウでできるからvimerの方にはこういう悩みはないんだろうな。
いいな。カッチョいいな。

しかしSublime使いにとっては、これを知ってると知ってないでは便利さが劇的に違うと思うので、紹介してみましたyo！

あーホントに世の中には私の知らない便利なツールがいっぱいあるなぁ。

『人類はSublime Textパッケージの10%しか使っていない』

開発してくれている人々に感謝する日々。
無知な自分に溢れ出す慈悲。

最後はDragon Ash風に締めてみましたー。
ではでは。またねん★