2023-11-23

Ajaxで手数料と利益の計算をするの巻①

Ajaxとは

Asynchronous JavaScript and XMLのことで、JavaScriptを使用して非同期にサーバーとやり取りするための技術です。これにより、ページをリロードせずにデータを取得したり送信したりすることができます。

loadイベントとturbo:loadイベントがありますが、後者がAjaxです。 loadイベントの場合、ページ全体が再読み込みされます。 turbo:loadイベントの場合、ページの一部の要素だけが非同期的に更新されます。

window.addEventListener('turbo:load', () => {

このように記述すると非同期通信となり、ページ全体がリロードされないことでより動的で迅速なウェブアプリケーションとなります。わたしは両方で記述して操作してみましたが、体感的にはまったくわかりませんでした。目に見えないJavaScript のがんばりなのでしょうか。

先日の続きでJavaScript の実装に取り組んでおります。いやぁ、なかなか入ってこない、JavaScript さん... 苦手やわぁ。

カリキュラムを見返しつつ、いろいろ検索しつつ、なんとかできた！ JavaScript の指先に少しふれられた気がした。

最終課題ではmustではありませんでしたが、復習を兼ねてitemのテストコードを書いてみよう！と軽い気持ちで手を付けたらまぁ大変。テストがスムーズに通るまでに半日以上かかってしまいました... 次回へ続く...

2023-11-20

ActiveHash

ActiveHashとは

ActiveHashは、Ruby on Rails フレームワークで使用されるGem（ライブラリ）の1つです。 ActiveHashを使用すると、データベースの代わりにモデル内にデータを格納して扱うことができます。 ActiveHashを使うと、データベースにテーブルを作成する必要がなくなります。例えば、アプリケーション内で使う設定情報や、ドロップダウンリストの選択肢など、データベースに格納するほどの規模ではない、でもコードからアクセスできるようにしておきたいデータに活用されます。

こんな感じです。 Webページでよく目にするプルダウンから選択する、あれですね。

ActiveHashにアソシエーションを設定する場合、またバリデーションをかける場合、それぞれ決まりがあります。 ActiveHashを用いて、belongs_toを設定するには、extend ActiveHash::Associations::ActiveRecordExtensionsと記述します。また、has_manyを設定するには、include ActiveHash::Associationsと記述します。

アソシエーション組むにもひとくせあります。 AvtiveHashで定義されているmoduleというものを取り込む必要があるためです。

バリデーションについては、idに数字を付与して設定します。なので、カラムの型はstringではなくintegerです。また、選択必須ということであってもprecence: trueではなく、numericality: { other_than: ●}というヘルパーメソッドを使用します。

●の部分に『1』と記述することで、『1』以外の選択をされた場合に検証は成功となりデータベースに保存されます。『1』が『---』にあたるので選択必須という条件がクリアとなるわけです。最初、ここをprecence :trueで考えていたらどうやら違っていたみたいで、それ以外にも継承するモデル名の大文字小文字間違いとか、 endの記述もれ、位置のずれなどなど、エラー満載でなかなか進まない。

でも、提出期限があるわけではないので、自分の納得いくまで試行錯誤できるので満足感あり。めっちゃ疲れるけど。でもでも、楽しいです。

次は苦手なJavaScript！がんばります！！

ついこの間まで、県が主催するコーディングブートキャンプに参加していました。そこで携わったフリマアプリを目下復習中です。チーム開発に参加しておりまして、開発中も思っていましたが、自分ひとりでやってみてさらに深まるチームメンバーへの感謝。みんな大変だったんだなと、つくづく感じる今日この頃です。

走馬灯のようにカリキュラムを進めたものだから、理解が追いついておらず。最初からひとりで実装してみようと試みております。ユーザー管理機能を実装中から気づきはたくさんあったのですが、忘れちゃったので...

記憶定着のためにも、今からでも綴っていこうと思います。