JavaScript– category –
-
【Rails7】メニューバーのタブの切り替えをJavaScritp + Stimulus で実装してみた
どうも、ヒロキです。 今回はRails7でメニューバーのタブの切り替えをJavaScript、およびそのフレームワークのStimulusを使って実装してみました。 今後、同じ機能を再現するための覚書用と、後学のため記事にまとめておきます。 どなたかの参考になれば幸... -
【Rails7】ActiveStorageで複数枚画像を投稿・更新する（プレビュー表示も実装）
ActiveStorageで複数枚画像を投稿（保存）する方法についての情報はたくさん出てきますが、正直どれも僕が思い描いていた画像アップロード機能のイメージとは違うかなぁと感じております。 例えば、僕が思い描いている複数枚画像アップロード機能のイメー... -
【Rails7】JavaScript（+Stimulus）でクリップボードにコピーするボタンを実装してみた
表示されたテキストをボタンクリック一つでクリップボードにコピーしてくれる機能、あったら便利ですよね。 ということで、今どきのWebサービスでよく見かける以下のようなボタンを実装してみました。 今回の実装で用いたJSライブラリはStimulus。 Rails7... -
【Rails7】Ajax + Stimulusでメールアドレスが登録済みかどうかチェックする方法 (jQueryなしで実装)
Railsではフォーム入力時（新規ユーザー登録時）にすでに登録済みのメールアドレスがある場合、バリデーションが発動して登録できないようになっているかと思います。 しかし、しかしですよ！？ メールアドレスがすでに登録されているかどうかは、フォーム... -
【Rails7】JavaScript + Stimulusで動的なバリデーションチェックを実装してみた
以前、JavaScriptで動的なバリデーションチェックを実装する旨の記事を書きましたが、JSのコードが冗長なのと変数宣言にvarしか使えない（Turboとの相性により）という課題がありました。 https://plog.kobacchi.com/rails-javascrip-realtime-validation-... -
【Rails7】JavaScript + Stimulusでフォームの自動入力補完機能を実装してみた（DBからJSへの値受け渡し）
Railsで、データベースから取得した値を使ってフォームの自動入力補完機能を実装する方法についてまとめたメモ書きです。 イメージはこんな感じです↓ データベースに保存されたアドレス帳（個人情報）をviewに呼び出し、氏名のみをセレクトボックスに表示... -
【Rails7】ransackとStimulusでインスタント検索機能を実装する方法
Railsで検索機能を実装するならransackというgemが有名どころですね。 ransackを導入すれば簡単に検索機能を実装することができます。 ただ、今回は普通の検索機能ではなく、以下のように入力したらすぐに検索結果を返してくれるインスタント検索機能を実... -
【Rails】JavaScriptで動的なバリデーション（リアルタイムでチェックする機能）を実装してみた
Railsでフォームのバリデーションチェックを行う場合、送信ボタンを押した後でないとエラーがあるかどうかを判定できません。 バックエンド側でバリデーションチェックは行いつつ、フロント側でもリアルタイムにバリデーションチェックを行う機構を実装し... -
【JavaScript】簡単な数字当てゲームを作ってみた
JavaScriptのチュートリアルを通して簡単なゲームを作ってみたので、学んだことを忘れないうちにメモとして残しておこうと思います。 今回作成したゲームは「数当てゲーム」で、1から100までの数字の中からランダムに割り当てられる数字を10回以内に当てる...
1