1. まとめトップ

HTML・CSS・JSの三位一体!海外に学ぶWebサイトのスマートな開発・管理方法まとめ

HTML と JavaScript の関係性を甘くみて作ると、手を付けられない状態になりがちなサイト開発。Microsoft や Twitter などの海外サイトはこんな方法でコードを守りぬいていた!PhoneGap を使った iOS や Android アプリにも!機能追加の外注だって安心!

更新日: 2013年09月02日

8 お気に入り 15565 view
お気に入り追加

この記事は私がまとめました

cilantroさん

紹介されているツールやライブラリはすべてオープンソースで公開されているので、ライブラリの紹介ペインをクリックしてダウンロードし、今すぐ実際に使ってみることができます!Twitter、Yandex、Microsoft、Facebook、Google の順で紹介していきます!

Twitter

最近ではCSSスタイルライブラリ bootstrap でもおなじみです。Web の画面を見ていると、いかにも複雑な動きをしていますが、どの様にソースコードを開発・管理しているのでしょう?

Mobility and Testing - Each component is a module

Flight はコンポーネント(UIの部品)をモジュールとし設計しているので、一度作った機能の使い回しが簡単に!

Inbox.attachTo('#inbox', {
'nextPageSelector': '#nextPage',
'previousPageSelector': '#previousPage',
});

jQuery を使うとコードの中で散在させやすい HTML のタグの ID を JavaScript のコードの中では一箇所で集中管理するので、機能追加の時のコード修正も安心です!

Yandex

出典bem.info

沢山の div タグで修正が大変になりがちな HTML をブロック単位で分けて管理します。CSS や JavaScript もブロックに含めて管理することができます!

Microsoft

Web サービスとしては検索エンジンの bing や MSN などが挙げられます。

Knockout was developed and is maintained by Steve Sanderson, a Microsoft employee.

KnockoutJS は Microsoft の社員によって開発されました。

Browser support: Microsoft Internet Explorer 6, 7, 8, 9, 10

そのためか、幅広い IE でテストされリリースされているので安心して使えます!

Facebook

全世界にユーザを抱える巨大サービスです。Zuckerberg 氏のあのHTML5に対する決意は今も変わらないのでしょうか。

Why Server Rendering?

Twitter とは対照的に、サーバサイドでページの構築を行うツールになります。

var Timer = React.createClass({
 render: function() {
  return React.DOM.div({},
   'Seconds Elapsed: ' + this.state.secondsElapsed
  );
 }
});

React.renderComponent(Timer({}), mountNode);

React を使ったコンポーネントのコードはこうなるそうです。オブジェクト指向などを導入せず、従来のコードスタイルで記述できるそうです。

we used an XML-like syntax; we call it JSX. JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML.

オプションとして JSX という文法もあるそうです。JSX を使うためのツールもあわせて公開されています。

Google

ブラウザ Google Chrome までリリースしてしまった、言わずと知れた Google です。

1 2