#はじめに こんにちは！閲覧ありがとうございます。 今回は【いいね機能の非同期通信化(Ajax)】を学習した為、 復習の意味も込めてアウトプットとしてまとめていこうと思います。 未来の僕が見返した時に、 また、プログラミング初学者が見てくれた時に、 有益な情報であるよう僕なりに書いていきます。 ※誤字、脱字、知識の誤りなど見つけた方はご教授いただけると幸いです。 #目次 ０：はじめに １：開発環境 ２：前提条件 ３：処理の流れ ４：実装 ５：さいごに #開発環境 ・ruby: 2.6.3 ・rails: 5.2.4.5 ・OS: macOS Catalina ver10.15.7 ・Cloud9 #前提条件 下記３つはすでに実装済で話を進めます。 1:User(ユーザー) 2:book(投稿) 3:favorite(いいね) ※本を投稿するWebアプリを例にしている為、bookモデルを作成

こんにちは! フリーエンジニアの長瀬です。 みなさんはajax(エイジャックス)を使っていますか？ ajax(エイジャックス)ってなんだか難しそうだなと思っていませんか？ この記事では順を追って初心者にわかりやすいように説明するので、安心してください。 ajaxを使えば、動的にページ内容を変更できます。 なのでうまく使いこなせばユーザーとの連携がより強いウェブサイトを作成することができます。 この記事では、ajaxの使い方について ・ ajaxとは ・ ajaxを使ってタイトルを変更する方法 という基本的な内容から、 ・ajaxを使った入力フォームを実装する方法 といった実践的な内容について解説していきます。 ajaxとは ajaxはAsynchronous Javascript and XMLの略で、ウェブ開発において使用されるいくつかの技術の総称です。 ajaxにおいて使用される技術を

Ajaxとは Ajaxとは「Asynchronous JavaScript + XML」の略 Asynchronousとは、非同時性の、非同期の つまり、「JavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと。」 んん？ 詳しく内容を追っていきましょう。 そもそも非同期通信とはどんなものか？ このように画像の遷移のない通信を非同期通信と言います。 同期処理は一瞬画面が白くなって、画面を切り替わることを言います。 こういったことをするためにAjaxという仕組みが必要です。 どうしてこんなことができるのか？ 大枠をざっくり先に説明します。 同期通信の場合 webブラウザからサーバーにリクエストを通信し、レスポンスが戻ってくる。 この時に、すべての情報を通信しているので、一瞬画面が白くなる。 =>サーバーからレスポンスが返ってくるまでは他の作業はできない。 非同期通信の場合