SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Remixを通じてWebを学ぶ

「Remix」という哲学を学ぼう──学習コストを最小限に抑えるReactベースの注目フレームワークを解説!

Remixを通じてWebを学ぶ 第1回


  • X ポスト
  • このエントリーをはてなブックマークに追加

Webフロントエンド技術の学習コスト

 ここまでに、昨今のWebフロントエンド事情のとある側面をかいつまんで解説しました。

 SSRは、自分でイチから仕組みを構築すると考えると面倒な手法なのですが、SSRを前提としたフレームワーク(Next.jsなど)や、SSRを前提としたホスティングサービス(Vercelなど)も現れ、Webフロントエンドを扱うエンジニアは、さほど苦労することなくSSRの動作環境を構築できるようになっています。

ブラウザとサーバーでは同じJavaScriptでもAPIが違う

 さて、ここで着目したいのは、JavaScriptの学習コストの話です。

 前述したように、近年のWebフロントエンド分野に携わるエンジニアは、Webブラウザで動くJavaScriptも、Node.jsで動くJavaScriptも、どちらも一定のレベルで書けることが求められています。どちらも同じJavaScript言語なので、一見すると学習コストが低いように思えるかもしれません。その感覚は、概ね正しいでしょう。2010年代の過渡期であればともかく、2020年代であれば、文法レベルでの差異はないようなものですから、困ることは少ないはずです。

 しかし、ランタイム、標準ライブラリの違いとなると話は別です。Webブラウザの標準ライブラリであるWeb APIと、Node.jsの標準ライブラリには、大きな差異があります。

 とはいえ、クライアントに必要なAPIとサーバーで必要なAPIでは、目的が違います。目的が違えば標準ライブラリのラインナップが違うのは当たり前のことなので、差異の存在自体は悪いことではありません。必要になったものから順に学習していけばよいのです。

SSRではブラウザとサーバーのコードをどちらも書く

 では何が問題なのかというと、SSRの文脈ではWebブラウザ向けのコードとサーバー向けのコードを、同じ人がどちらも書くことを要求されることが多いのです。特に、SSRに特化したフレームワークを使っている場合、Webブラウザ向けのUI描画のコードのすぐ隣にサーバー向けのコードを書くことになるケースがあります。その関数のスコープの中ではどんな標準ライブラリが使用できるのか、常に脳内をスイッチしながら書き進めることができるのは一定レベルで器用な人です。

 筆者は器用な側の人間ではありますが、だからといって万人に(特に初学者に)この器用さを求めることができるとは思いません。そう思う程度には、難しいことが要求されていると思います。また、熟練者であっても、多少なりとも思考の切り替えにスイッチングコストはかかります。別々の言語間を往復することに比べればコストは格段に少ないものの、ゼロではありません。

 こういった学習コストを抑えることができれば、初学者がWebフロントエンド分野で物作りができるようになるまでの時間はぐっと短縮されるはずです。

[コラム]サーバーサイドJavaScriptの相互運用のための取り組み

 2010年代のサーバーサイドJavaScriptといえば、ほぼNode.jsのことを指していました。しかし、2020年代になって、Node.js以外の選択肢が増えてきています。

  • Deno:Node.jsの作者が新たに作成したTypeScript/JavaScriptランタイム
  • Cloudflare Workers:Cloudflareのエッジコンピューティングのランタイム
  • Bun:Zig言語で記述された高速なランタイムを含む総合ツールキット

 それぞれ、開発元がサーバーサイドJavaScriptにどのような役割を与えたいかによって、少しずつ標準ライブラリのクセが異なっています。ブラウザとサーバーの差異だけでも困っているのに、サーバー同士にも差異があると困ってしまいそうですね。

 こういった課題感はそれぞれの開発元にもあったようで、Node.js、Deno、Cloudflare Workersの相互運用性を確保するためのコミュニティグループが発足しているようです。

 各ランタイムで共通で使えるAPIを確保することで、どのランタイムでも動くライブラリやアプリケーションを作りやすくなっていくことが期待されます。

 基本的には、ブラウザのWeb APIを取り込みつつ可能な限りブラウザと同じ動きをするように実装するようなので、ブラウザとの差異が小さくなることも期待できそうです。ただし、「ブラウザではない」ということも重要な要素なので、まったく同じにはならないという点で、注視していく必要があるでしょう。

 Bunは個人開発から法人化したばかりということもあり、このグループには入っていませんが、今後の成長次第では入ってくるのかもしれないと筆者は勝手に思っています。

次のページ
学習コストを最小限に抑えるために生まれたRemix

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Remixを通じてWebを学ぶ連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16642 2022/11/01 21:02

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング