やりたいこと

三項演算子を学んだので、
簡易的なチャットアプリの中で三項演算子を使ってみます。
今回はメッセージの送信機能で使います。

どのように使うか

画像を添付したときは画像付きでメッセージを送信する。
画像がない場合はメッセージのみを送信する。

この二つを三項演算子を使って表現してみます。

前提として・・・

フレームワークはRails
message controllerから値を受け取ってmessage.jsで処理を行う。
message.jsはjQueryで記述
メッセージ送信はajaxを使った非同期通信で行う。
jbuilderによりmessage.imageとすることでimegeのurlを取り出せる。
呼び出した関数の中でテンプレートリテラル記法を使う。

三項演算子の使い方。

真偽を返す条件式A ? 真の時に実行される値B : 偽の時に実行される値C

A が真なら Bの値が読み込まれる。
A が偽なら Cの値が読み込まれる。
といった風になっています。
これを今回の実装例で、言葉で表現すると、


画像の有無を確かめる式 ? 画像付きで表示する値 : 画像なしの値

といった風になります。

今回の実装手順

①messageコントローラから送られてきた値を元にHTMLを作成。
②三項演算子で処理を分ける。
③作成されたHTMLを用意しておいたclassに追加

①messageコントローラから送られてきた値を元にHTMLを作成。

message.js

$(function() {

  function buildHTML(message) {  
  // ここでHTMLを作成。三項演算子で画像の有無を区別する処理をする。
  }

  $('.type-message--send').on('click', function(e) {
    中略 // sendボタンが押されると発火し、messageコントローラにdataを渡す。
    });

    .done(function(data) {
      var html = buildHTML(data);  // buildHTMLで送られてきた値を元にclassに追加するためのHTMLを作成する。
      $(".chat__content-message").append(html);
    });
});

②三項演算子で処理を分ける。


$(function() {
  function buildHTML(message) {
    var addImage = (message.image !== null) ? `<img class = "image_size", src="${message.image}">` : ''  // 詳しくは下で解説

　　var html = `
      <p class = "posted-user-name">
        ${message.name}
      </p>
        <p class = "created-at">
      ${message.created_at}
        </p>
      <p class = "user-message">
        ${message.text}
      </p>
      <p class = "user-image">
        ${addImage}
      </p>`

      return html
  }

  $('.type-message--send').on('click', function(e) {
    中略 //　sendボタンが押されると発火し、messageコントローラにdataを渡す。
   });

    .done(function(data) {
      var html = buildHTML(data); // buildHTMLで送られてきたdataを元にclassに追加するためのHTMLを作成。
      $(".chat__content-message").append(html);
    });
});


    var addImage = (message.image !== null) ? `<img class = "image_size", src="${message.image}">` : ''

今回のテーマとなる三項演算子をここで使いました。
(message.image !== null)の部分で真偽を判定しています。

今回はmessage.imageとすることでメッセージの中に入っているimageのurlを取り出せるので、

imageのurlが空っぽじゃないことがtrueの時はvar addImageに<img class = "image_size", src="${message.image}">を代入します。

逆にfalseのときは""として空っぽを渡すようにしています。

これで画像を表示させるかどうかを記述できました。

あとはメッセージを送信するHTML内でvar addImageを、${addImage}として呼び出せば、ほぼ完成です。

    var addImage = (message.image !== null) ? `<img class = "image_size", src="${message.image}">` : ''

    var html = `
      <p class = "posted-user-name">
        ${message.name}
      </p>
        <p class = "created-at">
      ${message.created_at}
        </p>
      <p class = "user-message">
        ${message.text}
      </p>
      <p class = "user-image">
        ${addImage}
// ここで呼び出し。
      </p>`

      return html

③作成されたvar htmlを用意しておいたclassに追加。

あとは今回buildHTMLで作成されたvar htmlを

chat__content-messageにappendしてあげれば、

メッセージが送信されるたびにvar htmlが追加されるようになりました。

おわりに

実際に使ってみたのはいいのですが、色々と調べていると、

三項演算子は好まれない場合も多いみたいだそうで・・・

この辺りも調べたら面白そうだったので、また機会があれば書きたいと思います！

まだまだプログラミングの世界に足を踏み入れたばかりなので、

もし不備、不適切な表現などがありましたらご指摘お願いします。

三項演算子を使った実装例