【海外イベント紹介】Developing Fast at Scale: How to Maximize the Netlify Workflow

Netlify Functions

最初のスピーカーが紹介したのはNetlify Functionsです。

 

開発中のサイトで呼び出したいAPIは多岐に渡ります。

それぞれのAPIがバラバラに管理されていると、以下のような問題に直面します。

 

生産性を損なう

今集中していることから考えが逸れると、元の生産性を取り戻すのに平均して23分を要します。
APIの設定や仕様について思いが向くと、本来成し遂げようとしていた機能についての考えが妨げられ、生産性を損ないます。

 

モニタリングが後回しになる

正しく動いているかどうかをチェックすることは大切ですが、動作そのものではないために後回しにされがちです。面倒になってそのままにされることも少なくありません。

 

DevOpsチームへの依存

バックエンドやDevOpsチームにFunctionを用意してもらうのに時間がかかると、それがボトルネックになります。

 

テストが複雑になる

ローカル環境で開発しても、APIをテストするために別の環境を整備する必要があり、立ち上げにかかる時間を待たなくてはなりません。

 

では、Netlify Functionsを使用すると、どのようなアドバンテージがあるのでしょうか。

 

一貫したワークフロー

開発チームは、1つのリポジトリから、ビルド、プレビュー、デプロイまで同じフローで行います。

 

モニタリングとログ管理

ログはNetlify UIで監視でき、使用量やイシューを一括管理することができます。

 

DevOpsやインフラ整備からの解放

バックエンドやインフラはNetlifyが代行します。

 

ローカル環境のサポート

ローカル環境からでもAPIにリクエストを投げてテストすることができます。

 

Netlify Functionsの種類

 

Netlify Functions

AWSでいうところのラムダ

 

Background Functions

非同期のラムダ

 

Event Functions

デプロイに失敗したときにSlackやメールで通知するなど、プラットフォームで発生するイベントをキャッチするもの

 

On-Demand Builders

オンデマンドでビルドするもの
例えば、ユーザーがページを閲覧しようとしたときにWebページを生成するなど

 

Scheduled Functions

時間指定するもの

Netlify Graph

次のスピーカーが紹介したのはNetlify Graph。

今年2月に発表されたばかりの、GraphQLを生成する仕組みです。

 

GraphQLとは、簡単に言うと、データ呼び出しの無駄を少なくするために使われる形式の一つです。

 

そもそも、Jamstackで多くのことを成し遂げることができるのは、APIが充実しているためです。

例えば、APIを呼び出すことで、SMSでのメッセージ送信、支払い、認証などの各種サービスを自由に組み合わせることができます。

 

しかし、１つのAPIを使いこなせるようになるまでには多くのステップが必要です。別のAPIを使おうとすると、同じ数だけのステップを踏まなくてはなりません。

さらに、苦労して使い方を習得したとしても、大規模開発においてチームメンバーにそのノウハウを伝えることは容易ではありません。

 

そこでNetlifyでは、それら複雑なAPIを使用できるようになるまでのオーバーヘッドを解決したいと考えました。

そして、これらのAPIは突き詰めていくと、以下の3つの機能に集約できるという結論に至りました。

 

データ

データの読み書きなど

 

アクション

メールの送信、支払いの実行など

 

通知

データの更新完了、支払い完了など

 

各種APIをこれら3つのユースケースに当てはめ、GraphQLとして使えるようにしたのがNetlify Graphです。

 

 

・デモ：Salesforce API

 

SalesforceのAPIからどのようにデータを取得するか、デモが実演されました。

 

Saleforceは多機能で非常に複雑なAPIを提供しているため、実際に使用できるように理解するまでに、通常であれば数日～数ヶ月かかる場合もあります。

しかし、Netlify Graphで上記のユースケースに当てはめたデータを簡単に取得できるため、わずか数分しかかかりませんでした。

 

開発環境とも統合されています。

Netlifyの仕組みを使用し、指定したGraphQLからデータを取得するコードが自動的に生成されます。

生成されたGraphQLのデータ構造の自動補完もされるので、子ノードの名前を一々調べなくて済みます。

Netlify Deploy Preview

最後のスピーカーは、開発現場での非効率なやり取りを改善する方法について語りました。

 

プロダクトを完成させるためには、技術に明るくないメンバーからのフィードバックも必要です。

しかし、以下のような問題が必ず発生します。

 

遅れ

修正が困難になる開発後期になってから、既知のフィードバックが寄せられる

 

方法のばらつき

メール、Slack、電話など、フィードバックが寄せられる形式がバラバラ

 

情報の欠如

ブラウザの情報、スクリーンショットなど、あれば無駄な時間を取らなくて済む情報が足りない

 

これらの問題を解決してくれるのが、Deploy Previewsの機能です。

 

Netlifyでは、デプロイのプレビュー画面にツールバーがついた機能を提供します。

録画したりスクリーンショットを撮ったりして、それらにコメントを自由に書き込むことができます。ブラウザの情報も自動的に収集し記録します。

 

うれしいことに、この機能は、無料で何人でも招待することができます。

まとめ

Jamstackに理想を抱いてスタートする開発者がつまずくペインポイントを潰していく精度の高さ。率直に「すごい！」という感想です。

 

どの機能も開発者が抱える問題に真正面から取り組んでおり、開発者目線で使いたいと思うものばかりでした。

 

「Jamstackをかじってみた。けど、やっぱり面倒だ…」と辞めていってしまう開発者たち。

業界をリードするNetlifyが、そんな開発者たちのペインポイントを潰していくことで、Jamstackが魅力ある開発手法として主流になっていくのかもしれません。

 

最後まで読んでくださり、ありがとうございました。

 

株式会社ヒューマンサイエンスは、他社にはない、「ドキュメント制作のノウハウ」×「最新のWeb開発技術（Jamstack）」を用いて、Webコンテンツとプラットフォームのソリューションをご提供します。

関心がある方は、ぜひこちらまでお問い合わせください！

 

株式会社ヒューマンサイエンス

https://www.science.co.jp/document/jamstack.html

 

本文書の出典元：https://www.youtube.com/watch?v=Zr9wY2OcSSI