Frontend の記事一覧

Remixを使い始めた話

こんにちは、23卒の新卒エンジニアのfujinoです。今回は弊社のサービスでReactのフレームワークであるRemixを使い始めた話をしようと思います。

背景

弊社では今までVue.jsのフレームワークであるNuxt.jsを用いてフロントエンドを実装していました。 これは、採用当時は生のhtmlが使えるのが良いと思っていたことや、Vue.jsの経験のあるフロントエンジニアがチームにいたことが理由でした。

しかし、最近ではTypescriptとの親和性や、コミュニティの大きさなどの理由からReactの方が勢いがあるように感じます。 弊社でも少し前からReactに移行することを決定し、現在進行形でNuxt.jsからReactへの移行プロジェクトを進めています。

Reactの主要なフレームワークとして、Next.jsとRemixが挙げられます。 両者の違いとして、Next.jsはSSG(Static Site Generation)やSSR(Server Side Rendering)をサポートしているのに対して、Remixは基本的にSSRのみをサポートしています1 今回私が参加したプロジェクトではSSGが不要な案件だったため、Remixの方が使わない機能が少なくとっつきやすいと感じました。 そこで、このプロジェクトではRemixを採用することにしました。

このように社内のRemixへの移行実績が増えてきたので今回は改めて振り返ってみようと思います。

Cloudflare WorkersからTinyGoでビルドしたWabAssemblyバイナリを呼び出す

こんにちは、マネーフォワード ケッサイのテックリードをやっておりますgarsueです。

最近、CDNのエッジで動くサーバレス環境が充実してきましたね。

代表的なものとしてはCloudflare WorkersやfastlyのCompute@Edgeなどがあります。CloudflareではKey-Valueストアもあり、S3やGCSのようなオブジェクトストレージまで揃いつつあるようです。

そんな流れに乗って、Cloudflare Workersを使ってGoで実装した計算ロジックをエッジで動かせるか検証してみました。今回はその結果をレポートします。

TL;DR

  • アップロードサイズ制限があるのでTinyGo使って小さいwasmバイナリを作る
  • wrangler.tomlで type = "CompiledWasm"のモジュールとしてwasmバイナリをアップロードする
  • wasmのエントリポイント内でJavaScriptの名前空間にJavaScriptの関数としてセットする

本番環境のCloud Firestoreにデータパッチを当てる

こんにちは、マネーフォワードケッサイでフロントエンドなエンジニアをしている@miki_tです。

社内向けサービスなど一部のサービスで、バックエンド開発を簡素化できる場合にFirebaseを技術選択しています。 ちょうどこのblogも、Firebase hostingで公開しています。

今日は、Firestoreのデータパッチについてちょうどいい仕組みが欲しく、考えてみたので書いてみようと思います。

NestJSでBFFをつくった話

MF KESSAIでバックエンドのエンジニアをやっているgarsueです。 先日当社のnoteのインタビュー企画NestJSを使ったBackend For Frontend(以下BFF)について「ブログお待ちしてます!」と言われてしまったので、重い腰を上げて書くことにしました。

当社ではNestJSをGraphQLをしゃべるBFFとして使っているので、そのあたりの勘所や知見を少し紹介します。

なぜBFFとしてNestJSを採用したか

まず、フロントエンドのフレームワークはNuxtJSで決まっていました。当社での2年以上の実績もあり、もはや定番となっています。 また、NuxtJSと合わせてGraphQLを使うのも定番となっており、今回もGraphQLを使うことが決まっていました。

NuxtJSから呼び出すBFFは今までGoでgqlgenを使ったGraphQLサーバーとして実装していました。 これはこれで悪くないのですが、やりたいことはバックエンドのサービス群を呼び出してフロントエンドの都合のいい形に加工して返すことぐらいなので、もっと軽く開発できる何かにしたいなとも思っていました。

そこで高い抽象度で記述量も少なく抑えられ、フロントエンドエンジニアも触りやすいTypeScript製のフレームワークであるNestJSを採用しました。 GraphQLもサポートされていて、NestJS自体がマイクロサービスアーキテクチャを前提にしてるフレームワークでもあり、今回の要件にマッチしていました。

フロントエンドエンジニアの働き方 〜with デザイナー編〜

人事の井上(@inoueray)です。テックなブログに失礼します。CTOの篠原が「フロントエンドの方と面談や面接をした際に『デザイナーとどのように関わっているのか?』という質問をよく貰う。」とぼそっと話していたので、本日はフロントエンドエンジニアとデザイナーに、お互いの関わり方について話をしてもらってきました。