2020-12-08

投稿機能のフロント実装

エラー時の動作を確かめたい場合は、エンドポイントやコントローラーの記述をあえて誤ったものにするためのどのような処理をしているかのコメント付き

function check() {
  // 表示されているすべてのメモを取得している
  const posts = document.querySelectorAll(".post");
  posts.forEach(function (post) {
     if (post.getAttribute("data-load") != null) {
      return null;
    }
    post.setAttribute("data-load", "true");
    // メモをクリックした場合に実行する処理を定義している
    post.addEventListener("click", () => {
      // どのメモをクリックしたのか、カスタムデータを利用して取得している
      const postId = post.getAttribute("data-id");
      // Ajaxに必要なオブジェクトを生成している
      const XHR = new XMLHttpRequest();
      // openでリクエストを初期化する
      XHR.open("GET", `/posts/${postId}`, true);
      // レスポンスのタイプを指定する
      XHR.responseType = "json";
      // sendでリクエストを送信する
      XHR.send();
      // レスポンスを受け取った時の処理を記述する
      XHR.onload = () => {
        if (XHR.status != 200) {
          // レスポンスの HTTP ステータスを解析し、該当するエラーメッセージをアラートで表示するようにしている
          alert(`Error ${XHR.status}: ${XHR.statusText}`);
          // 処理を終了している
          return null;          
        }
        // レスポンスされたデータを変数itemに代入している
        const item = XHR.response.post;
        if (item.checked === true) {
          // 既読状態であれば、灰色に変わるcssを適用するためのカスタムデータを追加している
          post.setAttribute("data-check", "true");
        } else if (item.checked === false) {
          // 未読状態であれば、カスタムデータを削除している
          post.removeAttribute("data-check");
        }
      };
    });
  });
}
setInterval(check, 1000);

しっかり理解できるようにしよう！

2020-11-27

マークダウン記法の練習

おはようございます！
今日はマークダウン記法がしっかりとできているかどうかを練習してみたいと思います！
強調
強調したい文字をアスタリスク２個「」で囲む
あいうえお
斜体
斜体にしたい文字をアスタリスク１個「」で囲むあいう*えお
改行
改行を入れたい部分に２つの「半角スペース」を入れるあい
う
えお
取り消し線
２個のチルダ「-」で文章を挟む
~~あいうえお~~
見出し

見出し１

見出し２

見出し３

箇条書き
* 箇条書き
* 箇条書き
リンク
グーグル大先生
引用

これは引用です
これは引用です

コードブロック
''' ruby
student = { "name" => "John", "age" => 10 }
teacher = { name: "Mike", age: 25 }
teacher[:subject] = "English"
puts student
puts teacher
puts teacher[:name]
'''

練習していると反映されるやつとされない奴があるのだけど、仕様の問題なのでしょうか？

2020-11-21

マイページ機能実装の振り返り

マイページの実装について学んだこと

マイページ機能の実装について、ユーザー情報の追加を行ってできることは、

・どのユーザーが投稿したないようなのかが分かるようになる。

・特定のユーザーが投稿したものの一覧を見ることができる。

・投稿の削除を行う際に本人しか削除できないように設定ができる。

○current_userメソッド

現在ログインしているユーザーの情報を取得できるメソッド

○mergeメソッド

マイページ機能を実装する上で利用者の名前や投稿内容current_user情報を結合して保存を行いたいが、そのときに使用するメソッド。（ハッシュとハッシュを結合させるためのメソッド）

○アソシエーション

モデルを利用したテーブル同士の関連付け

アソシエーションの定義は、

has_manyメソッド（一人のユーザーに対して複数の投稿を所有しているときに使用）

belong_toメソッド（一人のユーザーに対して１つの投稿の場合に使用）

アソシエーションでbelong_toを指定した場合、バリデーションがデフォルトでかかるようになっているため、presence: trueを設ける必要がなくなる。

○N+1問題

アソシエーションを利用した場合に限り、データベースのアクセス回数が多くなってしまう問題。

通常は、Tweets.allなどでデータを取得する際は一度のアクセスで済むが、例えば投稿が複数存在するケースで画面にそれぞれユーザー名を表示する場合だと、投稿に関連するユーザーの情報取得に投稿数と同じ回数のアクセスが必要になってしまう問題

○includeメソッド

N+1問題を解決するための、引数に指定された関連モデルを一度のアクセスで取得できるメソッド。

ただただまとめているだけの内容になってしまったから明日は気づいたことをなんでもいいから書いてみよう！！

2020-11-21

昨日の学習の振り返り

おはようございます。昨日のプログラミング学習の振り返りです。

①ツイートの保存

②ツイートの削除

③ツイートの編集

④ツイートの詳細表示

⑤ユーザー登録

のRailsでの方法を学習していきました！この内容にうち今回は①についてまとめていきたいと思います！

①ツイートの保存

ツイートの保存の実装方法は、大まかに1:newアクションのルーティング作成、2:投稿画面の作成、3:createアクションのルーティング作成、4:投稿完了画面の作成

になります。

特に

2:投稿画面の作成では、form_withメソッドのmodelオプションを使用することでわざわざurlを指定したりHTTPメソッドを指定する必要がなくなるため便利になります。

フォームからの保存の際にストロングパラメーターというものを学びました。ストロングパラメーターとは、指定したキーを持つパラメーターのみを受け取るように制限したものです。なぜストロングパラメーターが必要なのかというと、意図しないデータの更新をされてしまう可能性があるからです。

記述方法は、params.require(:モデル名) .permit(:キー名 :キー名, ...)

ストロングパラメーターはプライベートメソッドとしてcontorollerディレクトリの必要なファイルの中にプライベートメソッドとして定義します。プライベートメソッドとはクラス外から呼び出すことができないメソッドです。メリットとしては、

-classの外部から呼ばれたら困るメソッドを隔離-

メソッドの中にはclassの外部から呼び出されてしまうとエラーを起こすメソッドも存在するため。

-classの外部から呼び出されるメソッドを探すときにprivate以下の部分は目を通さなくてもよくなり可読性が上がるため-

繰り返し使用するメソッドもprivate以下に集約できます。

記述方法は

private

def private_method

（処理）

end

（以下略）

投稿完了画面の作成ではデータ登録に一定の制約をかけるvaridatemwメソッドを学びました。

記述方法（modelsディレクトリ内のファイル）

例）validates : name, presence: true

と記述します。

まだ慣れていないので考えを整理して文章にするのが時間がかかるし大変だ！！

これから見やすく、わかりやすい文章を書いていきますのでよろしくお願いします！！！

じゃあまたね : )

2020-11-19

ブログを始めてみました

こんにちは、たかしまというものです。

現在はプログラミングスクールに通い最高のエンジニアになるための勉強をしています！！

最近まで某自動車ディーラーにて営業をしていました。

定期的に更新をしていきたいと思いますので、よろしくお願いします！！