frontend

github.com geolib っていうモジュールもスターが多くて良さそうだぞ？ ということで、本日は Turf.js とは異なる緯度経度計算モジュールを使ってみようと思います。 モジュール選定大事

zako-lab929.hatenablog.com 昨日、 Google Map 上で距離が測れることを知りましたが、 本日は React 上で 緯度経度 を指示して距離を計算してみたいと思います。

firebase.google.com 本日は Firestore でリアルタイム性を発揮してみます。 使ったことない Firestore でしたが、 新しい知見が増えるということはやっぱり楽しいですね！ Realtime Database と Firestore どっちを採用するかは悩ましいところですが、 データ量や課金対象のアクションを理解した上で検討するのが良さそうだと思いました。

zako-lab929.hatenablog.com さて、Firestore は使ったことないのですが、 メモがてら使ってみようという魂胆で進めていきます。 今回も前提として各種準備が終わっている状態からのスタートになります。

zako-lab929.hatenablog.com Firebase コンソール から Realtime Database の初期セットアップが作成が終わったら、Firebase SDK 経由で Vue プロジェクトから使えるようになっています。 この記事では、チャットのように文字列を送信及び受信するサンプルをまとめておきます。

zako-lab929.hatenablog.com 昨日、Firebase プロジェクトを作成しました。 本日は、Realtime Database の初期セットアップのやり方をまとめておきます。

zako-lab929.hatenablog.com 前回の記事でも使っている Firebase ですが、 Firebase コンソール 上でプロジェクトを作って API-Key などを発行する必要があります。 本日は、初回セットアップのやり方をまとめておきます。

NaxRiscvのドキュメントを、改めて位置から読んでみることにしたいと思う。 spinalhdl.github.io msyksphinz.hatenablog.com Frontend デコーダ 特になし。 物理レジスタ割り当て 物理レジスタ割り当ては、割り当てられていない物理レジスタのインデックスを含む循環バッファを実装することで行われる。 これは、分散RAMを搭載したFPGAにうまく適合する。 アーキテクチャ・レジスタから物理レジスタ アーキテクチャ・レジスタファイルから物理レジスタへの変換は、以下の3つのテーブルを実装することで行われる。 投機的マッピング:アーキテクチャ・インデック…

はじめに こんにちは。皆さん Backstage ご利用になられていますか？ Permission Frameworkでアクセスコントロールしていますか？ 先日、BackstageのCatalog Entityのアクセスコントロールを実現するためのRBACの設定についてご紹介しました。 techblog.ap-com.co.jp このときは「次回は「Scaffolder Template」のPermissionについて見ていきたいと思います。」と言っていましたが、その後Backstage v1.30のリリース内容のご紹介があり、少し間が空いてしまいました。申し訳ありません。 ということで、今回…

状況 ReactからRailsAPIにリクエストを送ったらこんなCORSエラーが出た。 Access to XMLHttpRequest at 'http://localhost:3001/menus' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the reques…

マルチプロダクト戦略を掲げてプロダクトを急速に増やし続けている SmartHR のフロントエンド領域について、2018年から SmartHR に参加しているフロントエンドエンジニアの nabeliwo と技術顧問の koba04 が、これまでの振り返りと今後の展望を話しました。 SmartHR のフロントエンドでどんな技術が使われてきてどんな課題と向き合ってきたのか、そして今現在取り組んでいる課題や SmartHR ではどんなフロントエンドエンジニアが求められるのかなど、幅広いテーマが出てきました。 この記事ではその模様をお届けします。 目次 フロントエンドの Rails からの脱却とフロント…

はじめに 自作Webアプリケーションを作成中です。環境構築工程で少々躓いてしまったので記事にしておこうと思います。 Web開発の効率を大幅に向上させる技術の一つに、Hot Module Replacement（HMR）があります。 HMRは、アプリケーションの実行中にモジュールを動的に更新する機能で、ページ全体のリロードが不要になり、アプリケーションの状態を保持したまま変更を確認できるため、開発者の生産性を高めます。 ここで抑えておきたいポイントとしては、HMRは主にクライアントサイドのJSの更新に焦点を当てているため、サーバーサイドのレンダリングを必要とする変更は、従来通りのページリロードが…

Faber Company 開発運用チームの菅原です。 以前の登壇告知でお知らせした通り、2024年8月24日に札幌で開催された「フロントエンドカンファレンス北海道2024」に参加してきました。 会場入り口はLEDディスプレイになっていて、カンファレンスロゴが出迎えてくれました。 現地から、気になったセッションをピックアップしてご紹介します！ 注目したセッション Webサイトをキュッと引き締めるモーションデザイン by 道家陽介 ESLint Plugin により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ by Shinyaigeek/Shinobu Hayashi …

カケハシで AI 在庫管理のフロントエンド開発を担当している鳥海です。 カケハシは 2024 年 8 月 24 日（土）に開催された、フロントエンドカンファレンス北海道 2024 にてスポンサーを務めた関係でさまざまなセッションに参加させていただいたので、その中でとくに気になったセッションについてまとめたいと思います。 www.frontend-conf.jp 登壇・協賛レポートについてはこちらにて公開されているので、ぜひ一緒にご覧ください。 kakehashi-dev.hatenablog.com 興味深かったセッション 4 選 参加した中でいくつか興味深かったセッションがあったので、4 つ…

npm run build を叩いたら error TS2339: Property 'env' does not exist on type 'ImportMeta'. が発生した TypeScriptとVue3のキャッチアップのためにTodoリストを作っていた時に遭遇したエラー。 とりあえず機能を実装して、「いざビルドや！」と思って npm run build を叩いたら、 $ docker-compose run frontend npm run build > todo@0.0.0 build > run-p type-check "build-only {@}" -- > todo@…

8月6～7日に開催された「AWS JumpStart 2024」へモビルスからもエンジニア4名が参加しました。 今回はSaaS Product DivisionでMOBI VOICEの開発を行っているプラディープ さんの参加レポートをお届けします。 ※原文は英語ですが日本語版のリクエストもあったため、後半に翻訳文を貼り付けしています。 What is AWS JumpStart AWS JumpStart offers a two-day workshop program designed to enhance your understanding of AWS and your archit…

こんにちは、フロントエンドエキスパートチームの mugi です。 2024/08/24(土)にフロントエンドカンファレンス北海道が開催され、サイボウズもスポンサーとして協賛し、かつ弊社メンバーも複数名登壇しました。 今回は、当日の雰囲気や登壇の様子などをご紹介します。 スポンサーブース サイボウズはゴールドスポンサーとして協賛し、当日はブースを出展しました。 サイボウズブースの様子 Frontend Expert QUIZ 今回はブースを楽しんでもらうための企画として "Frontend Expert QUIZ" というものを用意しました。簡単に説明すると "正解させる気が感じられないゲキムズ…

概要 参考情報 概要 以下、自分用のメモです。忘れないうちにメモメモ。。。 Dart 3.4 で dart pub unpack というコマンドが追加されたみたいですね。 codewithandrea.com dart.dev 指定したパッケージをローカルにダウンロードしてくれるコマンドとのこと。 ソースを確認したいときなどに、サクッと出来て便利そう。 実行すると以下のようになります。 $ dart pub unpack image_picker Downloading image_picker 1.1.2 to `.\image_picker-1.1.2`... Resolving depe…

はじめに 全くの余談ですが、このブログの下書きは高度11300mから書かれています。 フロントエンドカンファレンス北海道2024が、2024年8月24日（日）にDeep Tech CORE SAPPOROで開催されました。 www.frontend-conf.jp フロントエンドカンファレンス北海道(DeepTech CORE SAPPORO会場)無事終了しました！160名を超える多くの方に来て頂き感謝です！ご来場の皆様、スタッフの皆様本当にお疲れ様でした！！#frontendo #DeepTechCORE #Sapporo#フロントエンドカンファレンス北海道 pic.twitter.com/…