メドピア開発者ブログスマートフォン用の表示で見るメドピア開発者ブログ集合知により医療を再発明しようと邁進しているヘルステックリーディングカンパニーのエンジニアブログです。エンジニアが、セッションの内容や感想を更新していきます。@p_ck_スライド:speakerdeck.com既存のHighlighterは正規表現を使用している。atomではcson内に正規表現が記載されている。Highlighterの問題コードを読むのが辛い正規表現を読むのが辛い。ハイライトが完璧じゃないeditorによっては、ハイライトが壊れてしまう。https://docs.ruby-lang.org/ja/latest/class/Ripper.htmlRipperを使うと正規表現よりも正確にRubyのコードを解析出来る。https://www.slideshare.net/tagomoris/hijacking-ruby-syntax-in-ruby今の最新バージョンは2.7rubygems単体で2.5,2.6をリリースされることはないのでrubyのアップデートが必要2.7に関しては、メンテナンスがされるのでrubyのアップデートは不要ruby1.8をサポート対象としてたり、bundlerとの兼ね合いがあるのでサポートが結構たいへん。@piotr_murach内容ttyというgemの紹介(by作者)https://github.com/piotrmurach/ttyttyは、対話形式でユーザーとやりとりするCLI(コマンドラインインターフェース)で、簡単にやりとりのロジックを構築できるGemCLIアプリケーションを作るためののライブラリー群https://github.com/piotrmurach/ttyhttp://piotrmurach.github.io/tty/テスト(RSpec)も簡単に作れるtty-progressbar(プログレスバーをCLIで提供)とか、tty-prompt(チェックボックスみたいなの表示できる)とかtty-markdown(マークダウン表示できる)とか色々あるぞプログレスバーやスピナー等のグラフィカルなUIも簡単に実装出来る。簡単に綺麗なCLIのインターフェースを作れそう。機能毎にgemが別れているので、プログレスバーだけ等必要なものだけ使うとかも出来そうだから導入ハードルが低そう。既存の変数を上書きすることも出来る。TracePointRubyの組み込みクラス例外の情報を集めるのが便利とあるが、他にもたくさんの情報を集められる。Bindingが呼び出せるので、任意の行の変数の上書きが出来る!Refinement安全な局所的なメソッドを追加出来る仕組み、安全にモンキーパッチやクラス拡張が行える。13:50〜)ストライプではpureなRubyを使っている型チェックのツールをオープンソース(にする予定)プロジェクトとして作ってる。1コインを15$で売りたい」という人がいた時、「15以上で仮想通貨Aを書いたい」というユーザーがいないと、取引が完結しない。マイナーな仮想通貨間の取引では、なかなか流動性が上がらない。Protocol」(Bancorはバンコールと読む)。これを、なるべく早く正確に計算できるようにしたい。Protocol」をもとに、売買できる仕組みをRubyで作るためのgemを作った。RailsのWebアプリで動かしてみるまで実施した小数点以下の演算とかまだまだざっくりなので、きちんと計算できるようにしてサービス化していきたい感想Rubyでブロックチェーンを活用したアプリは、他の言語に比べて少ないので、どんどん盛り上げていきたい(いってほしい)。@tenderloveRubyによるメモリ使用量の減少。それらをそれぞれ文字列を作りmallocしないで、全体文字列からのポインタ?のようなものだけ持って削減するあなたならこの機能にいくらはらいますか?5000円?10000円?5000兆円?Ruby2.6にアップグレードすれば無料!なんと5年前に同じようなpatchが書かれていた...(patch書くときはissueの調査から!)バイトコードの命令、オブジェクトをパラメータを切り分け、オブジェクトをバイトコードにpushされたときにバイトコードをGCにマークさせる(これをしないと命令とオブジェクトの切り分けが難しい)あなたならこの機能にいくらはらいますか?5000円?10000円?5000兆円?Ruby2.6にアップグレードすれば無料!Ruby2.6にアップグレードしてください!感想メモリ改善、こういった細かいところで知恵がしぼられて行われているんだとしみじみ思った。10:30〜)名前重要。命名にこだわることで開発効率をよくすることを支えている。パフォーマンスカイゼン、重要。プログラミングは物理的な制約がないので概念で構成される名前付けには「振る舞い」、「プロジェクト、コミュニティ」の2パターンがある。Kaminari(会場笑)いろいろなエンジニアが実行速度のカイゼンを続けている。非互換性を生むような進化はコミュニティの停滞に繋がり、言語の繁栄の弊害となるRubyは上記3点を大事にしながら進化し、Rubyistをハッピーにしていく。Rubyistの生産性・幸福度を重視した松本さんの思いを感じたKeynoteでした。今回のテーマはことわざ塞翁が馬、名は体を表す等のことわざを用いてRubyの「いままで」と「これから」をMatzから話がありました。Deadと言われるようになった。՞)☝︎是非読者になってくださいメドピアでは一緒に働く仲間を募集しています。Tumblrこんにちは!4月から参画したエンジニアの森田です。RubyKaigi2018、いよいよ明日からですね!rubykaigi.org※メドピアもGoldSponsorとして、協賛しています。՞)☝︎是非読者になってくださいメドピアでは一緒に働く仲間を募集しています。Tumblrこんにちは。メドピアエンジニアの保立です。メドピアでは、ドクター向けに運営している「MedPeer」のiOSアプリを3月15日にリリース致しました!!!今回は、iOSアプリ開発の過程で、APIの実装にActiveModelSerializersを使ったので、そこで得た知見を書きます。使った理由json形式のレスポンスを返却する場合、jbuilderを使うケースも多いのではないでしょうか。メドピアでも、今まで外部へのAPIにはjbuilderを使用していました。iOSアプリ用のAPIでは、以下のメリットを考慮して、ActiveModelSerializersを使うことにしました。複雑なjsonを返す際に、ActiveModelSerializersの方が、レスポンスが早いスマートフォン用のAPIでは、なるべく少ないリクエストで画面の描画に必要なすべての情報を返却したいため、何重にも入れ子になるjsonを返却することが多いと思います。そのため、viewをレンダリングするjbuilderでは汎用的なオブジェクトはpartial化することが求められますが、partialを呼び出すのに時間がかかってしまいます。ActiveModelSerializersでは、レスポンスの内容を定義するserializerにhas_manyやhas_oneを使って、関連するオブジェクトを指定することができます。これにより、jbuilderよりも素早くレスポンスを返すことができます。DSLな書き方をしなくてよいjbuilderの書き方は、直感的に分かりづらい記法になるケースがあります。@article.bodyendさらに、partialを読んだり、if文などの分岐が入ると、より分かりづらくなります。ActiveModelSerializersでは、Rubyの記法に則って書けるため、分かりやすいコードになります。以上の点から、メドピアのiOSアプリ用APIとして、ActiveModelSerializersを採用しました。使用例ActiveModelSerializerは以下のように使用します。]}並列関係の複数Modelに紐づくAPIを返却したい場合もあります。以下の例は、アプリ起動時など、Masterデータを取得する時のコードです。書いていて、ものすごくつまずくということがなかったです。ActiveRecordの延長のような作りなので、つまずくことなく書くことができました。GitHubのドキュメントが豊富なので、基本的にわからないことがあってもドキュメントをみれば解決しました。コード量はjbuilderより多くなるので、「すぐに実装したい」「複雑なjsonを返す必要がない」場合はjbuilderでもいいと思います。パフォーマンス比較)posts#showアクションにて、postsを1件とhas_many関係のcommentsを20件をレスポンスに設定するケースで比較します。comments.body実行結果は以下のようになります。:bodyend実行結果は以下のようになります。7.9ms)と、いうことで2倍以上の速度でレスポンスを返すことができました。恩恵は計り知れないものがあります。՞)☝︎是非読者になってくださいメドピアでは一緒に働く仲間を募集しています。Tumblrこんにちは。デザイナーの松村です。medpeer.co.jp今回はオフィス移転をきっかけに会社の沿革をイラストに起こしたやり取りが「ザ・メドピアのものづくり」という感じだったので、デザイナー活動記としてブログにしたためてみました。ラフを作ろう広報の藤野女史から、WALLコンセプトの共有を受けラフ案を作成するながれに。MedPeerの転換期には必ず医療に関する事件や法律改正が絡んでいるので、MedPeerのこれまでの歩みとの相関関係を見せたい、というのがコンセプトでした。コンセプト時点では「MedPeerの歴史」がフィーチャーされていたのですが、「医師をサポートし、患者を救う」というMedPeerコンセプトから考えても、いっそMedPeerだけじゃなくてもっと広いレンジにしたほうがハマるのではないか、と考えて作ったのがこちらのラフ案。いかがですかこのやる気を引き出してくれる誉め殺しコミュニケーション。いいもの作って期待に答えるしかない!!て感じですよね。〜ちなみにメドベアとは、MedPeer内で連載中の4コマ漫画です。〜医師の声を取り入れようラフ案のプレビューで、代表医師の石見先生に「上医は国を医し、中医は人を医し、下医は病を医す」という言葉に影響を受けたのでそれを入れたい、というフィードバックを受けました。Life」で募集してもらいました。しながら投稿を待ちわびる我々。おかげさまで、最終的には70以上の案をお出し頂きました。これには石見代表も感激。この場をお借りして会員医師の皆様へ会員医師の皆様、本当にご協力ありがとうございました。頂いた名言はほぼ全て今回のデザインに取り入れております。機会がありましたら、是非MedPeer新オフィスに足をお運びいただければ幸いです。完成!よーしいよいよ入稿だ〜!と思ったら大きな罠が。アイレベル設定を完全に失念していました。こんな時にもワハハノリで流してくれるので変にストレスを溜めずに修正することができます。いうわけで最終的に調整して完成!対面には石見セレクションの医学書が。こんな感じで弊社では、部署や役職の垣根なく意見を交換してものづくりを行なっています。(今回のように社内外の医師にご意見を頂き、一緒に作り上げることもしばしばあります。webサイトやイベントのデザインも「医師の体温」が伝わるデザインに、と調整を行なっています。MedPeerのサイトコンセプトはズバリ「臨床の役に立つ」サイト。今年からはそれに加えて、臨床知識を得られながらも、患者さんに向き合うための英気を養える、医師にとって居心地の良い場の再構築を目指しております。「自分ならこういうことで実現するかなあ」と思った皆さま。一度、お話をお聞かせください。MedPeerでは共に働く仲間を募集しています。おまけ今回は自動販売機もラッピングできるということで、欲望溢れるデザインにしてみました。Patioはイベントスペースとしても貸し出しております。勉強会などの会場でお困りの方はお気軽にお声かけください。Tumblrこんにちは。メドピアCTOの福村です。RubyKaigi2018@仙台が横浜開港祭と被っていて家族との調整で頭を抱えている今日このごろです。開発合宿の計画も進めており今年も(すでに4月ですが)熱い1年になりそうです。メドピアグループ(メドピア、フィッツプラス、Mediplat)は、2月26日から拠点を銀座に移し1フロアでグループシナジーを生みながら事業に邁進しております。ITや医療系の勉強会に積極的にこのスペースを提供していこうという運びになりました。営利を目的とした勉強会については、お断りをさせていただくことがございます勉強会開催します!JapanTaxiさんと4/25(水)にRubyをテーマに勉強会を実施します!Ruby/Rails開発全般で面白いテーマが揃っていると思います。新オフィスに遊びに来てください。移転して1ヶ月くらいですがいろいろなIT系の勉強会を開催しております!savanna.connpass.comginzarb.doorkeeper.jpmedpeer.connpass.commedpeer.connpass.com銀座付近で勉強会したいなぁと思った際はぜひともお気軽にお声がけください。追記(2018/11/27)設備に「マイク」と「電源タップ」を追加しました。՞)☝︎是非読者になってくださいメドピアでは一緒に働く仲間を募集しています。Tumblrこんにちは。メドピアにWebエンジニアで入社して約6ヶ月の佐藤です。メドピアは2/26から銀座に移転しました。移転後はなぜか空気清浄機が増えて助かっています。SNSの複数ユーザーに一度に通知を送る「トピック」を使ってRailsでPush通知を実装した際の処理フローを主に書いてあります。SNSのプッシュ通知のみを実装した場合はわりとシンプルですが、トピック購読(subscribe)トピック購読の解除(unsubscribe)等のトピック関連の処理が加わってくると状態管理が複雑になってきます。SNSやAWS上での用語も理解する必要があるため、その説明も簡単に入れました。SNSを使ってpush通知(とトピック機能)を実装する上で何かしら参考になれば幸いです。ブログ内のサンプルコードは下記のリポジトリに格納してあります。リポジトリ内の他ファイルにはそこも含めたものが上げてあります。SNSのモバイルプッシュ通知いろいろなデバイス(プラットフォーム)に、送信側はそれほど処理を変えずに簡単にプッシュ通知できるサービスです。他にもこんな特徴があります。SNSのトピックトピックは、日本語訳で「話題」や「論題」です。ユーザーはそのトピックを購読(subscribe)する事でそのトピックへの通知を受け取ることが出来るようになります。複数ユーザー(アプリ)を紐付けでおけば、APIの利用側はそのトピックに対して送った通知メッセージが複数ユーザーに届くようになります。大量ユーザーへのPush通知も、トピックに紐付ければ1回の送信で行えるという事です。今回実装したアプリの、ユーザーから見たトピックの選択イメージはこんな感じです。複数プラットフォーム(iOS+Android)でプッシュ通知を受け取れるログアウト時にはpush通知が来ないようになるトピックごとに通知のON/OFFができるアプリ側の設定画面の雰囲気です。マネジメントコンソールで事前に下記の作業を行います。マネジメントコンソールでの作業を前提とします。アプリケーション作成プラットフォームと対になるものです。iOS、Android分であれば計2つを作成します。(Androidは試していませんが、GCMアクセスキーが必要となるはずです)下記はiOSのアプリケーション作成画面です。アプリケーション名iOSの場合はDevelopmentまたはProductionの選択p12ファイルパスワードを入力です。(証明書はp12ファイルから勝手に入力されます)これで、アプリケーションの「ARN」である、「application_arn」が生成されます。Name)は、AWS上に何かリソースを作成した時に与えられる名前です。APIでそのリソースを指定する時などに使います。トピック作成トピックA、トピックBであれば計2つです。Androidの2つのアプリケーションがある場合でも、通知単位を分けないのであればトピックは同じ物を利用します。(逆に、iOSとAndroidで通知単位を分けたければ別に作ります)これで、トピックの「ARN」である、「topic_arn」が生成されます。(APIでの送信時に必要)Rails側のモデルのイメージ今回の実装例に出てくるモデル(DB)については、下記のようなイメージです。topic_1_...などtopicごとにカラムを持っていますが、topicごとにレコードを持つ形なども良いと思います。実際にはプッシュ通知のメッセージを格納しているモデルなどもいろいろあるのですが、説明用に省きます(実際のものはリポジトリをご覧下さい)user_push_notification_settingsアプリ(ユーザー)の通知許可フラグを持つテーブルです。ユーザーに対して1レコード持つ形です。iOS側で反映したらAndroid側も同じ設定となります。Name)を保存するテーブル。ユーザーに対し、アプリを利用するプラットフォーム分のレコードを持ちます。下記の属性を持つイメージです。SNSのモバイルPushとトピック通知を使うためにRails側の実装部分です。SNSのエンドポイントに紐付けるそのエンドポイントをトピックに紐付けるまた、不要になったらエンドポイントやトピックとの紐付けを削除するという処理です。下記リクエスト時の処理が必要になります。アプリからtokenを取得まずはアプリからtokenを取得し、Railsサーバーにリクエストします。SNS側にendpointを作成します。「endpoint_arn」がレスポンスに含まれます。endpoint_arnはpush通知やトピックの紐付け(subscribe)を実行する時に必要になるのでDB等に保存します。SNSのsubscribeを実行2.で取得したendpoint_arnに、トピックの紐付け(subscribe)を行います。subscribeのレスポンスには、「subscription_arn」が含まれます。これは、トピックへの送信時には必要ありませんがunsubscribe時に必要になるのでDB等に保存します。一度に複数トピックをsubscribeするAPIは無いため、トピック分subscribeを行う必要があります。set_endpoint_attributesを実行します。下記のパラメータを更新します。Tokenアプリから送信された最新のtokenに上書き保存します。Enabled送信可否状態です。trueまたはfalseです。endpoint作成時の初期値はtrueですが、アプリへのPush通知が失敗すると自動的にfalseに更新されます。アプリがPush受信可能な状態だと信じてtrueを設定します(アプリから送信された最新のtokenなので)。endトークンの破棄(ログアウト等)時1.アプリからtoken削除リクエストを送信アプリからのログアウト時など、Railsサーバーに削除リクエストを送信します。SNS上のendpointを削除します。DB上に保存されたendpoint_arnも同時に削除します。実行delete_endpointでendpointを削除しても、自動でそれに関連付けされたsubscription_arnも削除されるわけではありません(自動でやってほしい...)なので、subscribeをしていた場合には、unsubscribeをしておく必要があります。ドキュメントにも注意書きがあります。topicDB上に保存されたsubscription_arnも同時に削除します。実装を一部抜粋してコメントを追記したものです。トークンの更新時とコードと同じです。delete_endpointが追加されています。endトピックの購読ON/OFF切り替え時トピック購読の切り替えはかなり単純です。購読状態を見て、subscribeまたはunsubscribeするだけです。1.アプリからトピックの選択状態を送信トピックごとにtrue/falseなど、subscribeまたはunsubscribeするための状態を送信します。SNSのsubscribeまたはunsubscribeを実行します。DB上に保存されたsubscription_arnにも同時に反映します。APIの実行や具体的な処理の詳細はリポジトリをご覧ください)※トークンの更新時に行うコードと同じものです。外部APIが絡むテストを実行する場合、スタブやモックなどが必要になる事も多いですが、aws_sdkには標準でスタブに関する機能があります。これを使う事で、テストの実装もかなり楽になりました。https://docs.aws.amazon.com/sdkforruby/api/Aws/ClientStubs.html例えば、RSpecでのテスト実行時は全ての処理をスタブとするのであれば、spec/rails_helper.rb等に下記のように記述します。trueendaws_sdkでテスト時のレスポンスなどを任意のものにするまた、テスト時に場合によってはレスポンス内容を変えたくなったりする事もあると思います。その場合は、下記のように一部のレスポンスを指定する事ができます。aws_sdkのcreate_platform_endpointを実行した時にendpoint_arnが「new_endpoint_arn」としてレスポンスされるようにしたものです。sns_responseまとめ実装面やその他ふくめて、良かった所/つらかった所です。大量配信の負荷をあまり気にしなくて良いトピック機能を使った場合は、大量配信時にもAPIを使う側は1件送信するだけ。SNS側のアプリケーションの設定やトピックの設定も、シンプルで設定しやすく特に迷うこともありませんでした。SNSのpush通知送信API(publish)は、1つのエンドポイントARN、もしくはトピックARNを対象するため、トピックに紐付かない複数のエンドポイントへの送信ができないようです。送信数分ループ処理をする事になりますが、送信数によってはサーバー負荷となってしまいそうです。SNSで同じく実装した時に整理したことなどを纏めてみました。これからPush通知の運用する中で、新たに問題点や改善点も出てきそうですが何かしらの形で共有できればと思います。՞)☝︎是非読者になってくださいメドピアでは一緒に働く仲間を募集しています。Tumblrもう新年を迎えて2ヶ月が経ちますね。本日はその懺悔も込めてVue.jsとRailsの話をお送りします。以前ブログで書いた通り、現在Webpackerへの移行を機にフロントエンド周りの改善を進めています。その中でVue.jsとRailsをいい感じに組み合わせるにはどうしたら良いかについて悩むことがあったので、本記事にて共有させていただきます。悩んだ内容としては以下になります。今回の記事ではサンプルコードを多く載せています。主なもののバージョンは以下になります。2.0.0-rc.41.Ajax通信時にCSRFトークンをどう設定すればいいか?RailsではAjax通信時、破壊的なHTTPメソッド(POSTとかDELETEとか)を送る場合はCSRFトークンの検証が必要となります。jquery-railsのGemで上記のようなAjax通信を行う場合は、Gemの方でCSRFトークンをリクエストヘッダーに自動的に含めてくれるのですが、jQuery以外だとそうはいきません。自身でCSRFトークンをリクエストヘッダーに含める必要があります。私自身どうしたらいい感じに実装できるか悩んだため、ここで悩んだ末にたどり着いた実装をご紹介します。今回のケースではHTTPクライアントとしてaxiosを使用します。リクエストヘッダーにCSRFトークンを仕込んでみる通常、Railsが提供しているフォームヘルパーを利用せずにAjax通信を行う場合は明示的にCSRFトークンを設定する必要があります。設定しない場合まずはAjaxを送る部分のソースを見てみます。上記のようにCSRFトークンを設定しない状態だと...このようなエラーが起こるので、ちゃんと通るようにしてみましょう。今度はCSRFトークンを設定する場合です。上記の10行目でCSRFトークンの取得、11行目でリクエストヘッダーにトークンを設定しています。今回は上手く処理されました。この方法はViewのDOM内のCSRFトークンを直接取得し、axiosに設定する方法です。実はこれと同じ方法を提供してくれるパッケージがあります。次はそのパッケージ、「rails-ujs」を用いた方法を見てみましょう。rails-ujsを使ってみるまずはrails-ujsをインストールします。rails-ujs次にrails-ujsからcsrfTokenを取得するメソッドをimportし、CSRFトークンを設定してみましょう。これで先ほどの例のように破壊的なリクエストを送ることができるようになります。Vue.jsのPluginにしてみるここまででCSRFトークンを設定するところまでみてきました。上記の例だと、1つのエントリーファイルに1つのコンポーネントしかありませんでしたが、実際には複数のコンポーネントを使用することが多いと思います。その場合、上記の例だとaxiosで破壊的なHTTPメソッドを使用する全てのコンポーネントに...axiosをimportrails-ujsをimportリクエストヘッダーにCSRFトークンを設定しなければなりません。そこで、Vue.jsのプラグインを作成し上記の処理を一纏めにしてしまいましょう。Vue.jsのPluginを実装します。Pluginを実装することにより、Vueオブジェクトからaxiosを呼び出せるようにしてみましょう。app/javascript/plugins/vue-axios.js次はエントリーファイルにて上記で作成したPluginをVueに組み込みます。app/javascript/packs/chapter1/index.js最後にコンポーネントでVue経由でaxiosを呼び出してみましょう。app/javascript/components/chapter1/App.vueこれで各々のコンポーネントで設定しなくていいようになりました。以上のようにCSRFトークンの設定からコンポーネント内でのaxiosの呼び出しについて、メドピア内でどうしているかをみていきました。皆さんはVue.jsとRailsを組み合わせる時、どのようにしているでしょうか?2.単一ファイルコンポーネントで書くHTMLをもっと効率よく書けないか?RailsのViewは独自のテンプレートエンジンを用いることで、効率的にHTMLコーディングをすることが可能になります。ほとんどの人はHamlやSlimといったテンプレートエンジンを使って効率化しているのではないでしょうか?Vue.jsの単一ファイルコンポーネントのデフォルトのテンプレートは通常のHTMLです。RailsはHamlやSlimを使用しているのに、単一ファイルコンポーネントはHTMLって非効率です。JSのテンプレートエンジンといえば、Vue.jsに組み込まれているMustachやEJSが有名ですが、今回の目的はHTMLの効率的なコーディングです。HTMLの省略記法に対応しているのはそれほど多くなく、調べてみた結果「Pug」の一強のようです(もし他に有名なやつがあればこっそり教えてください)。そこで、メドピアではPugを採用することにしました。PugとはHamlに影響を受けたテンプレートエンジンです。Jadeという名前でしたが、すでにJadeが商標登録?されていたためPugにしたらしいです。・JSの実行という特徴があります。それでは次にPugを使って単一ファイルコンポーネントを書くとどのようになるのかを見ていきましょう。Pugを使用しない場合と言いつつも、Pugを使用した場合と使用しない場合のbefore/afterが見れた方が良いので、まずはpugを使用しない場合の単一ファイルコンポーネントを見てみます。今回の例ではみんな大好きTodoリストです。次はPugを使用する例を見ていきます。Pugを使用する場合まずはPugのパッケージと、WebpackでPugをコンパイルするためのpug-loaderをインストールします。pug-loader後は単一ファイルコンポーネントのtemplateタグにlang="pug"とpugの設定をするだけです。Webpackerの場合はコンフィグファイルに設定を追記する必要はありません。なるかというと...app/javascript/components/chapter2/PugTodoApp.vueこのようにかなりスッキリさせることができました。みなさんも是非pugを使って見てください!3.単一ファイルコンポーネントとフォームヘルパーの兼ね合いVue.jsの単一ファイルコンポーネントはとても便利です。以前技術ブログでも書きましたが、単一ファイルコンポーネントは以下のようにとても便利です。テンプレート内でES6以降のものが使用できるしかし残念なことに、単一ファイルコンポーネントではRailsのフォームヘルパーを使うことができません。いって本来フォームヘルパーで生成されるはずのHTMLを単一ファイルコンポーネント内のテンプレートに直書きするのも効率が悪いです。比較そこで、単一ファイルコンポーネントでテンプレートを書くかRailsのViewでテンプレートを書くか比較してみることにしました。今度はユーザーの新規作成画面を例にしてみます。単一ファイルコンポーネント内にテンプレートを書く場合app/javascript/components/chapter3/UserRegisterForm.vue全体としてこのような感じになりました。このテンプレートを作ってみて面倒だったのはformタグとhidden要素です。フォームヘルパーならform_forやform_withで一行で作成できる部分をわざわざ手打ちしてHTMLを書かなければなりません。hiddenのinputタグのauthenticity_tokenのvalueですが、フォームヘルパーなら自動的にCSRFトークンが設定されるところ、わざわざ自身で設定しなければなりません。結果、テンプレートを作成するのにそこそこ手間がかかってしまいました。今度はフォームヘルパーを活用する場合です。全体としてはこんな感じになります。app/views/chapter3/new.html.erb先ほどのformタグとhiddenの件はフォームヘルパーのおかげでかなり楽になりました。他にもtext_fieldやlabelなどのヘルパーのおかげで、全体的にコード量が減っているのが見て取れます。デメリットもあります。Vue.js部分がシンタックスハイライトが効かないため若干見にくいpolyfillが効かないテンプレートとコードが離れるデメリットこそありますが、メドピア内ではフォームヘルパーを使う時は基本的に単一ファイルコンポーネントを使わず、RailsのViewにテンプレートを書く方法にしています。まとめ今回の記事ではメドピア内でRailsとVue.jsを組み合わせる時に悩んだ3つのことと、その対応策を書いてみました。使用したサンプルコードは以下のリポジトリに置いてあります。medpeer-inc/medpeer-dev-blog2正直これがベストなソリューションであるという確信はありません。「もっといい方法があるよ」というアイデアがある方は是非メドピアに遊びに来てそれをご教授ください。「俺がもっといけてるコードにしてやるぜ!」という方は一緒に働きましょう!またメドピアでは毎週火曜日にVue.jsのもくもく会を実施しています。՞)☝︎是非読者になってくださいメドピアでは一緒に働く仲間を募集しています。月別アーカイブリンク医師専用サイト「MedPeer」エンジニア採用はこちら!スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。