Next.js
個人開発
TypeScript
どうも、@ryusei__46です。
今回は、クロスプラットフォーム対応のアプリなりソフトウェアなりをTypeScriptで個人開発していく現実的な方法について私の私的な考えを書き綴っていきたいと思います。
クロスプラットフォーム対応となると、一気に学習量が膨大になり、どこから手を付けて良いか分からなくなりがちですが、ある程度必要な技術スタックがイメージできれば効率的に学習を進めていくことができると思います。
それに、使用する言語は主にTypeScriptになるので、プログラミング言語の学習コストはぐっと現象すると思います。現在急速にシェアを伸ばしている言語でもありますね。
また、最近では技術の進歩がすさまじく、その気になれば個人開発でも企業が開発するレベルのアプリやソフトウェアが開発できてしまいます。というのも、洗練された高機能なライブラリーやフレームワークが次々とリリースされ、開発者はそれらを駆使してより短時間・低労力で開発を進められるからですね。
この記事では、そういったライブラリーやフレームワークを中心に取り上げ、それらの技術スタックを使って個人開発を進めていく方法を解説します。
ここでいうフルスタック・クロスプラットフォーム開発というのは、PC（デスクトップ）・モバイル（Android・IOS）・Webのことです。
はじめに
技術スタックは、Web（バックエンド・サーバー全般）・デスクトップ・モバイルの順番で紹介していきます。
今回は、TypeScriptでクロスプラットフォーム対応のアプリを開発できる技術スタックを紹介しますが、当然TypeScriptだけでは対応できない部分も場合によっては生じます。
TypeScriptで対応できない部分というのは、それぞれのOS固有の機能を使用したい場合などですね。そういった場合は、WindowsやMacなら「C++」や「Rust」、Androidなら「Java」や「Kotlin」、IOSなら「Swift」や「Objective-C」といった言語で書く必要があります。最終的には、OSごとの言語でコンパイルしたプログラムをTypeScript側で呼び出せるようにネイティブ拡張作成します。
TypeScriptは、JavaScriptのスーパーセットなので、主にフロントエンドでのUI作成やNode.jsなどでのバックエンド開発には対応できますが、OSのシステムを開発できる言語ではないです。
ただ、フレームワークの固有の機能としてOSレベルのAPIをTypeScriptで一部操作できるようになっているものもあります。
TypeScriptとは
TypeScriptはJavaScriptに型を加えたプログラミング言語です。Microsoftが開発し、大規模なアプリケーション開発を容易にするために作られました。TypeはJavaScriptのスーパーセットであり、実際に実行する際はJavaScriptへコンパイルする必要があります。
TypeScriptの主な特徴は以下の通りです。
- 静的型付け: 変数や関数の引数、オブジェクトのプロパティーなどに具体的な型を定義できます。これにより、コンパイル時に型の不一致によるエラーを検出しやすくなり、安全なコードを書くことができます。
- クラスベースのオブジェクト指向: JavaScriptのスクリプトタイプベースのオブジェクト指向に加え、より堅牢なクラスベースのオブジェクト指向をサポートしています。
- エディタのサポート: Visual Studio Codeなどのエディターでは、TypeScriptのコードを書く際にリアルタイムでのエラーチェックや自動補完が提供され、開発効率が向上します。
TypeScriptはコンパイルするとJavaScriptに変換され、ブラウザやNode.jsなど、JavaScriptが動作する全ての環境で実行可能です。開発者はTypeScriptを使ってより堅牢でメンテナンスしやすいコードを書くことができ、大規模プロジェクトやチームでの開発に適しています。
Web／バックエンド／フロントエンド
私が最近愛用しているフレームワークで、これ一択です。
Next.js
Next.jsはReactのフレームワークで、サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、クライアントサイドレンダリング（CSR）、インクリメンタル静的再生成（ISR）を組み合わせて使用できるように設計されています。これにより、より高速なページロードとSEOの最適化が可能になります。
また、APIサーバーとしての機能も搭載されていて、APIでの情報取得や認証などの処理も柔軟に実装できます。
このフレームワークがあれば、サーバー周りのインフラは事足りると思います。
Next.js by Vercel is the full-stack React framework for the web.
捕捉ですが、Next.jsをオンプレミス環境にデプロイする方法を解説した記事も書いています。
Next.jsで開発したWebアプリ・WebサービスをVPSや自前のサーバーなど、オンプレミス環境にデプロイする方法を解説します。Vercelを使わないので手間は増えますが、その分コスト削減と自由度が向上します。
Payload：ヘッドレスCMS
Payloadは、TypeScriptとReactで構築されたオープンソースのヘッドレスCMSおよびアプリケーションフレームワークで、Next.jsとネイティブに統合が可能です。開発者向けに設計されており、データモデル定義からAPI生成、管理パネルのUIまでを提供し、フルスクラッチでブログや会員システム、ECサイトなどの構築が可能です。拡張性が高く、認証やメディア管理などの機能が標準搭載され、既存のNext.jsアプリに簡単に統合できます。
- Payload CMSはセルフホステッドかつオープンソースで、自社サーバー上でデータを完全にコントロールできる
- TypeScript完全対応により、型安全性が高くエディタのオートコンプリートを活用できる
- REST APIとGraphQL APIを同時に提供し、用途に応じて柔軟にデータ取得方法を選択できます。
- Reactベースの管理画面（Admin UI）は直感的な操作とカスタムフィールド追加に対応している
- テキスト、コード（Monaco Editor）、リッチテキスト（Lexical Editor）、画像、リレーション、カスタムブロックなど多彩なフィールドタイプを備え、独自フィールドの実装も可能
- ロールベースのアクセス制御（RBAC）により、ユーザーごとに操作可能なコレクションやフィールドを細かく設定できる
- メディア管理機能が内蔵されており、画像や動画、その他ファイルの管理が容易
- 標準機能として国際化（i18n）に対応し、多言語サイトの構築が容易に行える（フロント部分の言語切り替えには「next-intl」などの多言語化パッケージを使用する必要がある）。
- データベースには、MongoDB、PostgreSQL、SQLiteが現時点で対応している
- プラグインを導入して、様々な機能拡張が可能
最近当サイトはPayloadに移行しました。バックエンドの面倒なロジックを自分でコーディングする必要がなくなったのでとても楽になりました。TypeScriptでモデルのようなものを設定していくだけで、データの管理を全部やってくれるので、フロント部分の開発に注力することができます。
Built with TypeScript and React, Payload is an open-source headless CMS and application framework. Build anything.
React
React.jsはユーザーインターフェイスを構築するためのJavaScriptライブラリです。（クライアントサイドレンダリング・CSR）Facebookがメンテナンスを行っており、大規模なアプリケーションでもデータが変更された場合に効率的にビューを更新できるように設計されています。
主な特徴は以下の通りです。
- コンポーネントベース: アプリケーションは再利用可能なコンポーネントから構築され、各コンポーネントは独立した状態とロジックを持ちます。
- 宣言的ビュー: コードがどのように見えるべきかを宣言することに集中し、Reactがデータの変更時に適切なコンポーネントを効率的に更新およびレンダリングします。
- バーチャルDOM: 実際のDOM操作はコストが高いため、ReactはバーチャルDOMを使って変更点を効率的に計算し、必要な部分のみを実際のDOMに反映させます。
- JSX: JavaScriptの拡張構文で、コンポーネントの構造を書く際にHTMLに似た構文が使用できます。これにより、コードが読みやすく、書きやすくなります。
React自体はクライアントサイドで動作するライブラリですが、前述したNext.jsではReactをサーバーサイドとクライアントサイド両方で使用できます。
日本ではまだReactを使用しているプロジェクトは少ないようですが、世界規模でみるとほぼReact一驚になっているように感じます。
また、Reactに関してはデスクトップアプリやモバイルアプリのUIを作成する際にも使用できるので、非常に汎用性が高いライブラリです。このライブラリをマスターしておけば、UI開発する際に迷うことがなくなりますね。
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.
Auth.js
Auth.jsは、Next.jsアプリケーションに認証機能を簡単に統合できるライブラリです。標準的なユーザーIDとパスワードを使った認証はもちろん、GoogleやGithubといった外部認証サービスにも数多く対応しています。当ブログでも使用しています。
主な特徴は以下の通りです。
- 簡単な設定: 設定がシンプルで、数行のコードを書くだけで認証機能を追加できます。
- セキュリティ: JWT（JSON Web Tokens）とセッションを利用してセキュアな認証を提供します。
- 多様なプロバイダー: Google, Facebook, Twitterなど、さまざまなOAuth認証プロバイダーを簡単に統合できます。
- データベース不要: ユーザー情報をセッション内に保存するため、必ずしもデータベースは必要ありませんが、必要に応じてデータベースと連携することもできます。
- 柔軟なカスタマイズが可能: ログインページやコールバック、セッション管理など、様々な部分をカスタマイズできます。
Authentication for the Web
next-intl：多言語化
next-intlは、Next.jsのプロジェクトに国際化（i18n）機能を簡単に追加するためのライブラリです。このライブラリを使用することで、アプリケーションを多言語対応させることができ、異なるロケールに基づいた翻訳や日付、数値のフォーマットを管理することが可能になります。
主な特徴は以下の通りです：
- ロケール検出: ユーザーのブラウザ設定またはURLパスからロケールを自動検出します。
- 翻訳の管理: JSONファイルを使用して、各ロケールに対応した翻訳を管理します。
- フックとコンポーネント:
useTranslationsフックや<Trans>コンポーネントなどを提供し、翻訳テキストをアプリケーション内で簡単に使用できます。 - 最適化されたパフォーマンス: 必要なロケールデータのみをクライアントにロードし、余分なデータのロードを避けるために、効率的なデータフェッチとバンドルが行われます。
- 拡張性: カスタムローディング、キャッシング戦略、独自のフォーマット関数など、多様なカスタマイズオプションを提供しています。
Internationalization (i18n) for Next.js
Next-Themes：テーマカラー制御
next-themesは、Next.jsフレームワークにおいてテーマ管理を容易にするライブラリです。このライブラリを使用することで、ダークモードやライトモードなどの異なるテーマを簡単に切り替えることが可能になります。特に、Next.jsプロジェクトにライトモードとダークモードの切り替え機能を実装する際に役立ちます。
主な特徴は以下の通りです。
- 簡易的なダークモード実装: たった2行のコードで完璧なダークモードを実装できます。
- システム設定への対応:
prefers-color-schemeに基づいたシステム設定に対応しています。 - ブラウザUIのテーマ設定:
color-schemeを使用してブラウザUIのテーマを設定できます。 - Next.js 13のApp Routerサポート: 最新のNext.jsの機能とも互換性があります。
- SSRおよびSSGでのフラッシュ防止: サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)時に読み込み時のフラッシュを防ぎます。
- テーマ同期: タブやウィンドウ間でのテーマの同期が可能です。
- フラッシュ無効化: テーマ変更時のフラッシュを無効化できます。
- 特定のページでのテーマ強制: 特定のページに特定のテーマを強制的に適用する機能があります。
- クラスまたはデータ属性セレクタの選択: テーマの適用方法としてクラスまたはデータ属性セレクタを選択できます。
- useThemeフック: テーマ管理のための
useThemeフックが提供されています。
こちらは私も良く使用しています。簡単な設定と少量のコードを設定するだけで使用できるので、テーマ切り替えの機能を実装する際は必ず使用しています。
Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing - pacocoursey/next-themes
tailwind.css：UIライブラリ
Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。デザインをカスタムクラスではなく、目的に応じた小さなユーティリティクラスの組み合わせで構築していきます。これにより、独自のデザインシステムを迅速に構築できるとともに、繰り返しの使用や変更にも柔軟に対応できるスタイルシートを作成することができます。
主な特徴は以下の通りです。
- ユーティリティファースト: 一般的なスタイリングがプリセットのクラスとして用意されており、それらを組み合わせてデザインを構築します。
- レスポンシブデザイン: モバイルファーストのアプローチで、レスポンシブデザインを簡単に実装できます。
- カスタマイズ性: 設定ファイルを通じてデフォルトのデザインをカスタマイズすることが可能です。
- パフォーマンス: 使用されているクラスのみを含む最終的なCSSファイルを生成するため、ファイルサイズが小さく、パフォーマンスが向上します。
- プラグインシステム: 機能を拡張するためのプラグインが豊富にあり、さらに独自のプラグインを作成することもできます。
Tailwind CSSはスタイリングの手間を減らしつつ、フロントエンド開発の生産性を高めるために多くの開発者に人気があります。
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
CSSファイルを用意することなく、必要なクラスを必要な分だけ記述する感じです。
<div class="flex flex-wrap">
<h1 class="flex-auto text-lg font-semibold text-slate-900">
Utility Jacket
</h1>
<div class="text-lg font-semibold text-slate-500">
$110.00
</div>
<div class="w-full flex-none text-sm font-medium text-slate-700 mt-2">
In stock
</div>
</div>また、最近では各種ブラウザーで「＠Container」クエリに対応したため、レスポンシブの処理が今まで以上に柔軟に記述できるようになりました。まだ、tailwind.css公式ではサポートしていないので、プラグインを追加する必要があります。
A plugin for Tailwind CSS v3.2+ that provides utilities for container queries. - tailwindlabs/tailwindcss-container-queries
shadcn/ui：UIライブラリ
shadcn/ui は、React と TypeScript で書かれた、軽量でカスタマイズ可能な UI コンポーネントライブラリで、シンプルで使いやすい API を備えており、あらゆる種類の Web アプリケーションを構築するのに役立ちます。
様々な便利なコンポーネントが用意されており、必要なものを必要な分だけインストールして使用することができます。例えば、CSSでゼロから実装すると大変な、Toggleスイッチやポップアップ、範囲指定可能なカレンダーなどがあります。
shadcn/uiを使うには、tailwind.cssをインストールしている必要があります。
A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.
stripe：決済システム
Stripeはオンライン決済を処理するためのグローバルなプラットフォームです。ビジネスがウェブサイトやアプリケーション上で顧客からクレジットカードやデビットカード、その他の決済手段による支払いを受け付けられるようにするための様々なAPIとツールを提供しています。
主な特徴は以下の通りです。
- 多様な決済方法: クレジットカードやデビットカードのほか、Apple PayやGoogle Pay、仮想通貨などのモバイル決済、さらには国際的な決済方法もサポートしています。
- セキュリティ: PCI DSS（Payment Card Industry Data Security Standard）に準拠しており、高いセキュリティ基準を維持しています。
- 柔軟性: カスタム決済フローを作るための豊富なAPIがあり、あらゆるサイズのビジネスに適しています。
- 簡単な統合: SDKや豊富なドキュメントが提供されており、開発者が容易にシステム統合を行えます。
また、Stripeはstripe-nodeという公式のNode.jsライブラリを提供しています。このライブラリを使用することで、Node.jsアプリケーションからStripeのAPIに簡単にアクセスし、決済処理や顧客管理、請求、サブスクリプションの管理などが行えます。
stripe-nodeを使用すると、開発者は少ないコードで安全な決済システムを素早く構築でき、Stripeの提供する機能を最大限に活用することができます。
私はまだ決済システムの導入経験はありませんが、今後個人開発するサービスでstripeを使用する予定です。
Stripe ã�¯ã€�オンライン・対é�¢æ±ºæ¸ˆä»£è¡Œã‚µãƒ¼ãƒ“スã�ªã�©ã�®é‡‘èž�ソリューションをæ��ä¾›ã�—ã�¦ã�„ã�¾ã�™ã€‚決済ã�®å°Žå…¥ã‚„請求書作æˆ�ã€�ä¸�æ£åˆ©ç”¨å¯¾ç–を実ç�¾ã�§ã��ã�¾ã�™ã€‚
Prisma Client：データベースORM
Prisma Clientは、Node.jsおよびTypeScriptのための次世代のORM（Object-Relational Mapping）です。データベースとのやり取りを抽象化し、より簡単にデータベースのクエリを実行できるように設計されています。
主な特徴は以下の通りです。
- 型安全なクエリ: TypeScriptの利点を活かし、コンパイル時に型の検証を行います。これにより、ランタイムエラーよりも早く問題を発見できるため、開発の信頼性が向上します。
- 簡単なセットアップ: Prisma Schemaという独自の設定ファイルを用いて、データモデルを定義します。その後、Prisma Migrateを使ってデータベースのマイグレーションを簡単に行うことができます。
- 強力なクエリ機能: ネストされたクエリやフィルタ、ページネーション、トランザクションなど、複雑なクエリも簡単に書けるようになります。
- 対応データベース: PostgreSQL、MySQL、SQLite、SQL Serverなど、複数のリレーショナルデータベースに対応しています。
Prismaはデータベース作業をシンプルにし、開発者がより生産的になることを目指しています。また、Prisma StudioというGUIツールを使って、データベースの内容を視覚的に管理することもできます。
Prismaは私も愛用していて、クエリを発行するのが非常に直感的で楽なので、もう生のSQL文には戻れませんね。
Build, fortify, and grow your application easily with an intuitive data model, type-safety, automated migrations, connection pooling and caching.
PM2：プロセス管理
PM2は、Node.jsアプリケーションのプロセス管理を行うためのオープンソースのツールです。アプリケーションをバックグラウンドで実行し続けるためのデーモンプロセスとして機能し、アプリケーションがクラッシュした場合に自動で再起動するなど、信頼性の高い運用を支援します。
主な特徴は以下の通りです。
- ロードバランサー: システムのリソースを効率的に利用し、アプリケーションの負荷を分散します。
- 自動再起動: アプリケーションがクラッシュした場合やファイルに変更があった場合に、自動でプロセスを再起動します。
- ゼロダウンタイムデプロイ: アプリケーションを更新する際に、ユーザーにサービスの中断を感じさせずにデプロイが可能です。
- プロセス監視: CPUやメモリの使用状況をリアルタイムで監視し、パフォーマンスの管理を容易にします。
- ログ管理: 標準出力とエラーログをファイルに記録し、トラブルシューティングをサポートします。
- クラスターモード: 複数のインスタンスを立ち上げて、マルチコアCPUの性能を最大限に活用できます。
Next.jsアプリを運用する際に必須のツールになります。
PM2 is an advanced production process manager for Node.js applications with built-in load balancer, zero-downtime reload, startup scripts, monitoring, and microservice management features.
Open Lite Speed
OpenLiteSpeedは、非常に高速なイベント駆動型のオープンソースのWebサーバーです。これは、LiteSpeed Technologiesによって開発されたLiteSpeed Web Server（LSWS）のオープンソース版として位置づけられています。
Nginxと比較されることが多いですが、性能は拮抗しているか上回っているというデータもあり、近年Nginxと並んでシェアを伸ばしつつある次世代のWebサーバーソフトの一つです。
OpenLiteSpeedは特にPHPの動作に最適化されており、Apacheの.htaccessファイルと互換性があるため、Apacheからの移行も比較的スムーズに行えます。私の場合、PHPも以前までは良く使用していましたが、現在はNode.jsを使用することがほとんどなので、Open Lite Speedのリバースプロキシ機能を使用して、Next.jsアプリを稼働させることが多いです。
リバースプロキシ機能が使用できるので、実質Pythonの「Dojango」やRubyの「Ruby on Rails」などの言語のことなる複数アプリを同時に稼働させることも容易です。
また、管理が簡単なWeb管理インターフェースを備えており、セットアップや管理を容易に行える点も魅力の一つです。高性能ながらリソースの使用効率も良く、中小規模のウェブサイトから大規模なウェブサービスまで、幅広い用途で利用されています。
また、Next.jsアプリをOpen Lite Speedで運用する方法を解説しています。
Next.js製のWebアプリをセルフホストする場合に、同じサーバー内でリバースプロキシを使って複数のアプリを運用する方法を解説していきます。リバースプロキシにはOpen Lite Speedを使用します。
PHPMyAdmin
PHPMyAdminは、MySQLやMariaDBをWeb GUIで管理できるツールです。PHPで動作するので、Open Lite Speedでホストして使用します。
データベース管理、テーブル作成管理、レコード管理、ユーザー管理など、GUIで簡単に行うことができます。サーバーにリモートアクセスしてSQL文を実行する必要がないので、ちょっとした操作や確認、スキーマの編集などに便利です。
基本的にはPrisma Clientで事足りますが、テストレコードの挿入やデータの確認などに、パッと見れるので重宝します。PHPMyAdminを使用せずとも、Prisma Studioでも同じことができます。
ただ、私の場合はこちらを長らく使用してきたのでしっくりきているというだけですね。
また、モダンなテーマもあるのでお好みのUIも選択できます。
デスクトップアプリ開発
デスクトップアプリ開発においても、素晴らしいフレームワークが揃っています。
Electron
Electronは、クロスプラットフォームのデスクトップアプリケーションを開発するためのフレームワークで、GitHub社が開発しています。Web技術（HTML、CSS、JavaScript、TypeScript）を使用して、Windows、macOS、Linuxなど複数のオペレーティングシステム上で動作するデスクトップアプリケーションを作成できます。
主な特徴は以下の通りです。
- クロスプラットフォーム対応：一つのコードベースでWindows、macOS、Linuxアプリを作成できます。
- Web技術利用：HTML、CSS、JavaScript、TypeScriptを使用してアプリケーションを開発でき、ウェブ開発者にとってアクセスが容易です。
- Node.jsの統合：Node.jsのAPIを使用でき、ファイルシステムやネットワーク通信などのバックエンドの機能も利用可能です。
- 豊富なコミュニティ：多くの開発者が使用しており、プラグインやツールが豊富に提供されています。
- Chromiumエンジン：GoogleのChromiumエンジンをベースにしているため、最新のWeb標準に対応し、高いパフォーマンスを実現します。
- 既存のWebアプリの再利用：既に存在するWebアプリケーションを比較的少ない労力でデスクトップアプリに変換できます。
Electronは、シンプルなプロトタイピングから大規模な商用アプリケーションまで、幅広い用途で利用されていますが、Web技術をベースにしているため、一般にネイティブアプリケーションに比べてリソースを多く消費する傾向があります。
したがって、無駄な処理を極力抑えたり、パッケージのインポートタイミングを調整したりして、メモリー管理に少し記憶バル必要が生じます。
また、Chromiumエンジンをそのままバンドルしている以上、ビルド後の最終的なリソースサイズが肥大化しがちな面があります。その点が許容できそうならば、素晴らしいフレームワークになることは間違いありません。
Microsoftが開発する「Visual Studio Code」やコミュニケーションツールの「Slack」、Discodeなどは元はElectronがベースになっているようです。
Build cross-platform desktop apps with JavaScript, HTML, and CSS
ネイティブ拡張の統合方法
ネイティブ拡張は、各プラットフォームでOSのAPIを使用した処理を行う必要がある場合に実装する必要が生じます。例えば、Electronから現在起動しているプロセスのアプリ名を取得したいときや、プロセスのアプリアイコンをビットマップ形式で取得したいときなどが挙げられます。
その場合は、C++やRust言語を使用してOSを操作するための処理を書く必要があります。最終的に実装したコードを以下のツールを使用してNode.jsで呼び出せるように、nodeファイルとしてコンパイルします。
C++でコンパイルする場合は以下⤵
Module for using Node-API from C++. Contribute to nodejs/node-addon-api development by creating an account on GitHub.
Rustでコンパイルする場合は以下⤵
A framework for building compiled Node.js add-ons in Rust via Node-API - napi-rs/napi-rs
おまけ：Electron-Vite
Electron-Viteは、Electronアプリケーションの開発を迅速化・効率化するためにViteビルドツールを統合したフレームワークです。Viteは、次世代のフロントエンドビルドツールであり、開発中の高速な再読み込み（HMR）や、本番環境向けの最適化されたビルドシステムが特徴です。Electronのデスクトップアプリケーション開発とViteの強力なビルド機能を組み合わせることで、開発者はより効率的な開発体験を得ることができます。
主な特徴は以下の通りです。
- 高速な開発体験：Viteの提供する高速なホットモジュールリローディング（HMR）により、リアルタイムでのコード変更と結果の反映が可能です。
- 効率的なビルド：Viteは開発用には非バンドルで高速に、本番用にはRollupを利用した最適化されたビルドを提供します。
- 容易なセットアップ：プロジェクトのセットアップがシンプルで、開発を迅速にスタートできます。
- プラグインシステム：Viteの豊富なプラグインを利用して、拡張性の高い開発が行えます。
- TypeScriptの統合：TypeScriptをネイティブでサポートし、型安全な開発が可能です。
- ソースプロテクション：メインプロセスのコードをV8バイトコードに変換し、ソースコードを完全に秘匿かできます。
Electron-Viteは、特に大規模なElectronプロジェクトや、最新のWeb技術を利用したい開発者にとって、開発プロセスを改善する有効な選択肢となります。
私が一番気に入っているのは、なんといってもHMRとソースプロテクションの機能ですね。
Next generation Electron build tooling based on Vite.
おまけ：better-sqlite3-multiple-ciphers
better-sqlite3-multiple-ciphers は、better-sqlite3 というSQLiteを扱うためのNode.js用モジュールに、複数の暗号化方式をサポートする機能を追加したものです。better-sqlite3 はそのパフォーマンスの高さと同期的なAPIで人気がありますが、デフォルトではデータベースの暗号化に対応していません。
この multiple-ciphers 拡張は、SQLCipherなどの異なる暗号化ライブラリを使ってSQLiteデータベースを暗号化・復号化する機能を提供します。SQLCipherはAES-256ビットの暗号化を使用し、データベースファイルを安全に保つために広く利用されています。
データのセキュリティを強化する必要があるアプリケーションでbetter-sqlite3を使用している開発者にとって、この拡張機能は大変便利です。ただし、暗号化と復号化のプロセスはパフォーマンスに影響を与える可能性があるため、アプリケーションの要件に応じて適切に利用する必要があります。
Electronに暗号化したSQLiteデータベースを組み込みたい場合に使用しますが、暗号化機能を使用しない場合でも通常通り使用できるのでなかなか素晴らしいツールです。
better-sqlite3 with multiple-cipher encryption support 🔒 - m4heshd/better-sqlite3-multiple-ciphers
おまけ：コード署名
デスクトップアプリをリリースする際に必要になるもので、正規の開発者であることを認証する仕組みです。フリーソフトでは特にコード署名をせず、配布していることも多いですが、コード署名されていないプログラムをいざ実行しようとすると、Windowsでは警告のウィンドウが出たり、そもそも設定によってはブロックされてしまうこともあります。
そのため、フリーソフトで配布するならまだしも、シェアウェアやサブスクリプション形式のサービスではコード署名がないと不審がられてインストールをためらわれてしまいます。
しかしながら、コード署名する時の証明書を取得するのにかなり高額な料金がかかるため、個人開発者にとっては荷が重すぎます。相場だとだいたい年間５万～１０万円程度必要です。
そのため、私が気づいた現実的な方法は、WindowsならMicrosoftのアプリストア、MacならAppleのアプリストアでリリースすることです。
この方法なら、リリースされた段階でコード署名が自動的に付与されます。
詳しい手順などは、また後日記事にしたいと思っています。
コードサイニング証明書を取得する場合
一応調べてみると安価なものがあるようです。海外のサービスですが、個人開発者でも取得可能なようです。２０２４年２月１０日のレートで、年間€189／３万円前後で購入できますね。
The Standard Code Signing certificate is a certificate that allows you to digitally sign software. The certificate is trusted by Microsoft and supports building the Microsoft SmartScreen Filter reputation. By securing your software with a Standard Code Signingcertificate, you can protect your code from unauthorized modification and provide users with the security of the downloaded application. By signing your code with a Standard Code Signing certificate, people who download and install your software: Wil not see “unknown publisher” warnings; Will be sure that the software comes from a trusted source; Will be guaranteed that the downloaded program hasn't been modified after its release; Will be less likely to see the Microsoft SmartScreen Filter screen, which you eliminate by signing the software. Read about the certificate issuance and usage information, available on the next product description tabs.
良い解説記事もありましたので、参考になりそうです。
個人開発者でも出来るコードサイニング証明書によるWindowsアプリの署名 Certumの証明書を購入してアプリを署名するまでの手順 先に英語で書いてから日本語に訳しています。元記事は “Code signing certificate for indie developers” をご参照ください。 こんにちは、個人アプリ作家のTAKUYAです。InkdropというSaaSでご飯を食べています。現在のビジネス規模だと個人事業主としてやったほうが生活がシンプルに保てるので、まだ会社化していません。僕のアプリはInkdropというMarkdownノートアプリで、macOS、Windows、Linux、iOSやAndroidで動作します。最近のOperating Systemsは積極的にMaliciousなSoftwareからユーザを守る機能を搭載しています。macOSではApp Store外で配布する際はアプリを自分でNotarizeする必要があります。それは特に難しいことではありません。なぜならAppleが基本的に必要なものを提供してくれるからです。一方Windowsでは、Micr
TAURI
Tauriは、Web技術を活用してクロスプラットフォームのデスクトップアプリケーションを作成できるフレームワークで、Rust言語で作られたバックエンドと、任意のフロントエンドフレームワーク（React、Vue、Svelteなど）を組み合わせて使用します。Electronに代わる軽量な代替手段として注目されています。
主な特徴は以下の通りです。
- セキュリティの強化: デフォルトでセキュリティに重点を置いており、アプリケーションのセキュリティリスクを低減します。
- リソース使用量の削減: Electronよりもメモリ使用量やバイナリサイズが小さいため、よりElectronよりスマートです。
- クロスプラットフォーム対応: Windows、macOS、Linuxで動作するアプリケーションを一つのコードベースから作成できます。最近ではTAURI Beta 2.0でモバイルアプリ開発にも対応しました。
- Rustのパフォーマンス: Rust言語の安全性とパフォーマンスを活用し、高速なバックエンドを構築できます。
- Webフロントエンドの柔軟性: 既存のWebアプリケーションをそのままデスクトップアプリケーションに統合できるため、ウェブ開発者にとってアクセスしやすいです。
- プラグインシステム: 機能を拡張するためのプラグインシステムを提供し、カスタマイズ性が高いです。
- 自動アップデート機能: アプリケーションの自動更新機能をサポートしています。
Tauriは、アプリケーションのパフォーマンスとセキュリティを重視する開発者にとって魅力的な選択肢です。また、Electronと比較してリソース消費が少ないため、軽量なアプリケーションを求める場合にも適しています。
私も現在こちらに乗り換えを検討していますが、Rustは経験が浅いので、もう少し学習機関が必要ですね。
これからは、C++よりもRustが主流になりそうなので、TypeScript + Rustで開発していきたいと思っています。
最近では、MicrosoftもOSの基盤をC++からRustに置き換える作業を進めているようです。
The cross-platform app building toolkit
おまけ：Prisma Client Rust
prisma-client-rustは、JavaScript向けのORMであるPrismaをRustから利用できるようにしたライブラリです。このライブラリは、Prismaのコア部分がRustで書かれていることから生まれ、Rust開発者にとって理解しやすいAPIを提供しながら、Prismaの強力なデータベース技術を活用できます。また、NodeJSからの移行を検討している開発者や、より高速で効率的なアプリケーションを目指す開発者にも適しています。特に、フロントエンドアプリケーションでのPrismaの使用が容易になり、Tauriを使用したデスクトップアプリケーションの開発においてもPrismaエコシステムを活用できます1。
こちらを「TAURI」と一緒にビルドしてアプリケーションに組み込むことができます。ただ、SQLCipherには非対応なので、データベースの暗号化が必要な場合は、個々のカラムごとにAES-256bitなどの暗号化方式を使用してデータを秘匿かする必要があります。
Type-safe database access for Rust. Contribute to Brendonovich/prisma-client-rust development by creating an account on GitHub.
モバイルアプリ開発
モバイル開発においても、React一択になりそうですね。
React Native
React Nativeは、Facebookによって開発されたオープンソースのモバイルアプリケーション開発フレームワークです。React Nativeを使用すると、JavaScriptとReactの概念を利用して、iOSとAndroidの両方のプラットフォームに対応するネイティブアプリケーションを構築することができます。
主な特徴を以下に記載します。
- クロスプラットフォーム: 一つのコードベースでiOSとAndroidのアプリを同時に開発できます。
- ネイティブパフォーマンス: JavaScriptを使用しながらも、ネイティブコンポーネントを通じて高いパフォーマンスを実現します。
- Reactの利点: Reactの宣言的UIパラダイムと効率的な更新をモバイル開発に取り入れています。
- ホットリローディング: コードを編集した後、アプリを再ビルドせずに変更を確認できる機能を提供します。
- 豊富なエコシステム: 多くのライブラリやツールが利用でき、開発プロセスを加速します。
- コミュニティのサポート: 開発者コミュニティが活発で、多くのリソースとサポートを受けられます。
React Nativeは、ウェブ開発の経験を活かしてモバイルアプリ開発に参入したい開発者にとって特に魅力的な選択肢となるでしょう。
私はまだReactしか使用したことがありませんが、この先モバイルアプリを開発する際は、間違いなく使用するフレームワークの一つですね。
A framework for building native apps for Android, iOS, and more using React
Capacitor
Capacitorは、ウェブ技術（HTML、CSS、JavaScript）を使用してクロスプラットフォームのモバイルアプリケーションを構築するためのモダンなフレームワークです。Ionicチームによって開発されたこのフレームワークは、ウェブアプリケーションをiOS、Android、およびプログレッシブウェブアプリ（PWA）に容易に統合させることができます。
主な特徴は以下の通りです。
- ネイティブプラグインの統合: ネイティブデバイスの機能へのアクセスを可能にする豊富なAPIセットを提供します。
- ウェブエコシステムとの互換性: React、Angular、Vueなど、どのウェブフレームワークとも組み合わせて使用できます。
- クロスプラットフォーム対応: 単一のコードベースからiOS、Android、Webアプリを構築できます。
- カスタムネイティブコードの追加: 必要に応じて独自のネイティブコードやサードパーティのネイティブSDKを組み込むことができます。
- モダンな開発体験: モダンなツールチェーンを利用し、効率的な開発プロセスを実現します。
- コミュニティとの連携: 開発者コミュニティやIonicチームによるサポートが充実しています。
Capacitorは特に、既存のウェブアプリケーションをモバイルプラットフォームに拡張する場合や、ウェブ開発者がモバイル開発に参入する際に有効なフレームワークです。
前述のReact Nativeと大きく異なる点は、React Nativeでは、JavaScriptとReactの概念を使用しつつ、ネイティブのUIコンポーネントを直接レンダリングする一方、Capacitorでは、WebViewをベースにしており、ウェブ技術で書かれたアプリをネイティブのシェルでラップしています。
これにより、CapacitorではフロントエンドのUI作成で使用できるほぼすべてのライブラリが使用できます。特徴でも記載しましたが、React、Angular、Vue、JQueryなど、JavaScriptで動作するものなら何でも使えるということですね。
どちらにしても素晴らしいフレームワークなので、現在のプロジェクトに合う方を選びましょう。
Build iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript
おまけ：SQLCipher
SQLCipherは、SQLiteデータベースエンジンのオープンソースの拡張で、データベースの内容を暗号化するために使われます。このライブラリを利用することで、AES-256ビット暗号化を使用してデータベースファイル全体を暗号化し、セキュリティを強化できます。SQLCipherは透過的に動作し、適切な暗号キーを使ってデータベースにアクセスする際にのみ、内容が復号されます。多様なプラットフォームや言語で利用可能なため、個人情報を含むアプリケーションやセキュリティが重要な商用アプリケーションで広く採用されています。
こちらは、Windows・Mac・Linux・IOS・Androidといった主要なOSで動作します。WindowsやMacでElectronを使用してデスクトップアプリを開発する場合は、デスクトップ開発の項で紹介した「better-sqlite3-multiple-ciphers」を使用した方が簡単です。
モバイルアプリ開発で、暗号化機能付きの組み込みデータベースを使用したい場合は、SQLCipherを導入するのが良いでしょう。
SQLCipher is a standalone fork of SQLite that adds 256 bit AES encryption of database files and other security features. - sqlcipher/sqlcipher
これらのエコシステムを使用したクロスプラットフォームサービス開発のイメージ
長らくいろいろと技術スタックを紹介してきましたが、TypeScriptのみでもクロスプラットフォーム対応のサービスを個人開発することが可能だという感覚がつかめたのではないでしょうか？
例えば、クロスプラットフォーム対応のブックマーク管理サービスを考えてみます。
既に各種ブラウザーに搭載されている機能の一つですが、それぞれのデバイスに保存されたブックマークは同期サーバーを返して、常にリアルタイムで情報を同期していると思います。
そういった仕組みを提供するサービスを、今回紹介した技術スタックを使用して実現できます。
クロスプラットフォーム対応となると、TypeScript以外にも学習しなければならないことは多いですが、以前と比較したら圧倒的に開発しやすくなったと感じています。
個人開発者みなさんの参考になれば幸いです。