2023-06-15

nvm、Node.js、npm

nvmとは

nvm はnode.jsのバージョンマネージャー。

下記を参考にインストールした。
nvm-sh/nvm: Node Version Manager - 複数のアクティブな node.js バージョンを管理するための POSIX 準拠の bash スクリプト

Node.jsとは

JavaScriptの実行環境。
JavaScriptは本来Webブラウザ上のみで動作し、それだけではサーバー上で動作させることはできません。Node.jsを使うことで、JavaScriptがサーバー上でも動作できるようになる。

nvmで最新のLTSのバージョンを指定してインストールした。

nvm install 18.12.1

この状態になったからこれで良さそう。

その後.nvmrcファイルを作成しバージョンを設定し、これを有効にする様に.zshrcファイルへの追記をした。
その後cdするとバージョンが表示された。

#182 Node.jsのバージョン管理について学んだ | FBC
Node.jsについてこの日報がすごく参考になりました！感謝です🙏
紹介されていたこの記事も分かりやすかった！
Node.jsとはなにか？なぜみんな使っているのか？ - Qiita

npm

Node.jsのパッケージを管理するツール
RubyでいうBundlerみたいなものの様🤔
npm入門 - Qiita

emjiをインストール

使ってみた

グローバルインストールすると、どこに保存されているのかな？と探してみたらバージョンごとのファイルにあった。

アンインストールして

さっきのフォルダを確認してみるときちんと消えている。

コマンドも使えなくなっている。

2023-06-15

JavaScript入門２

イベントハンドラの登録方法

HTML要素の属性としてイベントハンドラを登録する

HTML のコードの中に JavaScript のコードが含まれることになり現在は推奨されていない。

DOMで取得した要素のプロパティにイベントハンドラを登録する

※同じイベントに対するイベントハンドラは一つしか登録することが出来ない。

<input type="button" value="button" id="xxx">

<script>
    function butotnClick(){
        console.log('Hello');
    }

    let button = document.getElementById('xxx');
    # button.プロパティ = イベントハンドラ;と記述
    button.onclick = butotnClick;
</script>

コールバック関数は他の書き方も出来る。

無名関数

button.onclick = function(){
        console.log('Hello');
    };

アロー関数式

 button.onclick = () => {
        console.log('Hello');
    };

イベントに関する情報を関数内で利用する場合は、コールバック関数で引数を記述する。
引数として受け取った Event オブジェクトにはイベントの情報が含まれています。
JavaScript | 発生したイベントの情報を取得する(Event)

addEventListenerメソッドを使ってイベントリスナーを登録する

※同じターゲットの同じイベントに対して複数のイベントリスナーを登録することができます。この場合、イベントが発生すると登録されている順番に複数のイベントリスナーが呼び出されます。

<input type="button" value="button" id="xxx">

<script>
    function dispHello(){
        console.log('Hello');
    }

    function dispBye(){
        console.log('Bye');
    }

    let button = document.getElementById('xxx');
 # target.addEventListener(type, callback [, options]);と記述
    button.addEventListener('click', dispHello);
    button.addEventListener('click', dispBye);
</script>

イベントハンドラを登録するコードの記述位置

JavaScript | イベントハンドラを登録するコードの記述位置に関する注意と対処方法
要素のプロパティに対して何かを実行するJavaScript のコードが、 HTML ページの中で対象の要素が記述されている位置よりも前にある場合にはエラーが発生する可能性がある。

対応方法

avaScriptのコードをHTMLページの末尾に記述する
DOMContentLoadedイベントを利用する
loadイベントを利用する
scriptタグでdefer属性を設定する
JavaScript | JavaScriptの外部ファイルを非同期で読み込む(async属性,defer属性)

2023-06-15

JavaScript入門１

Ajax

Ajaxとは、非同期通信を、「JavaScriptの技術で実行すること」を指します。
企業によっては、単純に「非同期通信」のことを指してAjaxと呼ぶケースもあります。AjaxはWebページに搭載されている技術ですが、このAjaxを使うことで、Webページ全体を更新することなく「一部分だけ情報を更新する」ことが可能です。

非同期通信

JavaScript | XMLHttpRequestオブジェクトを使った非同期通信を行う
非同期通信の場合はサーバへリクエストを送信するとすぐに次の処理へ移ります。
そこで非同期通信の場合には、サーバからのレスポンスの受信が完了した時に発生するイベントに対するイベントハンドラ(onreadystatechange プロパティ)を利用します。イベントハンドラとは指定したイベントが発生した時にコールバック関数(function…の部分）を呼びだして実行します。

let request = new XMLHttpRequest();

request.onreadystatechange = function(){
  if (request.readyState == 4){
    if (request.status == 200){
      let data = request.responseText;
      console.log(data);
    }
  }
}

request.open('GET', 'https://www.example.com/data.txt', true);
request.send(null);

同期通信

JavaScript | XMLHttpRequestオブジェクトを使った同期通信を行う
同期通信の場合は send メソッドを実行したあと、サーバからのレスポンスが全て帰ってくるまで処理が止まります。すべてのレスポンスを受信したら次の処理に移りますので HTTP ステータスコードを確認したあとで受信したデータを取り出します。
(同期通信は受信が完了するまで処理が止まってしまうため、非推奨になっているようです。)

let request = new XMLHttpRequest();
request.open('GET', 'https://www.example.com/data.txt', false);
request.send(null);

if (request.status == 200){
  let data = request.responseText;
  console.log(data);
}

2023-06-15

コメント機能修正

コメント機能

「コメントを編集出来るのはコメントした本人のみ」という制約を付ける方法

app/views/books/show.html.erb

      <% @comments.each do |comment| %>
        <tr>
          <td><%= comment.content %></td>
          <td><%= l comment.created_at, format: :short %></td>
          <td><%= comment.user.name == '' ? comment.user.email : comment.user.name %></td>

#ログインしているuserとコメントを書いたuserが同じ人なら「編集」「削除」ボタンを表示する   
           <% if comment.user == current_user %>
            <td><%= link_to t('views.common.edit'), edit_comment_path(comment) %></td>
            <td><%= link_to t('views.common.destroy'), comment, method: :delete, data: { confirm: t('views.common.delete_confirm') } %></td>
            <% end %>
        </tr>
      <% end %>
    </tbody>
  </table>
<% end %>

これで大丈夫かと思ったが、大丈夫じゃ無かった！
ブラウザのチェックはコントローラーに渡す前に止める程度のものにして、きちんとしたチェックはコントローラーでしなければいけない！

2023-06-15

デザインパターンについて

GoFのデザインパターンを勉強する - Qiita

Builderパターン
ビルダ (Builder) | Ruby デザインパターン | 酒と涙とRubyとRailsと
Decoratorパターン
デコレータ(Decorator) | Ruby デザインパターン | 酒と涙とRubyとRailsと
Facadeパターン
RubyでFacadeパターン - Tbpgr Blog

2023-06-15

オブジェクト指向

インスタンス変数について

（あなたの周りでも見かけるかもしれない）インスタンス変数の間違った使い方 - Qiita
『一時的なデータはインスタンス変数にせずに引数、戻り値、ローカル変数として受け渡す』というのは気をつけていきたい！

参考資料

[オブジェクト脳の作り方]P189ででて来たbecomes()について
[Rails]ActiveRecordのインスタンスをキャストする - Qiita
(ActiveRecord::Base) になる - APIdock

オブジェクト指向

保守に強く、再利用しやすいものを作るためにオブジェクト思考が使われているということがよく分かった。
そのために下記が大切。

重複を排除する

呼び出し側を共通化するポリモーフィズムや、クラスの共通部分をまとめて使い回す継承を使う。

部品の独立性を高める

凝集度を強く結合度を弱くする事で、１つのクラスに定義する機能の意味的なまとまりを強くし、クラス間のやりとりを少なくする。

適切な名前をつける
適切な名前を付けられない時は、まとまりの悪い機能がクラスに集まっている可能性があるので、クラスの分割を検討する必要がある。
クラスが外部に公開する情報を最小限にする
インスタンス変数を隠すのは当然として、他から使われる見込みのないメソッドもできる限り隠す。
クラスやメソッドを小さく作る
部品の独立性を高めようとすると、機能が限定されるため、メソッドやクラスは自然と小さくなる。

依存関係を循環させない

依存関係を循環させてしまうと、部品の単独での再利用が出来なくなる。
修正する場合も、他の部品への影響を調べなければいけない。

アジャイル開発とは

XPやスクラムなどの反復型開発手法をまとめて、アジャイル開発手法という。

テスト駆動開発
リファクタリング
継続的インテグレーション（CI)
コンパイル、ビルド、単体テストを定常的に自動実行する

2023-06-15

Railsでテスト2

詰まった事

created_onメソッドのテストに悩む😵‍💫

test "created_on" do
   report = reports(:one)
   assert_equal report.created_on, report.created_at.to_date
end

これだとtrueになるのは当たり前なのでもはやテストする意味もない。。

test "created_on" do
   report = reports(:one)
   assert_equal report.created_on, "Tue, 01 Nov 2022"
end

比較している型が違って比較できない。。。
TimeWithZone型について調べたが、そもそもcreated_onはDate型だった😅

下記は今回の事には関係なかったが、勉強になった。
ActiveSupport::TimeWithZone
ActiveSupport::TimeWithZone Rails 5.0官方教程 _w3cschool
それぞれの型
created_at.class ・・ ActiveSupport::TimeWithZone
created_on.class ・・Date

色々試行錯誤していたらreport.created_onはDate型な事が分かり、Date型のオブジェクトを作り比較するとテストが通った！🙌
class Date (Ruby 3.1 リファレンスマニュアル)