タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
週刊Railsウォッチ: SorbetのRuby AOTコンパイラが公開、「Compiler Explorer」にRubyが追加、Ractorで非同期通信ほか（20210823後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Ruby 🔗 SorbetのRuby AOTコンパイラ（Ruby Weeklyより） 元記事: Sorbet Compiler: An experime
こんにちは、フリーランスエンジニア歴6年のしょーごです。 みなさん静的サイトにフォームの埋め込みを行う際、これまで難儀しなかったでしょうか？ 私は最初はフォームの実装方法がわからず、フォームのためにわざわざWordPressを埋め込むほどでした。
【JS / TS】非同期通信（axios）ごとにtry~catchを実装したくない人のためのエラーハンドリング Tips💡
投稿する背景 初めての投稿となりますので、お手柔らかにご一読していただけると何よりです🙌 なぜ、今回重い腰を上げて本記事を執筆することにしたかと言うと、ある時、非同期通信処理（axios）を挟むごとに無意識でtry~catchを実装していた自分に疑問を抱いたからです。🤔 （進撃の巨人で言うと、「無意識に壁の外に人類が存在しない」という当たり前のように思っていたことから、真実に差し迫ったエルビン・スミスみたいな感じです。アニメ派なので執筆時点では最終回はまだ見ていません🙈） try~catchを何度も実装せずにエラーをハンドリングできるインターフェースを持った関数を実装したら、どれだけ楽になるか、そう模索した結果、辿り着いた実装を共有したいと思います👀 対象読者 非同期処理ごとに「try~catch〜」を書かなければいけない習慣に疲れた人😩 try~catchにおけるエラーハンドリ
TL; DR ユーザーを待たせるとき、「どのように待たせるか」によって印象は結構変わります。 非同期処理などでユーザーを待たせるときは、適切なローディングを表示してUXを改善しましょう。 違いを体感していただけるよう、いくつかの例を元に書いてみました。 ボタン押下の例 送信ボタンを押してから、通信に1秒かかるお問い合わせフォームを作ってみました。 2つの例を比べてみて下さい。 実際には何も通信しないダミーのFORMなので、気軽に試して下さい。 Bad See the Pen ダミーFORM by laineus (@laineus) on CodePen. Good See the Pen ダミーFORM by laineus (@laineus) on CodePen. 改善されたこと1 ユーザーの操作に対し、画面が即時応答するようになりました。 結果: 体感速度が向上しました。 どちら
PythonとDjangoを使って簡単なWebアプリケーションを作ってみます。 また非同期通信の練習として、以下の要件を満たしたものにします。 ・バナーとテキストを用意して、バナーをクリックしたら画面のリロードが走らずにテキストと画像が書き換わるシンプルなプログラム 一般的なノベルゲームをイメージするとわかりやすいです。 最終的なディレクトリ構成は以下になります。 ajax_practice ├── myapp │ ├── ... ├── db.sqlite3 ├── manage.py ├── myproject │ ├── ... ├── ajax │ └── ... ├── static │ └── css │ └── style.css │ └── images │ ├── default_image.jpg │ └── new_image.jpg │ └── js │ └── s
本章では、jQueryまたはjavascriptで非同期通信する方法についてメモ書きします。 javascriptで非同期通信 jsonデータでPOSTする場合 [javascript file] var _xhr = new XMLHttpRequest(); _xhr.onreadystatechange = function () { switch (_xhr.readyState) { case 1: // request start break; case 2: // recieved header data break; case 3: // reciving body data break; case 4: // complete xhr connect switch (_xhr.status) { case 200: // success // * in the case,
はじめに こちらの記事ではWEB開発における非同期通信について理解しやすいように手を動かして作れるアプリを作りました。 非同期通信について学んでみたい人はぜひ作ってみてください。 対象者 非同期通信とはなにかわからない、または名前だけ知っている、漠然としたイメージだけあるといった方 WEB開発に関する知識はある程度持っている方 非同期通信とは 非同期通信とは通信技術の一つで送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式です。 イメージが湧きにくいと思うので以下の画像を見てください。 この処理ではボタンをクリックした後、画面遷移を行わずにデータベースへアクセスしランダムなポケモン情報を画面に表示しています。 非同期通信では処理は以下のように行われています。 送信ボタンをクリックするとJavaScriptにてhttpリクエストが送信され、サーバーサイド
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Ruby Ractor Experiments: Safe async communication - ivo's awfully random tech blog 原文公開日: 2021/02/14 原著者: Ivo Anjo.me Ractorとは、アクターモデルからヒントを得たRuby 3.0の新しいコンカレンシー抽象化です。 APIドキュメント: Ractor | Ruby API (v3.0) 設計ドキュメント: ruby/ractor.md at master · ruby/ruby ある情報を他の場所に送信する処理をRactor目線で見ると、通信を以下のいずれかに分類できます。 非同期（ノンブロッキング） RactorはRactor#sendで他のRactorに情報を送信できます。その情報は送信先のRactorからR
今回は Flutter で非同期通信に対応した ListView の無限スクロール処理を実装します。 良くあるページング可能な外部 API を利用した ListView を実装するユースケースですね。 今回は実際には API は実行せず、Future.delayed で 数秒処理を遅らせて非同期通信を再現しています。 状態管理は Riverpod で行っています。 今回は非同期部分と無限スクロール部分のみ掲載しますので、全てのソースコードは Github を参照ください。 環境macOS Big Sur 11.2.1Android Studio 4.1.2Flutter 2.0.0Dart 2.12.0package を install するpubspec.yaml に Riverpod package を追記します。 今回は Riverpod に hooks_riverpod 、その他
BPSの福岡拠点として一緒にお仕事をさせていただいています、株式会社ウイングドアのヤマウラです。 今回は、筆者がローカルで構築している練習用サイト(WordPress)にて、ページの表示に時間がかかっている箇所があったので、 その際に対応した内容をご紹介したいと思います。 ※本記事は、データ取得のロジックの変更によってページの表示速度を早められるようにした記事ではなく、HTMLの表示をAjaxにて書き換える内容の記事になります。また、JavaScriptの説明等は含まれておりませんので、あらかじめご理解いただけますと幸いです。 目次 現状・課題 結論・最終的にやったこと Ajaxとは 外部から大量に取得してる値の処理が原因 実際に変更 感想 現状・課題 ローカルの環境にて、外部から持ってきた情報を表示するという簡素なページを作成していたのですが、 どうにもページの読み込みが遅い、という問題
axiosとは HTTP通信(データの更新・取得)など、HTTPリクエストのやり取りを簡単に行うことができる、JavaScriptのライブラリです。Node.jsで記述されています。APIを提供するクラウドサービスに対して、データを送受信することができます。 非同期にHTTPメソッド(GET・POST・PUT・DELETE通信など)を取り扱えます。 非同期処理とは 時間の掛かる処理の結果を待たずにすぐ次の処理を実行できる仕組みです。Promiseを使うと簡単に実現できます。 Promiseとは、非同期処理の状態を監視するためのオブジェクトで、非同期処理を同期処理のように扱える書き方です。 使う場面 JSONデータを提供しているAPIと接続して、データを取得することが多いです。 Webの場合、サーバーの中で外部にデータを提供している機能(またはそｎページ)のことをAPIとよびます。 asyn
Reactでの非同期通信処理の方法 Reduxのミドルウェアを使って実装します ※ Reactのコンポーネント内で処理する方法もありますが、コンポーネントと通信処理が密結合になってコンポーネントのソースが複雑になり、可読性が下がるなどの理由で採用されるケースはあまりないためこの方法はとりません redux-sagaとredux-thunkの比較 非同期通信処理の代表である redux-sagaとredux-thunkについて比較してみます 上図のように、redux-thunkを導入すると、action creatorの中に非同期通信処理を書いたり、action creatorからさらに別のaction creatorをcallすることができるようになります。 そのため、本来の reduxのアーキテクチャの形から逸脱することになり、記述の自由度が上がり開発者各々が書くことでソースコードの可読
GoogleFormをカスタマイズして自サイト（Vue.js + Firebase）で利用しようとしてハマったこと。 フォーム内容送信時にGoogleForm専用の送信完了画面に飛ぶのが嫌 →とりあえず非同期通信(axios)で送信してみる →CROSのエラー↓が出る 「Failed to load https://docs.google.com/forms/XXXXXX/formResponse: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.」 まず、エラーが出てても非同期通信はうまくいきます。 参考：Googleフォームをカスタマイズして導入、Aja
はじめに ユーザビリティ向上やSPAなどで非同期通信(ajax）は頻繁に用いられますが、今回はVue.jsで非同期通信を使ってビットコインの価格を表示してみたいと思います。 非同期通信を実現するためにaxios（アキシオス）というライブラリを使用します。axiosはVue公式サイトも推奨しているライブラリです。 ビットコイン価格の取得は会員登録なしで利用できるcoindeskのAPIを使います。 レスポンスの内容はこちらから確認できます。 ソースコード 解説 Javascript まずはJavascriptから解説します。 new Vue({ el: '#app', data: { bpi: null, hasError: false, loading: true }, }) dataプロパティに以下の３つを定義します。 ビットコインの情報を保持するbpi APIエラー制御用のhasErr
実装内容 productsテーブルを作成する。（カラムはid, name, priceの3つ） 一覧に常にレコード全件が表示される 特定のidからnameとpriceを取り出して表示する 新しくレコードを追加して、一覧に追記する レコード追加前に確認メッセージを表示する AjaxとJSON こちらの記事がわかりやすいです！ 初心者目線でAjaxの説明 Asynchronous JavaScript + XML JavaScript組み込みクラスであるXMLHttpRequestによる非同期（Asynchronous）通信のこと JSON JavaScript Object Notation データ形式の1つ XMLに替わり、Ajaxで使われることが多い ファイル構成 サーバはApache、データベースはMySQLを使用しました。 htdocsの下にajax_testディレクトリを用意し、そ
こんにちは。 朝活でジムに行ったらその後二日間筋肉痛で動けなくなりました・・・いのうえです。 今回は、JavaScriptのfetch()メソッドと非同期通信について解説をしていきます。 プログラミングの勉強をしていると知らない単語や専門用語が当たり前のように出てきて、結局よく分からない・・・なんてことがありますよね。 この記事は、難しい用語が出てきてがっつり理解を深めるようなものではなく、「初学の方でも概要とポイントが掴める」ことを目的にしています。 fetchについて勉強したいと思っている方の最初のステップになれば幸いです。 最後には基本的な使い方としてサンプルのコードも書いていますので、参考にしてみて下さい！ fetchの意味そもそも、fetch（フェッチ）という言葉の意味はご存知でしょうか。 和訳すると、取ってくる、呼び出す、引き出すという意味合いになります。 私の感覚ですが、分か
知識の枝 Axiosを使い非同期通信を行う
非同期通信方法はAjax以外にもAxiosという方法があります。Vue.jsで推奨されている方法ですので、今回はこのAxiosをDjangoで使用する前提で解説したいと思います。
【連載 第2回】freeeカード Unlimited での非同期通信の設計と実装 - freee Developers Hub
金融チームでエンジニアをしているimamuraです。freeeカード Unlimited の開発の裏側について紹介する連載の第2回目になります。freeeカード Unlimited がどのようなサービスなのかは第1回目の記事*1で紹介していますので、そちらをご覧ください。また、そこで紹介したように freeeカード Unlimited ではマイクロサービスアーキテクチャを採用しており、バックエンドのサービス間は主に非同期で通信しています。 freeeカード Unlimited の構成図 この記事では、サービス間の非同期通信をどのような観点で設計したのかを共有できればと思います。要約するとfreeeカード Unlimited では以下の対応を行いました。 メッセージが必ず送信できるようにOutbox Patternを利用して永続化する メッセージの受信の失敗のために再送可能なメッセージにする
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Googleフォームを静的サイトに埋め込みカスタマイズ【非同期通信Ajax】｜しょーごログ
非同期通信をするなら絶対にやったほうがいいこと - Qiita
Django & JavaScriptで非同期通信のアプリを作る - Qiita
jQueryまたはjavascriptで非同期通信する方法 - kikki's tech note
JavaScriptを使った非同期通信について - Qiita
Ruby: Ractorによる安全な非同期通信の実験（翻訳）｜TechRacho by BPS株式会社
Flutterで非同期通信に対応したListViewの無限スクロールを実装する | ZUMA Lab
Ajax: 非同期通信でページのローディング時間を短くした｜TechRacho by BPS株式会社
【JavaScript】async/awaitとaxios、非同期通信について - Qiita
Reactでredux-sagaで非同期通信 〜redux-thunkとの比較も〜 - Qiita
Google Formへaxiosで非同期通信しようとした時に出るCROSエラーの回避
【Vue.js入門】08_axiosを使って非同期通信を行う | s9iブログ
【jQuery】PHP/Ajax/MySQL を利用した非同期通信を行う - Qiita
【JavaScript】初めて学ぶ！fetch()メソッドと非同期通信 BREEZE
yupin.hatenablog.com
video.tv-tokyo.co.jp
www.saikyo-jump.com
www.saikyo-jump.com
naomimorning.hatenablog.com
shihopontan.hatenablog.com