2022年6月28日、Fresh 1.0がリリースされました。Fresh は、**Denoのフルスタックのウェブフレームワークで、次世代フレームワークと位置付けられています。**ビルドステップがないため、高速なデプロイメントが可能です。2022年8月時点の最新版は、8月1日にリリースされた1.0.2です。

Freshとは、JavaScriptおよびTypeScript開発のためのフルスタックのウェブフレームワークを指します。フレームワークを活用した高品質で高性能のウェブアプリケーションを簡単に作成できるように設計されています

Freshでは、*Denoが提供する実行環境をルーティングフレームワークとテンプレートエンジンを用いて、簡単に利用できるようにします。*サーバー上でのジャストインタイム（JIT）レンダリングと、クライアントサイドのコンポーネントレンダリングを併用し、インタラクティブ性をより高めています。

TypeScriptとは？JavaScriptとの違いも解説！

*Denoとは、V8 JavaScriptエンジン上に構築されたランタイム環境を指します。*JavaScriptやTypeScriptの実行を行うものです。Node.jsの作者であるライアン・ダール氏はNode.js考案後、その経験と反省を生かしDenoを開発しました。2022年8月時点の最新版は、バージョン1.24.2です。

【参考】：[Deno](https://deno.land/)
【参考】：[GitHub Deno](https://github.com/denoland/deno)

Node.jsとは？JavaScriptとの違いや使い所を解説

一般的にクライアントサイドのレンダリングは、JavaScriptのコード通信量が多く処理が重くなります。Freshでは、*レンダリングの大半をサーバーで行い、特定コンポーネントのみ明示的にクライアントサイドでレンダリングします。*デフォルトでは、クライアントにJavaScriptコードを送信しません。

フレームワークを実装するために、ルーティングフレームワークとテンプレートエンジンを用い、要求ページをサーバー上でレンダリングします。この仕組みにより、ランタイムのオーバーヘッドが発生せず、インタラクティブ性を向上させることができます。

Freshはビルドステップがないので、デプロイメントが高速です。TypeScriptやJSXからJavaScriptへの変換は、ジャストインタイムで必要時に自動的に行われます。

*Fresh 1.0は初めての安定版としてリリースされました。*マイナーリリースは適宜行われており、2022年8月時点の最新版は1.0.2です。現時点では登場間もないため、将来計画に関する情報は公開されていません。

【参考】：[GitHub Denoland Fresh Reealses](https://github.com/denoland/fresh/releases)

*Freshの設計方針は、高速でスケーラブル、信頼性の高いアプリケーションを簡単に構築することを目指したものです。*

【参考】：[Fresh Docs: Concepts](https://fresh.deno.dev/docs/concepts)

設計目標を達成するために、いくつかの原則に基づき設計されています。具体的には、1つ目としてページのロード時間は最小限に抑えるべき、ということです。2つ目はクライアントが行う作業を最小限にする、3つ目はエラーは最小限の範囲にとどめて周辺への影響を最小にする、ということです。

上記を実装するために、アイランドアーキテクチャ・パターンを採用しています。具体的にはFreshのアプリケーションが、デフォルトでJavaScriptコードを用いずに、純粋なHTMLをクライアントに送信するものです。

サーバーでレンダリングされたページの一部は、インタラクティブ性を高めるためクライアントサイドでレンダリングすることができます。一般的に再レンダリングの対象は限定されるので、高速で軽量なアプリケーションが開発できます。

Freshを使うには、先行してDenoのインストールが必要です。*Freshは、Deno 1.22.3以降でサポートされます。*インストール済みの場合は、念のため最新バージョンにアップグレードしておきます。Denoが利用可能になったら、プロジェクトを作成し開発を進めます。

【参考】：[Fresh Docs: Getting Started](https://fresh.deno.dev/docs/getting-started)

*Denoのインストールは、シングルパッケージをダウンロードし展開して行います。*WindowsやmacOS・Linuxに対応します。macOSでは、M1（arm64）とIntel（x64）に対応し、WindowsとLinuxでは、x64のみでサポートされます。

【参考】：[Deno Installation](https://deno.land/manual/getting_started/installation)
【参考】：[GitHub deno_install](https://github.com/denoland/deno_install)

macOSやLinuxのシェルでは以下のように、インストールします。

```curl -fsSL https://deno.land/install.sh | sh```

Windowsでは、PowerShellを用いて以下のようにインストールを行います。

```irm https://deno.land/install.ps1 | iex```

すでにDenoをインストール済みの場合は、最新バージョンにアップグレードしておきます。

プロジェクトの作成は、Freshのプロジェクト作成ツールを用います。
【参考】：[Fresh Docs: Create a project](https://fresh.deno.dev/docs/getting-started/create-a-project)

プロジェクトを作成することで、Freshに必要なファイルが指定フォルダに作成されます。ここでは作成フォルダを”my-proj”として指定し、プロジェクトを作成します。

```deno run -A -r https://fresh.deno.dev my-proj```

### プロジェクトのファイル構成

先ほど作成したプロジェクトでは、指定したフォルダにいくつかのファイルが自動的に作成されています。必ず必要となるのは、以下の4つです。
【参考】：[Fresh Docs: Create a project](https://fresh.deno.dev/docs/getting-started/create-a-project)

・*dev.ts*
作成したプロジェクトの開発エントリポイントで、プロジェクトを開始するために実行するファイルです。

・*main.ts*
プロジェクトで実際に使用するコードのエントリポイントで、Deno Deployで使用するファイルです。

・*fresh.gen.ts*
ルートとアイランドに関する情報を含むファイルで、開発時にroutesとislandsの各フォルダを元に自動生成されます。

・*import_map.json*
プロジェクトの依存関係を管理するために使用されるインポートマップです。

上記の他に、Denoとの連携のために、deno.jsonファイルが作成されます。

*ローカルでの実行は、プロジェクト作成時に指定したフォルダに移動し開発サーバーを起動します。*

これで、DenoのWatcherプロセスが開始されました。”http\://localhost:8000”にアクセスすると、レモンのロゴとカウンターが表示されていることが分かります。
【参考】：[Fresh Docs: Running locally](https://fresh.deno.dev/docs/getting-started/running-locally)

ここで、細かく起動オプションを指定することもできます。

*ページの作成は、トップページとなる” routes/index.tsx”を修正することでメッセージを簡単に更新することができます。*もちろん、ここで手直しすることで商用利用できる品質レベルに仕上げることもできます。

具体的には、静的および動的なルート設定とレンダリング、フォーム入力やハンドラーなどを設定し、インタラクティブ性を高めるための仕上げを行っていきます。具体的な作業項目は、公式サイトをご確認ください。
【参考】：[Fresh Docs: Getting Started](https://fresh.deno.dev/docs/getting-started)

*完成版をデプロイするには、Deno Deployを利用します。*Deno Deployは、JavaScriptやTypeScriptをエッジで実行する分散ランタイムシステムを指します。

【参考】：[Deno Deploy](https://deno.com/deploy)

Deno Deployでは、GitHubインテグレーションを利用します。コードをGitHub上のリポジトリにプッシュし、Deno Deployのダッシュボードでデプロイのためにプロジェクトを作成します。プロジェクト作成が完了したら、プロジェクト設定の「Git」タブからリポジトリを選択し、Branchを”main”に、そしてEntrypoint fileを”main.ts”に指定します。

【参考】：[Fresh Docs: Deploy to production](https://fresh.deno.dev/docs/getting-started/deploy-to-production)

GitHubとは？メリットや使い方、Gitとの違いも徹底解説！

Deno Deployの手続きで、作成プロジェクトが自動的にインターネットにデプロイされます。Deno Deployは、URLを指定するだけでコードをデプロイすることができます。グローバルに分散配置されるリージョンを活用して世界中のユーザ向けの高速デプロイを実現します。具体的には、  *”https\://$PROJECT_NAME.deno.dev” のリンクを用いてアクセスすることができます。*

Freshの導入手順は非常に簡単です。インストールからプロジェクトの作成、開発サーバーの起動、そして完成した完成版のデプロイまでスムーズに行うことができます。カスタマイズはDocsを見ながら進めることができます。まずは、*知識吸収の最初の1歩としてDenoとFreshに実際に触れてみてはいかがでしょうか。*

2022年6月28日、DenoのフルスタックのウェブフレームワークとなるFresh 1.0が、正式リリースされました。ビルドステップがないため、高速なデプロイメントが可能です。ここでは、Freshの特徴と機能、使い方について解説していきます。

Fresh は、Denoのフルスタックのウェブフレームワークで、次世代フレームワークと位置付けられます

ルーティングフレームワークとテンプレートエンジンを用い、簡単に利用できるようにします

インストールからプロジェクトの作成、開発、完成版のデプロイまで簡単に行うことができます

フルスタックの新フレームワーク「Fresh 1.0」がリリース！使い方を解説

WebKitとは、Apple社が開発する**オープンソースの「HTMLレンダリングエンジン」の名称です。**Web系エンジニアの方以外はあまり聞かない言葉かと思いますが、これからWebKitの歴史や概要、Webプログラミングで意識しておきたいことなどについて解説します。

Webエンジニアを目指す方、エンジニアとして知識を広げたい方はぜひ最後までお付き合いください。

*【参考】：[WebKit ｜公式](https://webkit.org/)*

iPhoneなどiOSのSafari、iOSで利用されているGoogle Chrome、いずれもHTMLレンダリングエンジンは WebKitが使われています。**WebKitはApple・Nokia・Adobeなどが中心になっているWebKit Foundationで、オープンソースのレンダリングソフトウェアとして開発されました。**

現在WebKitを採用している製品としては、Mac OSやiOSの標準ブラウザであるSafari、さらにはiOS向けのGoogle ChromeやFirefoxなどがあります。

*【参考】：[Safari - Apple（日本）](https://www.apple.com/jp/safari/)*
*【参考】：[Google Chrome｜ Google](https://www.google.com/intl/ja_jp/chrome/)*
*【参考】：[ Firefox ｜Mozilla ](https://www.mozilla.org/ja/)*

WebKitはApple社がMac OS標準ブラウザの「Safari」のレンダリングエンジンとして2002年に開発を始めました。**WebKitの元はUNIX系OS向けオープンソースHTMLレンダリングエンジンの「KHTML」です。**

WebKitは2005年にオープンソース化され、2008年にはGoogle社もその開発に参画し、WebKit「Google Chrome」やオープンソース版の「Chromium」のレンダリングエンジンとして採用されました。

2013年にAppleとGoogleが開発方針を巡って対立した結果、GoogleはWebKitから分岐した新しいレンダリングエンジンとして「Blink」の開発プロジェクトを立ち上げました。このBlinkはデスクトップ向けブラウザのChrome、Microsoft Edgeなどに搭載されています。

## レンダリングエンジンとWebエンジニア

Webブラウザは、Webプログラマーが開発したWebページを表現する重要なツールです。その表現にはHTMLレンダリングエンジンが使われており、Webブラウザに種類があるように、HTMLレンダリングエンジンにも種類があります。

作成したWebページは、*ブラウザの設計思想やそこに組み込まれているHTMLレンダリングエンジンによって見え方が違ったり、時にはレイアウトが崩れたりすることがあるため、注意が必要です。*

私たちが普段目にしているWebサイトはHTMLで書かれ、CSSで装飾し、体裁が整えられています。しかし、そのソース（元情報）は一般の方が見てもよく分かりません。**レンダリング（rendering ） は、特殊な言語やデータなどをインプットとして、それらの情報から画像や映像、音声などを生成することです。**

レンダリングエンジン（rendering engine）とは、レンダリングを行うソフトウェア部品のことです。レイアウトエンジン （layout engine）とも言われます。

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

### ブラウザのシェアを意識する

Webページを作成する際には、主要なブラウザに対応しなければならず、特にどのブラウザに完全対応するのかを決める必要があります。ブラウザとHTMLレンダリングエンジンはWebプログラマーにとって大切だということを常に意識しておきましょう。

ちなみに、デスクトップブラウザのシェア※は、日本ではChromeとMicrosoft Edgeだけで8割前後を占めています。スマートフォンではSafariが65%を占め、デスクトップとは真逆の状況になっています。

これから、ブラウザとHTMLレンダリングエンジンとの関係について紹介しますが、**デスクトップ向けのサイトではChromeとMicrosoft Edgeが採用したHTMLレンダリングエンジンの「Blink」を、スマホ向けサイトでは、SafariやiOS向けChromeなどが採用した「WebKit」を意識しておく必要がある**と言えます。

*【参考】：※1 [12月デスクトップブラウザシェア、日本のEdgeは世界の2倍 | マイナビニュース](https://news.mynavi.jp/techplus/article/20220106-2242636/)*
*【参考】：※1 [1月モバイルブラウザシェア、Safari増加続く | マイナビニュース](https://news.mynavi.jp/techplus/article/20220106-2242636/)*

### レンダリングエンジンの種類

Webブラウザで利用されているレンダリングエンジンにはいくつか種類があります。**代表的なレンダリングエンジンとWebブラウザとの関係を見てみましょう。**

*■ WebKit*
WebKitは、主にWebブラウザのSafarで使われています。軽快さ、スピードを特徴とするHTMLレンダリングエンジンです。Safariは、iPhoneやiPadなどのApple製品に標準で組み込まれているブラウザですが、他にiOS用で利用されるChromeやFirefoxでもWebKitが使われています。

本来、Google ChromeはBlink、FirefoxはGeckoというHTMLレンダリングを採用していますが、iOS版のChromeやFirefoxはApple社の規約に従ってWebKitを組み込んでいます。

*■ Trident*
「IE」として親しまれていたInternet Explorerで採用されていたHTMLレンダリングエンジンです。IEが廃止されたことにより、Tridentを利用する主要なブラウザはほぼ消滅し、ローカルでの利用がメインとなりました。

*■ EdgeHTML*
IEの後継ブラウザとなったMicrosoft Edge向けに、Tridentからフォーク（派生）して開発されたHTMLレンダリングエンジンです。2014年から2020年までMicrosoft Edgeで使われていました。

*■ Blink*
BlinkはGoogle社が中心に開発するHTMLレンダリングエンジンで、2013年にWebKitから分岐して開発が始まっています。同社のWebブラウザ Chromeをはじめ、様々なブラウザで利用されています。

Chromeは「Chromium」というオープンソースのブラウザ用ソフトをベースにしていますが、Microsoft Edgeも「Chromium」を採用したことで、HTMLレンダリングエンジンをBlinkに切り替えています。

*【参考】：[Opera Web Browser | Opera](https://www.opera.com/ja)*

IEサポート終了の影響は？終了の理由やEdgeのIEモードも紹介

WebKitが主にMacOSやiOSで動いているSafariなどのブラウザのHTMLレンダリングエンジンであることは理解できたと思いますが、実際にHTMLレンダリングエンジンに関する理解が進むにつれて、幾つかの疑問が湧いてきます。ここでは、*ネット上で見かけるWebKitにまつわる疑問について解説します。*

Webサイトの検証モードを確認した際に、誰もが1度は「-webkit-」という記述を目にすると思います。気になりながらも、その意味まで確認する人は少ないと思いますので、解説します。**-webkit-はCSSにおいて「ベンダープレフィックス（Vendor Prefix）」と呼ばれるもので、レンタリングエンジンに対応しています。**

ブラウザの開発に関わっているプログラマーの方を除いて、WebプログラマーはWebKitの使い方まで覚える必要はありませんが、ベンダープレフィックスは覚えておいた方がよいでしょう。

### ベンダープレフィックスとは

**ベンダープレフィックスはCSSのプロパティの拡張機能を各ブラウザに実装するための識別子です。**

まだブラウザで標準になっていない、非標準のCSSプロパティに-webkitのような「ベンダープレフィックス」をつけることで、新たな機能が利用できるようになる仕組みです。

CSSには、「-webKit-transition:」というように記述します。たとえば、要素を回転させて表示する「Tranform」プロパティにベンダープレフィックスを付ける場合は、

div {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

ちなみに、Internet Explorerのベンダープレフィックスは-ms-でしたが、今は使われていません。また、デスクトップ版のChromeやEdgeが採用しているHTMLレンダリングエンジンのBlinkでは、ベンダープレフィックスはSafariと同じ-webkit-です。

これはBlinkがWebKitから派生しているため、-webkit-で問題がないからです。こうしたことにより、ベンダープレフィックスを意識するのは、-webkit-とFirefoxの-moz-の2種類だけになりました。この結果、ベンダープレフィクスを意識する必要性が薄れてきています。

SafariなどHTMLレンダリングエンジンにWebKitを使用しているブラウザでは、稀に“WebKit Encountered an Internal Error” といった内部エラーが表示されることがあります。これはWebKitが出しているエラーメッセージです。

主な対処法としては、**エラーが表示された端末を再起動する、あるいはOSを最新のビルドに更新することです。**大抵の場合はこの2つの方法で改善できます。

## レンダリングエンジンに明るいエンジニアを

ここでは、HTMLレンダリングエンジンの1つ、WebKitをテーマに、Webブラウザの種類、HTMLレンダリングの種類について紹介しました。

Webプログラマーが「HTMLレンダリングエンジン」に直接関わる機会は非常に少ないと思いますが、私たちが開発したサイトが正しく表示され、ユーザの目を惹いているのは「HTMLレンダリングエンジン」のおかげです。**Webエンジニアは「HTMLレンダリングエンジン」についてしっかり把握しておきましょう。**

WebKitは、Apple社開発のオープンソースの「HTMLレンダリングエンジン」の名称で、同社のブラウザSafariで使われています。一方、ChromeにはHTMLレンダリングエンジンとしてBlinkが使われており、Webエンジニアはその違いを理解しておくことが求められます。

WebKitとは、Apple社が開発するオープンソースの「HTMLレンダリングエンジン」の名称

主要なHTMLレンダリングエンジンにはSafariで使われるWebKitとChromeのBlinkがある

ベンダープレフィックスはCSSのプロパティ拡張機能を各ブラウザに実装するための識別子

WebKitとは？HTMLレンダリングエンジンの役割や特徴を解説！

**2022年6月19日(現地時間)、Web技術のHTML・CSS・JavaScriptを使ってデスクトップアプリを作成できるフレームワークとして開発が進められている「Tauri」のバージョンが1.0に到達したことが、Tauriの公式ブログで発表されました。**9ヶ月のベータ版と4ヶ月のリリース候補版を経てバージョン1.0に達しました。

この記事では、Tauriを使ってみようと考えている方のために、Tauriの特徴や使用するメリット、先行する「Electron」との違いなどについて解説していきます。

【参考】：[Tauri 1.0 Release | Tauri Apps](https://tauri.app/blog/2022/06/19/tauri-1-0/)

*Tauriはオープンソースで開発されている、デスクトッププラットフォームのアプリケーションを開発するためのツールキットです。*Windows・iOS・Linuxなどのクロスプラットフォーム対応のデスクトップアプリを作成することができます。

同種のテクノロジーとして先行している「Electron」の優れた特徴を備えながら、さらに軽量で高い安全性を目指して開発されています。

Tauri開発者コミュニティでは、Tauri開発者が課題を提出したりワーキンググループに参加したり、寄付をするなど、Tauriの開発に貢献しています。

【参考】：[What is Tauri? | Tauri Apps](https://tauri.app/about/intro)
【参考】：[tauri/CONTRIBUTING.md at dev · tauri-apps/tauri · GitHub](https://github.com/tauri-apps/tauri/blob/dev/.github/CONTRIBUTING.md)

ここでは、Tauriが持つ特徴を紹介します。主な特徴としては、プログラミング言語としてRustを採用していること、クロスプラットフォーム対応、OS標準のブラウザでレンダリングすることなどが挙げられます。

### プログラミング言語「Rust」を使用する

TauriのメインプロセスはRustで作成します。*Rustは非常に高速でメモリ効率が良いことが特徴です。*また、ガベージコレクションがないためパフォーマンスが高く、メモリ安全性とスレッド安全性にも優れています。

また、Tauriのアプリケーションのバックエンドは、フロントエンドがやり取り可能なAPIを備えた、Rust製のライブラリ群で構成されます。

【参考】：[tauri - Rust](https://docs.rs/tauri/1.0.5/tauri/index.html)
【参考】：[Rustプログラミング言語](https://www.rust-lang.org/ja)

Rust 1.56.0最新バージョンがリリース！将来性がC超の理由

### クロスプラットフォーム対応

*Tauriは、Windows・macOS・Linuxに対応するクロスプラットフォームの開発が行えます。*

Rust製のライブラリの1つである「TAO」がクロスプラットフォームアプリケーションウィンドウ作成を担っています。「TAO」は上記のOS以外にiOS、Androidにも対応しており、Tauriも将来的にこれらのOSを搭載したモバイルに対応することが計画されています。

【参考】：[GitHub - tauri-apps/tao: The TAO of cross-platform windowing. A library in Rust built for Tauri.](https://github.com/tauri-apps/tao/#readme)

### OSが備えるWebView機能を利用する

Tauriは、レンダリングを行うためのレンダリングエンジンを同梱していません。*TauriはRust製クロスプラットフォームWebViewレンダリングライブラリの「WRY」を使用することにより、レンダリングをOS標準のブラウザで行うことができます。*

各OSのWebView機能として、WindowsではWebView2、macOSではWebKit、Linuxではgtk-rsを使用します。「WRY」の抽象化レイヤ経由でこれらを呼び出すことでOS間の差異を吸収し、クロスプラットフォームを実現するとともに、コンパクトで高速なユーザーインターフェースの構築が可能です。

【参考】：[GitHub - tauri-apps/wry: Cross-platform WebView library in Rust for Tauri.](https://github.com/tauri-apps/wry/#readme)

Electronは、Tauriに先行するWindows・macOS・Linuxのデスクトップアプリ開発フレームワークです。Visual Studio CodeやTwitchなど、大手企業が提供するアプリでElectronを採用しているものも多くあります。ここでは、TauriとElectronの違いを解説します。

【参考】：[Electron | JavaScript, HTML, CSSによるクロスプラットフォームなデスクトップアプリ開発](https://www.electronjs.org/)

大きな違いの1つは、使用するメインプロセスの記述言語です。**TauriはRustを使用しますが、ElectronはメインプロセスをJavaScriptで構築してNode.jsで実行しています。

**これによりHTML・CSSとJavaScriptでデスクトップアプリの開発ができるため、デスクトップアプリ開発の経験が少ないWebアプリエンジニアでも取り組みやすいというメリットがあります。

【参考】：[はじめに | Electron](https://www.electronjs.org/ja/docs/latest)

HTMLからJavaを動かせる？JavaScriptを動かす方法も解説

### ユーザーインターフェースのレンダリング方法

もう1つの違いとして挙げられるのは、ユーザーインターフェースのレンダリング方法です。

**TauriがOS標準のWebView機能でレンダリングするのに対し、Electronはレンダリングのために、Chromiumブラウザを丸々内蔵しているのが大きな特徴です。**ChromiumはGoogleChromeのベースとなったオープンソースのWebブラウザです。

Tauriを使用するメリットとして、Electronに比べてプログラムサイズを小さく抑えることができ、効率的で安全性が高い、という点があります。

### Tauriはプログラムサイズが小さい

Electronは、Node.jsとChromiumをアプリケーションにバンドルしますが、Tauriでは、アプリケーションにこれら2つを同梱する必要がありません。そのため、サイズが小さくなります。

*TauriのGitHubで示されているElectronとの比較表によると、Linux版のインストールサイズはElectronが52.1MBであるのに対し、Tauriは3.1MBで済むとされています。*

【参考】：[GitHub - tauri-apps/tauri: Build smaller, faster, and more secure desktop applications with a web frontend.](https://github.com/tauri-apps/tauri#comparison-between-tauri-and-electron)

### Tauriは効率的でパフォーマンスが高い

*Tauriはメモリの消費量も少なく、Linux版ではElectronのメモリ消費量が462MB、Tauriは180MBです。*また、起動時間もElectronが0.80秒、Tauriは0.39秒です。

また、TauriのブログではTauriの高パフォーマンスが環境に良い影響を与えると紹介しています。Tauriで作成されるアプリは無駄がなく高性能であるため、電力・ストレージのスペース・天然資源の消費が削減されるとし、アプリサイズが環境に与える影響に関する比較表を公開しています。

【参考】：[Tauri 1.0 Release | Tauri Apps](https://tauri.app/blog/2022/06/19/tauri-1-0/#environment)

Tauriを使うと、サーバーを使用してバックエンドと通信することなく、Web技術を利用したアプリケーションを構築することができます。*そのため、一般的なWebアプリと比べてTCPポートや外部プロセスで通信を盗聴することができません。*

また、Rustが持つメモリの安全性と速度は、従来型の攻撃を回避するのに役立ちます。また、開放したメモリに対してその脆弱性を突き、再びアクセス・実行することで悪用する「Use After Free」の脅威にさらされることがないとしています。

【参考】：[Security | Tauri Apps/no-server-required](https://tauri.app/about/security/#no-server-required)
【参考】：[Security | Tauri Apps/language-features-of-rust](https://tauri.app/about/security/#language-features-of-rust)

### WebView側の脆弱性対策が不要

もしもフレームワークがChromiumを組み込んでいると、Chromiumに何らかの脆弱性が見つかった場合、その脆弱性が修正されるのを待ってフレームワークも改修し、パッチを配布する必要があります。

*しかし、TauriはChromiumなどのブラウザを組み込んでいないため、ブラウザの脆弱性に関する対策を行う必要がありません。*アプリが使用するOSのWebView側で対策が行われれば、それで終了です。

## TauriでWebベースデスクトップアプリを構築しよう

ここまで、Tauriの特徴や使用するメリット、Electronとの違いについて解説してきました。大手企業にも採用されているElectronの優れた基本的な特徴を備えながら、さらに軽量化や安全性の向上を目指したTauriは、バージョン1.0に到達したことで、今後さらに注目を集めることは間違いありません。

**まだ使ったことがない方は、ぜひ1度試してみましょう。**

Web技術を使ってデスクトップアプリを作成できる「Tauri」がバージョン1.0に達しました。Rust言語を使用し、高いパフォーマンスと安全性を持つフレームワークとして注目されています。この記事では、Tauriを使ってみたい方のために、その概要や特徴、Electronとの違いを解説します。

TauriはWeb技術を活用してデスクトップアプリケーションを作成できるフレームワークである

TauriはRust言語を使用し、高いパフォーマンスと安全性が特徴

TauriはElectronの優れた特徴を備えながら軽量化・安全性向上を目指している

Tauri 1.0が正式リリース！概要や特徴、Electronとの違いを解説

2022年5月11日、GoogleはFlutter 3を正式リリースしました。Flutter for Windows 2.10に続いての安定版となり、*macOSとLinuxアプリでも安定版が提供されます*。発表はGoogle I/O 2022を通じて行われ、紹介動画も公開されています。
【参考】：[Flutter What’s new](https://docs.flutter.dev/whats-new)
【参考】：[Flutter May 11, 2022, Google I/O Edition: Flutter 3 release](https://docs.flutter.dev/whats-new#may-11-2022-google-io-edition-flutter-3-release)
【参考】：[Flutter  at Google I/O 2022](https://docs.flutter.dev/resources/videos#flutter-at-google-io-2022)

Flutterは、*Googleが開発したユーザーインターフェース用SDKです*。単一のコードをベースに、マルチプラットフォームのアプリケーション開発が可能なオープンソースソフトウェアとなります。今回のリリースは、macOSとLinuxのアプリにおいても安定版となりますので利用拡大が期待されます。
【参考】：[Flutter](https://flutter.dev/)
【参考】：[Introducing Flutter 3](https://medium.com/flutter/introducing-flutter-3-5eb69151622f)

日本でも、Flutterアプリ開発者コミュニティの「[Flutter Japan User Group](https://flutter-jp.connpass.com/)」や、Flutterエンジニアに特化した学習コミュニティ「[Flutter大学](https://flutteruniv.com/)」など、Flutterに関するコミュニティが存在しています。

“Flutter”だけでも食っていけます。『天才プログラマーKBOY』主宰の「Flutter大学」は陽キャ集団だった【前編】

*Flutterを用いたアプリはすでに50万以上リリースされています*。データ分析やファイナンス、Eコマースなど多岐に活用されています。デベロッパーには以下の特長が受け入れられていると考えられます。
【参考】：[Introducing Flutter 3](https://medium.com/flutter/introducing-flutter-3-5eb69151622f)

Flutterを用いることで、*ビルドから公開まで短期間に実装することができます*。高い生産性はホットリロード機能によりもたらされます。コード更新で状態がキープされ、ほぼ瞬時に変更が反映されます。構築期間短縮や反復作業の高速化が可能となります。

FlutterはIntelやARMのマシンコードや、JavaScriptにコンパイルすることで高速実行されます。主要デバイスでハイパフォーマンスに画面表示できるほか、*ピクセル全体を制御することでどの画面でも滑らかで見栄えのするカスタムデザインを作成できます*。

JavaScriptの入門！その概要や文法の基礎について解説！

Flutterでは、*Android・iOSに加えて、Windows・MacOS・Linux・ウェブアプリケーションのクロスプラットフォームで実行可能です*。そのためコード管理の一貫性を保ちながらメンテナンスできます。

2022年2月4日、Flutter for Windows 2.10がリリースされました。*Flutter 3はFlutter 2.10に続いてのリリースとなります*。ここではFlutter 2.10以降の追加機能と提供サービスについて紹介していきます。
【参考】：[What’s new in Flutter 3](https://medium.com/flutter/whats-new-in-flutter-3-8c74a5bc32d0)

実装に関する情報は、Release Notesに記載されています。詳細は以下リンクをご確認ください。
【参考】：[Flutter 3.0.0 release notes](https://docs.flutter.dev/development/tools/sdk/release-notes/release-notes-3.0.0)

### macOSとLinuxアプリの安定版対応

今回のリリースでは、*macOSとLinuxアプリが安定版としてサポートされます*。これまでのiOS・Android、そしてWindowsに加えてサポートOSが拡大しました。OSの機能を最大限利用し、共通のユーザーインターフェースとアプリケーションロジックで開発生産性向上と用途拡大が図られます。

### マテリアルデザイン 3のサポート

Googleが発表した、*最新のデザインガイドラインであるマテリアルデザイン 3（Material Design 3）に対応します*。ダイナミックカラーやカラースキームの統一を実現します。Android 12で導入された、タッチリップルデザインやストレッチオーバースクロール効果など新しい視覚効果が得られます。
【参考】：[Meet Material Design 3](https://m3.material.io/)

macOSでは、以下の改善が図られています。

・*メニューサポート*
macOSのカスケードメニューと システムメニューバーをサポートします。PlatformMenuBarウィジェットにより、macOSでプラットフォーム・レンダリングされたメニューバーを作成できます。プラットフォーム専用メニューや、アプリケーションメニューに表示される内容の制御ができます。

・*ユニバーサルバイナリサポート*
今回のリリースからmacOSデスクトップアプリは、ユニバーサルバイナリとしてビルドされます。既存のIntelベースのMacとAppleの最新のApple Siliconデバイスの両方をネイティブにサポートします。

### デスクトッププラットフォームでの多言語サポート

Windows、macOS、Linuxのデスクトッププラットフォームでは、*テキスト入力に多言語入力をサポートします*。IMEやサードパーティ入力メソッドに対応します。日本語入力についても、問題なく対応します。

### モバイルプラットフォームのサポート追加

*折りたたみ式モバイルフォンやデュアルディスプレイ型デバイスがサポートされます*。iOSでは可変リフレッシュレートがサポートされ、高速アニメーション表示がよりスムーズになります。またiOSでは、リリースを簡素化するためにビルドオプションが追加されています。

### ウェブアプリのアップデート

ImageDecoder APIのサポート有無を自動検出し、画像のデコード機能が使用できるようになります。*非同期で画像をデコードできるため、画像のデコード処理がおよそ2倍高速化されます*。lifecycle APIでは、ブートストラッププロセスを制御し、パフォーマンス分析に役立てることができます。

Androidデバイスでは、*部分的な再描画によりラスタライズ時間が短縮され、アニメーションパフォーマンスが向上します*。OpacityアニメーションについてもsaveLayerメソッドを省略可能にし、ラスタライズ時間を短縮します。

### ドキュメントサイトの充実化

Flutter 2.10以降、次のようなサイトが提供されています。今回のリリースに合わせて、活用するのが良いでしょう。

・*Casual Games Toolkit*
Flutterで簡単にゲームを作るためのCasual Games Toolkitが提供されます。ゲームで必要なメニューや音楽・広告・アプリ内課金の仕組みがテンプレート化されており、サンプルコードも公開されています。
【参考】：[Flutter Casual Games Toolkit](https://flutter.dev/games)
【参考】：[Flutter Docs Casual Games Toolkit](https://docs.flutter.dev/resources/games-toolkit)

・*Happy paths project*
Flutter開発者としてレベルアップするためのプロジェクトとして、Happy paths projectを立ち上げています。Happy pathsの推奨パッケージにより目標をガイドし、デベロッパーがより高度で大規模なアプリを作るためのガイダンスが提供されます。パッケージは、用途別に分類付けされ提供されます。【参考】：[Flutter Happy paths project](https://docs.flutter.dev/development/packages-and-plugins/happy-paths)

バージョンアップに伴い、以下の開発環境とターゲット環境のサポートが終了となります。

・*開発用Windows7および8*
マイクロソフト社のサポート終了に伴い、開発用Windowsはバージョンが引き上げられ、10以降が対応します。実行するFlutterアプリ自体のサポートは継続されます。

・*iOS*
Flutterの32ビット版iOSデバイスと、iOSバージョン9および10のサポートが終了となります。iPhone 4SやiPhone 5、iPadの第2世代・第3世代・第4世代のサポートは今回のリリースが最後の安定版となります。

Flutterは、Googleの開発したDartが中心的な言語ですので、*Dartを理解しておくのが良いでしょう*。C言語に近い構文のため、書きやすいという声があります。Dart公式サイトでは、ブラウザベースのコード実行環境が用意されていますのでインストールせずに簡単な確認をすることもできます。
【参考】：[Dart](https://dart.dev/)

Flutterは、*Windows・macOS・Linux・Chrome OSにインストールすることができます*。最新版は3.0.1です。各OSのインストール要件も掲載されていますので、事前にご確認ください。
【参考】：[Flutter Install](https://docs.flutter.dev/get-started/install)

インストールにより、Dartプラットフォーム・Flutterエンジン・基本ライブラリ・iOSとAndroid向けウィジェット・開発ツールが構成されます。

Docsには、概要から開発まで多くの情報が掲載されています。用途に応じて確認するのが良いでしょう。主な用途は以下の通りです。

・*Get started*
最初に確認する情報です。インストールやセットアップ、その後に最初のコード開発についてまとめてあります。
【参考】：[Flutter Get started](https://docs.flutter.dev/get-started/install)

・*Sample & tutorials*
FlutterのサンプルギャラリーやCookbook、Tutrialsが掲載されています。利用できそうなコンテンツがあるか確認してみましょう。
【参考】：[Flutter Tutrials](https://docs.flutter.dev/reference/tutorials)

・*Development*
ウィジェット概要やレイアウト設計やアニメーション等の、ユーザーインターフェイス開発手法が掲載されています。データ処理や国際化、パッケージ管理など全般がカバーされています。
【参考】：[Flutter Development Widgets](https://docs.flutter.dev/development/ui/widgets-intro)

上記の他、「Test & debugging」「Performance & optimmization」「Deployment」等の工程についても整理されています。

### パッケージマネージャの利用

*PubはDartプログラミング用パッケージマネージャで、Pub.devはGoogleがサポートしている公式リポジトリです*。サイトには、Flutter用ライブラリやパッケージが登録されています。登録されているパッケージを利用することもできますし、自身の開発したパッケージを公開することもできます。ホームページ用パッケージやCounter等、多数のライブラリやパッケージが登録されています。
【参考】：[pub.dev](https://pub.dev/)

## ユーザーインターフェイスの開発生産性を高めましょう

Flutterは、単一のコードをベースに、マルチプラットフォームのユーザーインターフェイス開発が可能です。モバイルデバイスは多様化・多機能化が進んでおり、デスクトップ環境とともにアプリケーションの幅も広がっています。ユーザーインターフェイスの開発生産性を高めるためにも、*開発フレームワークの利用は今後も重要になっていくでしょう*。

フレームワークの記事（6ページ目）