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

[PR]

×

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

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

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

だっふんだ

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

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

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

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

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


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

【CSSプリプロセッサ】
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を簡単に作成する事ができる。


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

拍手[0回]

PR

Eager Loadingのつづき

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

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

初めて青森に行ったときは、ちょっとふざけてペラペラのコンバースとか履いて行って足が凍傷になりそうになりましたけど、やや厚めのスニーカーくらいなら何とかなります。
真冬の東京の木造アパート、暖房なしのほうがよっぽど寒い自信があります。
何に対抗しているのか分かりませんが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とかになるとすごく気持ちがいいです。
なぜか分かりませんが、重複がなくなったぞーーーーーわーーーやったーーーーどうだーー見たかーーー!
みたいな気持ちになります。

ではでは、また近いうちにっ!

拍手[0回]

いろんなEager Loading(2)私の季節編

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

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

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

孤独で気ままな生活が懐かしいです。
1日でいいから、そんなことをして過ごしたいなぁと切望する毎日です。
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のいろいろな書き方の紹介をしたいと思います!


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

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


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

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


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

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

@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回で済むようになります。
(何度も言いますが、やってみてないです。)

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

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

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

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

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


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

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

$articles = Article::all();

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

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

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

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

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

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

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

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

拍手[2回]

いろんなEager Loading(1)ひみつ道具編

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

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

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

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

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

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

私のように、内気だけど好奇心旺盛な初心者のために、分かりやすく説明したいと思います。
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()でデータを取ってきてくれるんです。
分かったか、ピヨ子よ。

例えば、ユーザーの住所を別テーブルで管理したいような場合、
ユーザーアカウントのテーブルとユーザーの住所を保管するテーブルとの関係は1対1です。
その場合は、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のあんなパターンやこんなパターン、さらにムフフなパターンまでご紹介します。

お楽しみにね♥

拍手[1回]

もっと便利なAdvancedNewFile

どうも。

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

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

好きこそ物の上手なれ。

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

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

いくら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を使うと、開いてるファイルのコピーもリネームも削除も一発でできるらしい!
便利すぎワロタw

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




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

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

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

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

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

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

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

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


拍手[0回]