setIntervalとclearInterval(32日目)

最近は[tech expert]のカリキュラムの都合もあって、このブログの方も"本格派チャットアプリケーション"の実装報告が続いてしまって申し訳ないのですが、これを読んでいただいている方に何か一つでも気づきがあればと思い、今日の学びを綴らさせていただきます。

☆今日の学び☆ 今日はsetIntervalとclearIntervalについて書きたいと思います。

setIntervalとclearIntervalは、変数をつくり、お互いを関数内にセットして、関数でそれぞれ「発火」または「停止」の役割を担っています。

setIntervalは、「発火」

clearIntervalは、「停止」

の作用を司っています。

例でいうと

var count = 0;
var countup = function(){
  console.log(count++);
}
var hugahuga = setInterval(function(){
  countup();
  if(count > 3){　
  clearInterval(hugahuga);　//idをclearIntervalで指定している
}}, 1000);

上のプログラムでは、setIntervalの繰り返し処理が実行されcountupが3より多くなったとき（if(count > 3)）、clearIntervalが実行されます。

よって、3まででカウントでストップします。

今実装中のアプリケーションでは、自動更新機能をつけるということで、このセットを用いて実装しました。

なんか他にもたくさん使い道あるそうなので、下に記事も載せときます！ www.sejuku.net

今週で５週経っちゃうのか

早いな

おやすみ

醍醐味( 31日目)

LGTMって聞いたことありますか？

LGTMって「looks good to me」の略だそうで、

”　私はおっけだと思います！　”

の意思表示なんです^ ^

これを上司や先輩、[tech expert]でゆうとスタッフさんに自分たちで書いたコードを見てもらい記述ミス等なかった場合もらえるそうです！

ここ最近は少し落ち込んでましたが、自分の課題をこれでもかとみつけることができ、そしてとうとうメッセージ機能・インクリメンタルサーチ実装を完了しました。

こんな感じ↑

そして、念願の

LGTM！

純粋に嬉しかった〜

これからLGTMをもらうのも生きる理由になるかな

w

これこそまさにエンジニアの醍醐味

継続は力なり

おしまい

今日は一発！！(30日目)

今日はチャットアプリケーションの実装に一日取り組みました！

JavaScriptでフォームからメッセージ送信したと同時にメッセージ表示画面が自動でスクロールしてくれるイベントを実装しました！

メッセージ送信機能実装のステップ

①新しいブランチを作成する


②jsファイルを作成する


③フォームが送信されたら、イベントが発火するようにする


④2のイベントが発火したときにAjax*を使用して、messagecontrollerのcreateアクションが動くようにする


⑤messagecontrollerでメッセージを保存し、respond_to*を使用してHTMLとJSONの場合で処理を分ける


⑥jbuilderを使用して、作成したメッセージをJSON形式で返す


⑦返ってきたJSONをdoneメソッドで受取り、HTMLを作成する


⑧6で作成したHTMLをメッセージ画面の一番下に追加する


⑨HTMLを追加した分、メッセージ画面を下にスクロールする


⑩非同期に失敗した場合の処理も準備する

この実装でのポイントはAjaxとrespond_toの使用ですね。

☆Ajax☆

Ajaxとは「Asynchronous Javascript+XML」の略称。 JavaScript の組み込みクラスである XMLHttpRequest を利用した非同期通信を実現する。

☆respond_to☆

非同期でJSから送られてきた信号を、①HTMLに返すか②jbuilderを通してJSのイベントに返すか分岐を決める仕事をするのがrespond_toの役割。

ざっくり説明するとこんな感じですが、言葉だけだとわかりづらいと思うので絵に描いてみましたw

jsは、フロントでもの凄い力を発揮しますが、HTMLやCSSとの関係だけぢゃなくcontrollerとの関係を理解することが必要とされます。

ぜひ、イメージがわかない方などいらっしゃいましたら参考にしてください。

おしまい

お先真っ暗(29日目)

どうも24ブロです。

今日は疲れました。

チャットアプリケーションも本格実装に入りまして、１機能１コミットを目安にgithubにコミットプッシュしてプルリク出してレビューをもらうのですが、やっぱり自分まだまだだなと感じることがたくさんあります。

いい意味で捉えると、自分の課題を発見させてもらえるいい機会なのですが、あまり続くと落ち込むこともありますねw

勉強あるのみ

頑張ります。

今日はこの辺で

おしまい

テストって?(27日目)

そろそろ[tech expert]のカリキュラムも後半に差し掛かり内容も日に日に複雑になってきてはいますが、なんとかついて行ってるわたしです

現在、本格派アプリケーション実装前のテストの概念を勉強中でございます。

今日学んだことは、

まずテストとは何か

・テストとは簡単にいうと、各機能がちゃんと動くか確認するための作業です

テストを行うことによって本番環境にあげる上での信頼性を確保するということなんですね(ﾟ∀ﾟ)

例えば、あなたが1日1万人が利用しているサービスを管理しているとします。ここで新たな機能を追加しようということで、なんの確認もせずに追加で記述したところ思いもよらない不具合が起きたとします。 一時的に1万人の利用者全員がサービスを利用できなくなってしまいます。 こんなことになったら大変ですよね？

これを防ぐための、テスト機能です。テスト機能を取り入れれば実戦でもおおいに活躍してくれるということです。

テストには大きく３つありまして

◉単体テスト◉

モデルの検索系メソッドが正しい値を取得できるか モデルの更新系メソッドが正しくデータベースを更新できるか モデルの更新系メソッドが不正な入力に対して、適切なエラーを発生させるか

◉機能テスト◉

適切なテンプレートが選択されているか インスタンス変数に適切な値が格納されているか 適切にレンダリングされているか 更新系のアクションが正しくデータベースを更新されるか

◉統合テスト◉

ログインして、新しいメンバーを追加して、ログアウトするといった一連の動きをテスト

これらを実践して、本番環境に上げます。

そして、このテストの学習で私が1番興味持ったのはfactory_girlです。

☆factory_girl☆

ダミーのインスタンスを作成することができるGem 各クラスのインスタンスに定めるプロパティを設定しておき、specファイルから各クラスに設定したプロパティメを利用してその通りのインスタンスをつくるfactory_girlを利用すれば、短くかつ簡単な記述で収まる

例）
group = FactoryGirl.build(:group)

これはbuildメソッドと組み合わせて記述したfactory_girl活用例ですが、これでSpecファイルのgroups.rbで生成されたインスタンスを所得することができるということですね！

個人的には確認のためのテスト機能の中にさらに効率化を図れる仕組みがあるところが好きですね。

他にもテストはたくさんの内容が詰まっているので興味あるひとはぜひ調べてみてください！

あと1ヶ月で本番環境まで実装！

がんばろ

おしまい

何択？(26日目)

もうそろそろ1ヶ月たっちゃうね。

あっという間ですね！

今日は、チャットアプリケーションのメッセージ送信機能の実装を通して学んだことを紹介したいと思います。

☆今日の学び☆

三項演算子

条件式　？　trueの値　：　falseの値

この記述でif文のような条件分岐がシンプルに記述できちゃうんですね。

例えば

if文で書くと

def show_last_message
    if (last_message = messages.last).present?
      if last_message.content?
       last_message.content
      else
        '画像が投稿されています'
      end
    else
      'まだメッセージはありません。'
    end
end

三項演算子で書き換えると↓

def show_last_message
    if (last_message = messages.last).present?
      last_message.content? ? last_message.content : '画像が投稿されています'
    else
      'まだメッセージはありません。'
    end
end

show_last_commentメソッドでは、メッセージが投稿されている場合、されていない場合で処理を分けています。

「if (last_comment = comments.last).present?」と記述することで、最新のメッセージを変数last_commentに代入しつつ、メッセージが投稿されているかどうかで場合分けを行なっています。

メッセージが投稿されている場合の内部で、さらに文章が投稿されている場合、画像が投稿されている場合で処理を分けています。

ちなみに三項演算子について色々調べてわかったことなんですが”条件分岐の一種”と言う感じで理解してたつもりなのですが、正確に言うと三項演算子は二択の選択肢でしか式を立てることができないので、二択選択式なら三項演算子（シンプルな記述で済むから）、三つ以上の分岐ではif文、といった感じで使い分けができるといいかもしれません。

今日はこの辺で！

おしまい

haml(25日目)

どうもこんにちは24ブロです。

今日はとにかく、BEMと戦いました。

画面実装は基本的になんでも好きなのですが、完全にBEMの繊細さにやられました。

BEMとは
・Block ⇒ 塊
・Element ⇒ 要素
・Modifier(keyとvalueで表す) ⇒ 状態（変化）

という概念のもと、記述されるフロントエンドの命名方法です。

BEMのルールとしては

・BlockとElementの区切りはアンダーバー×２（__）

・BlockまたはElementとModifierの区切りはハイフン×２（--）

・ModifierのKeyとValueの区切りはアンダーバー×１(_)

・BlockやElementを2つ以上の単語で表す時はハイフン×１(-)

そしてこれは私が、本格派チャットアプリで画面実装の時BEMを取り入れた一部

こんな感じで書きます↓ こっちは html.haml

こっちは scss

BEMは、どこの要素に所属するブロックなのか、どの階層にいるのかなどははっきり分かるのですが、インデント一個でもエラーがでる繊細さ。

でも、完成するととても整理されたコードになりますよ（≧∇≦）

そして、フロント実装が終わったと同時に、

改めて今日の学び

①「n+1」問題と

②renderでのインスタンス変数の取得

これの理解が大きな収穫でした。

①は今更ですがrenderなどで取得するレコード数分だけSQLを発行するので、includeなどを用いて重くならないようにしてあげる対策が必要だということ

②は複数形のインスタンス変数を部分テンプレートに渡したい場合

・インスタンス変数の名前を単数形

・部分テンプレートの名前が同じ

この条件が整えば「render インスタンス変数」と記述するだけで部分テンプレートを読み込むことができること。

Railsのこの概念が復習できたのはいい機会でした。

まだまだ知らないことばかり

勉強あるのみ

おしまい