Skip to content

Instantly share code, notes, and snippets.

@japboy
Last active December 31, 2015 17:09
Show Gist options
  • Save japboy/8018200 to your computer and use it in GitHub Desktop.
Save japboy/8018200 to your computer and use it in GitHub Desktop.
WIP

Loose-coupling Front and Back Ends FTW

こんにちは。今回は現実逃避を兼ねてフロントエンドとバックエンドにおける疎結合の素晴しさをお伝えしたいと思います。

疎結合とは何か

TODO: 例え話

疎結合とは;

  • プログラムから複雑さを取り除くための概念であり、
  • プログラムを協力して書くために必要な思想であり、
  • プログラムを書く上で常に意識する指針であり、
  • プログラムの品質を計る一つの目安であり、
  • "do one thing and do it well" の実践である。

と考えます。

フロントエンドとバックエンドの今昔

CGI だ Perl だと言われた 2000 年台初頭までは、バックエンドで;

  1. 情報を取得
  2. 取得した情報を整形
  3. 整形した情報を出力

といった過程が当たり前でした。

これは、DB からデータを取得して、HTML に書き出すまでをバックエンドで担うという事です。

しかし昨今、XHR (XMLHttpRequest) による Ajax ブームを皮切りにフロントエンドの表現力は格段に高くなりました。

このフロントエンドの進化は、旧来バックエンドが担ってきた過程の一部を、フロントエンドに任せるようになりました。それは何かというと「情報の整形と出力」です。

現在のバックエンドは;

  1. 情報を取得
  2. 取得した情報を整形

までを担い、フロントエンドは;

  1. 取得した情報を整形
  2. 整形した情報を出力

という形態がよく見られます。

これは、API から渡された JSON の値の整形と HTML の書き出しまでをフロントエンドで担うという事です。

さらに言えば、Facebook や Google の JavaScript SDK や AWS SDK for JavaScript など、バックエンドの処理だった事がフロントエンドだけで担えるようになってきました。

データの取得から出力まで、バックエンドの密結合なコードで行われてきた処理が、XHR で疎結合となり、整形と出力をフロントエンドに分離しました。

今後は更にバックエンドの抽象化が進んで、フロントエンドとは完全な非結合が実現されるかも知れません。

疎結合の利点

改めてなぜ疎結合が良いのか考えてみます。疎結合を目指すべきなのは、何も時代の潮流に乗るためだけではありません。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment