Tanstack Query を活用したフロントエンドアーキテクチャの紹介 ~ 持続可能な開発を目指して ~ | MEDLEY Developer Portal
2023-03-31Tanstack Query を活用したフロントエンドアーキテクチャの紹介 ~ 持続可能な開発を目指して ~こんにちは。医療プラットフォーム第一本部プロダクト開発室所属エンジニアの髙橋です。 普段の業務では、医療 SaaS プラットフォーム CLINICS の医療機関向けアプリケーション（以下、CLINICS）の開発を担当しています。 CLINICS では、昨年 10 月頃から React コードベースのリアーキテクチャに取り組んでいます。 その取り組みの 1 つとして、非同期状態管理に関連する実装を Tanstack Query を使って刷新しています。 この記事では、CLINICS における Tanstack Query の活用方法を導入背景と狙いを含めて紹介します。 目次 Tanstack Query についてTanstack Query を活用したフロントエンド
AWS MediaConvert と hls.js で動画配信サービスを構築しました | MEDLEY Developer Portal
2020-11-27AWS MediaConvert と hls.js で動画配信サービスを構築しましたこんにちは、第一開発グループの矢野です。ジョブメドレー開発エンジニアとして、主にバックエンドを担当しています。 直近では、ジョブメドレーが先月リリースした 「動画選考」 機能の開発プロジェクトに携わっており、動画ファイルのアップロード／配信環境の設計・実装を行っていました。 今回のブログでは、この「動画選考」機能の開発に利用した AWS Elemental MediaConvert サービスと、hls.js という OSS ライブラリについて紹介したいと思います。 ジョブメドレーの「動画選考」機能はじめに、今回リリースした「動画選考」機能について概要を紹介します。 新型コロナウイルス感染拡大によって、対面での面接に不安を感じたり、公共交通機関の利用が難しくなったりすることにより、満足な転
OpenAPI や Protocol Buffers のおかげで開発がかなり捗っている話 | MEDLEY Developer Portal
2020-08-21OpenAPI や Protocol Buffers のおかげで開発がかなり捗っている話こんにちは、インキュベーション本部エンジニアの加藤です。 主に CLINICS アプリの開発を担当しています。 はじめにCLINICS アプリの開発では OpenAPI や gRPC を利用しています。 OpenAPI と gRPC の間には何の関係もないのですが、どちらも API の仕様をスキーマ言語で記述するという点では共通しています。 今回はこの API スキーマが開発にもたらすメリットについて紹介していこうと思います。 API ドキュメントとしてのスキーマ定義既存のコードに機能を追加する際や修正を加える際に気にすることの多い部分は API の仕様ではないかと思います。 「リクエストやレスポンスはどのようなデータなのか」「この値は必須なのか、任意なのか」「データの型は数値なのか
デザイナーがデザインツールを使わずに、React を使ってデザインした話 | MEDLEY Developer Portal
2020-06-19デザイナーがデザインツールを使わずに、React を使ってデザインした話メドレーのデザイナー酒井です。最近、JobMedleyからCLINICSに異動しました。 自分はデザインはもちろん、HTML/CSS/JS 実装してプルリク送ったりしているちょっとフロントエンド実装領域に軸足が寄ったタイプのデザイナーです。 ここでは以前所属していた JobMedley 事業部の話をさせていただきます。 当時、JobMedley の社内システムのリニューアルプロジェクトにデザイナーとして参加していました。通常、デザイナーがデザインをするときには Skecth や Figma のようなデザインツールを利用するのが一般的かと思います。 弊社でも基本的にはデザインツールでデザインを行うことが多いのですが、プロジェクトによっては、よりリアルなモックアップが必要なため、デザイナー自身がコーディ
クラウド型電子カルテ「CLINICSカルテ」を運用してみた話を聞いてみた | メドレー平木の「気になるあの人に聞いてみた」
みなさんこんにちは、エンジニアの平木です。4月末にリリースした「CLINICSカルテ」も、気づけばリリースから2カ月が経ちました。 以前、ルールや規制が複雑な中でのプロダクト設計についてCLINICSカルテのエンジニア・デザイナーに聞いてみましたが、今回は更に掘り下げて「運用開始してみてどうなのか」「実装はどんな感じだったのか」について前回（以下の記事です）と違うメンバーに聞いてみました。 新プロダクト「CLINICSカルテ」の舞台裏を、エンジニア＆デザイナーに聞いてみた | メドレー平木の「気になるあの人に聞いてみた」 みなさんこんにちは、エンジニアの平木です。4月末にリリースした「 CLINICSカルテ 」について、その裏側についてエンジニアとデザイナーの視点からDeveloper Blogにて紹介しました。 「電子カルテ」というと自分からは遠いものと感じるエンジニア・デザイナーの方も
社内勉強会 TechLunch で"JavaScript AST ことはじめ"という発表をしました | MEDLEY Developer Portal
2018-06-22社内勉強会 TechLunch で"JavaScript AST ことはじめ"という発表をしましたみなさん、こんにちは。開発本部エンジニアの平木です。こちらのブログの投稿自体はほぼ 1 年ぶりになりそうな勢いですが、みなさまお元気でしょうか? 弊社で定期的に開催してる社内勉強会 TechLunch で自分の順番が回ってきたため、どうしようか迷った末にJavaScript AST ことはじめという発表をしたので、そのことについて書いていきます。 なぜ JavaScript AST について話そうと思ったのか現在、弊社のエンジニアメンバーのバックグラウンドで一番多数派なのは「元サーバサイドエンジニア」です。もちろん、業務ではサーバサイド・フロントエンド・ネイティブアプリとバックグラウンドに関わらず、必要に応じて分け隔てなく開発しています。 とはいえ、ちゃんとサービス開発自体
「フロントエンド開発に再入門する」タスクフォースの進め方 | MEDLEY Developer Portal
2017-11-09「フロントエンド開発に再入門する」タスクフォースの進め方こんにちは。開発本部の宍戸です。 メドレーでは定期的に、テーマに沿って組織の技術的な底上げを行うための機会（タスクフォースと呼んでいます）を行っています。そのタスクフォースの１つとして先日、フロントエンド開発力のベースアップを目的としたタスクフォースを行いました。本記事では、その取組みについてご紹介したいと思います。 背景メドレーには現在 20 人弱のエンジニアが在籍しており、その約半数がサーバーサイド出身者です。また普段の開発においては、一つの機能をフロントからサーバーサイドまで一貫して一人が担当するケースが多くあります。サーバーサイド出身者のフロントエンド開発のスキルセットには多少ばらつきはあるものの、普段の開発業務ではレビュー等でそれぞれサポートしつつ開発を行っています。 しかし、フロントエンドの基礎的な部分
JSer.infoの作り方
autoscale: true theme: Plain Jane,5 JSer.infoの作り方 去年のまとめ JavaScript情報ってなんだっけ? 未来に関する悩みが増えた 情報の安定性を見る方法について コミュニティの問題が表面化 1つだけではなく複数の情報から判断しよう はじめに このスライドには再現性がありません JSer.info 特有の考え方が多く含まれます 技術的な内容ではありません 各自、適当に見てね アジェンダ JSer.infoの作り方 記事公開までのワークフロー 継続的にやるために考えること テーマ 何か作る上で次のようなワークフローを辿る 見る(Watch) 調べる(Search) 学ぶ(Learn) 考える(Think) 作る(Create) 共有(Share) 目的 知識を元に行動することで目的を達成する 大体のものごとは同じようなフローを辿る JSer.
io.jsのTechnical Committeeに推薦されました - ぼちぼち日記
1. はじめに 「こんな私がXXXに!?」の宣伝文句ではありませんが、こんな私がio.jsプロジェクトのTechnical Commitee(TC)に推薦されました。 Nominating Shigeki Ohtsu @shigeki to the TC まずは見習いとして数週間オブザーバーとしてTC meetingに参加、その後TCメンバーの投票を経て晴れてTCメンバーです。favや応援メッセージをいただいた方、ありがとうございました。 TC meetingは毎週木曜の早朝朝5時、Googleハングアウトで行います。会議の様子はライブ配信され、youtubeで録画公開されてます。議事録も随時公開されています。https://github.com/iojs/io.js/tree/master/doc/tc-meetings コミュニケーションは当然全部英語。大変です。昨日の早朝に初めて参加
『かんたんパッケージマネージャDuo』
みなさん、こんにちは。Ameba事業本部ゲーム部門の平木(Layzie) と申します。 最近はSteamで安いゲームを漁ってばかりの毎日です。このエンジニアブログでは初めて執筆になります。 さて、今回エンジニアブログで何を書こうか悩んだのですが、悩んだ結果Duoというパッケージマネージャの紹介をしようということになりました。 このDuo、GitHubのStar数は結構多いんですが、(2014/11現在2618Star)あまり紹介されてる記事とかが無いので紹介してみようと思った次第です。 Duoの特徴 昨今、フロントエンドで使えるパッケージマネージャは色々あると思います。厳密に言うとサーバ側のJavaScript実装ですがNode.jsのパッケージマネージャであるnpmにフロントのJavaScriptライブラリを登録して使うというパターンもありますし、新規プロジェクトの雛形を作ってくれるYe
リファクタリングのためのテスト
平均を求める関数 function average(arr) { var result; var sum = 0; for (var i = 0, len = arr.length; i < len; i++) { sum += arr[i]; } result = sum / arr.length; return result; }
A JavaScript survival guide
Are you a programmer who is considering learning JavaScript, but unsure whether it is worth the pain? Then this blog post is for you: I argue that it is worth it and give tips for surviving the language. Why learn JavaScript? # The present # The main reason for choosing JavaScript is the breadth of its ecosystem: the web platform, Node.js, JSON, NoSQL databases, Cordova/PhoneGap, automating Phot
html2canvas - Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
Marionetteからractiveへ - lxyuma BLOG
昨日、天下一クライアントサイドJS MV*フレームワーク武道会で話してきた。 以下、そのスライドです。 今日は 自分が現場で使ってきた FWの変遷の軽ーい話をする 元々 Marionette.js使ってた 振り返ると、実装が冗長になってしまった 何を言ってるか？というと... 例えば ulとliで、その中の要素追加削除やeventを作りたい時 image <ul> <li>1st track click me</li> <li>2nd track click me</li> </ul> <button>new track</button> Marionetteだと... 1.html書いて全体像を作って 2.templateに切り刻んで 3.CompositeView作ってテスト書いて 4.ItemView作ってテスト書いて 5.CompositeViewをnewする処理書いて 6.元のh
Writing Unit Tests for Existing JavaScript
13 Jul 2014 edit My team at Bazaarvoice has been spending a lot of time lately thinking about quality and how we can have greater confidence that our software is working as it should. We've long had functional tests in place that attempt to ask questions like "When a user clicks a button, will The Widget do The Thing?" These tests tell us a fair amount about the state of our product, but we've fou
天下一クライアントサイドJS アウトラインメモ
天下一クライアントサイドJS MV*フレームワーク武道会 - connpass に参加してきたのでメモ。 Chaplin - mizchi Chaplin.jsの話 #ten1club // Speaker Deck 仕事で使ってる Chaplin paulmillr作のBackbone拡張系のMVC Rail風の構成 Chaplinの設計 Rails風のルーター インスタンスの管理するComposer Controllerと強調してインスタンスを管理 差分管理できるので早い 逆にインスタンスを引き継ぐので意識しないと辛い スキャフォールディング paulmillr/scaffolt Generator MV*だとやたらファイルが増える scaffolt はChaplinとは関係なく使える Brunch ウェブアプリに特化したビルドランナー CommonJS風の展開 npmで拡張子に応じた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hammer.JS - Hammer.js
GitHub - iammerrick/Squire.js: Your friendly dependency injector for testing Require.js modules.
ripple.js(とcomponent関連)の話
Add Motion Control to a Kiwi.js Game With the Leap Motion Controller | Envato Tuts+