前のパートに戻る 完了して次のパートへ  

  1-1 jQuery で実装を見てみよう

このパートでは jQuery を使った実装をしてみましょう。


本パートの目標物(ゴール)


本パートでは jQuery を使って Twitter 風フォローボタンを実装していただきます。実際にリアル DOM を操作してみて、何が問題なのかを明確にします。

完成例のコードはこちら


目標物を作成するまでの流れ


サーバーから受け取った HTML に対して jQuery を使ってリアル DOM を操作します。

  1. jQuery プロジェクトの作成
  2. index.html の作成と css の作成
  3. script.js の作成と実装

では実際に進めていきましょう。


1. jQuery プロジェクトの作成


はじめにプロジェクトを作成します。任意のディレクトリで下記の構成を作成してください。

└── src
    ├── index.html
    ├── script.js
    └── style.css


2. index.html の作成と css の作成


以下の HTML ファイルは、サーバーサイド(例えば PHP など)からもらった HTML を想定しています。ではsrc/index.htmlを以下のように編集してください。

index.html

簡単に説明

この部分で style をリンクさせています。実際の style.css は後ほど記載いたします。

<link rel="stylesheet" href="style.css" />

今回は data-follow (data 属性)を使用して DOM から情報を受け取るようにしています。

<li class="accountList__item js-account-item" data-follow="false" data-id="1">
  // 各アカウント
</li>

次に、ボタンをクリックしたら フォロー・フォロー解除解除ができるように js 用の class を指定しています。

<button type="button" class="js-follow-btn followBtn">
  フォローする
</button>

次に style.css ですが、こちらは見た目だけになりますので、詳細な説明は省略させていただきます。下記コードをコピー & ペーストしていただければ大丈夫です。

3. script.js の作成と実装


次に script.js を実装します。以下のコードを追加してください。

細かくみていきます。

ブラウザで表示されるたびに、下記 html の data-follow="false"でアカウント一人一人がすでにフォローしているのかどうかをチェックしています。

そして true の場合には、ボタンに対して isFollow クラスを追加しています。

<li class="accountList__item js-account-item" data-follow="false" data-id="1">
  // 各アカウント
</li>

次にボタンをクリックをした場合に フォローかフォロー解除か切り替える必要がありますね。

下記の部分でクリックをしたら、data-follow が true であれば

  • isFollow クラスを削除
  • ボタンのテキストを「フォローする」にする
  • data-follow を false に変更

ということをしています。data-follow が false の場合は全く正反対のことをしています。

さらに今回は割愛させていただいていますが、実際のプロダクトであれば ajax を使ってサーバーサイドにフォロー・フォロー解除の変更がされたことを送信しなければいけません。

動作確認


ではブラウザで表示をさせてみましょう。任意のブラウザに index.html をドラッグ & ドロップをしてみましょう。

以下のように表示され、フォローボタンが作動していれば大丈夫です。

jQuery での状態変更の流れ


おさらいとしてフォロー・フォロー解除の流れをもう一度確認しましょう。

  1. DB を元にサーバーサイドから受け取った HTML をブラウザにレンダリング
  2. レンダリングされた HTML の中から フォロー中のアカウントを探してフォロー状態の見た目にする
  3. フォローボタンがクリックさする。
  4. そのフォローボタンに紐づくアカウントの data 属性を確認してフォローする。
  5. ついでにテキストも変更する。

となっています。もう少し噛み砕いていうと見た目を基準に操作していることがわかります。jQuery でも昨今のフロントエンドフレームワークと同じことができることがわかったかと思います。ですが、その見た目(DOM)基準に操作することに問題点があります。


リアル DOM 操作の問題点


見た目を操作をもう少し専門的に言うと DOM 操作と言います。では、その DOM 操作の問題点とはなんでしょう。

  1. ロジックが UI に依存してしまっている。
  2. 状態の管理が難しい。

と言うことが挙げられます。


ロジックが UI に依存してしまっている

今回の実装を思い出してみましょう。HTML に直接記述されている data 属性を元にフォローかどうかの判定をしていました。

<li class="accountList__item js-account-item" data-follow="false" data-id="1">
  // 各アカウント
</li>

HTML の作りに依存してしまっていますよね。極端な話アカウントのデータと HTML が紐付きすぎてしまっていて、ロジックと UI を分離することが難しいことが伺えます。

実際の開発でしたら、例えば既存サービスをリデザインをするときに問題が表面化しやすいです。

jQuery の場合、今回は規模も小さいですが、 一例として、以下のコードでは hoge クラスの要素の子要素である button をクリックした時の動作を追加しています。

リデザインでどうしても HTML の構造を変更しなければいけない場合どうでしょう?具体的には button が hoge の子要素では無くなっていたら・・・

これだけでボタンが動作しなくなってしまいますよね。

$(".hoge")
  .children("button")
  .on("click", function () {
    // 何か処理
  });


<div class="hoge">
  <button type="button">送信</button>
</div>
↓
<div class="hoge">
  下記のボタンをクリック
</div>
<button type="button">送信</button>


状態の管理が難しい

今回の実装ではフォローかどうかの状態しかありませんでした。なので、そんなに複雑にはなっていませんが、これがもっと大規模な WEB アプリケーションではどうでしょう。

同じように Twitter の場合でしたら、メッセージが来ていたら、通知が来ていたら新しいツィートが来たらなどの状態がありますね。そうすると jQuery、もっと突き詰めると リアル DOM での操作では状態の管理が難しくなってしまいます。おそらく人間では全体を把握することが不可能なほど・・・。


終わりに


1 章では jQuery を使い、大規模な WEB アプリケーションでの DOM 操作による状態の管理の難しさを説明しました。次の章では仮想 DOM を使ったライブラリーである React を使い同じように Twitter 風フォローボタンを実装していただきます。

お疲れさまでした!

議論

0 質問

このコースの評価は?