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)

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

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

GoogleのGCPについて知り、エンジニアのスキルに生かそう

Flutterは、Googleが開発したユーザーインターフェース用SDKです。2022年5月11日、Flutter 3がリリースされました。Windows版に続き、macOS・Linuxアプリの安定版となります。ここでは、概要と特長、新機能について解説していきます。

2022年5月11日、GoogleはFlutter 3を正式リリースしました

Flutter for Windows 2.10に続き、macOS・Linuxアプリの安定版となります

マルチプラットフォームをサポートし、見栄えのするユーザーインターフェイスを提供します

Flutter 3が正式リリース！概要と特長・新機能について解説

Laravel 9が2022年2月8日、正式リリースされました。*Laravel 8以降の修正内容を継続し、改善を続けています*。Laravel 8以降の見直しによりリリース周期は6か月から1年に延長され、開発チームの負担を抑えながら新機能搭載に取り組んでいます。
【参考】：[Laravel 9.0 Now Available!](https://blog.laravel.com/laravel-v9-released)

Laravelは、PHPで記述されたウェブアプリケーションフレームワークです。フルスタックのウェブアプリケーションフレームワークで、*バックエンドフレームワークとして人気があります*。3大バックエンドフレームワークとして、PHP用Laravel・Python用Django・Ruby用Ruby on Railsを指す場合もあります。

Laravelは、Symfonyのコンポーネントを利用してフレームワークの最適化を進めています。
【参考】：[Symfony](https://symfony.com/)
【参考】：[Laravel A framework project using Symfony components](https://symfony.com/projects/laravel)

LaravelとReactは相性抜群？導入手順やメリットを解説

PHPフレームワークLaravel入門！使い方や入門書も解説

Laravelのサポートポリシーは、製品リリース後の不具合修正を18カ月、セキュリティ修正を2年間提供します。Laravel 9は、2022年2月8日にリリースされましたので、*不具合修正は2023年8月8日まで実施されます。セキュリティ修正は2024年2月8日まで対応します*。
【参考】：[Support Policy](https://laravel.com/docs/9.x/releases#support-policy)

LTS（長期サポート）版は、現在リリースされているLaravel 6の不具合修正は2022年1月25日で終了しました。セキュリティ修正は2022年9月6日で終了予定です。2022年3月現在、今後のLTS版についてはまだ発表されていません。

Laravel 9では、*Release Notesにリリース情報が公開されています*。ここでは、Release Notes掲載情報からポイントをピックアップし解説していきます。
【参考】：[Release Notes](https://laravel.com/docs/9.x/releases)

まず最初に概要をお話しします。Laravel 9では、Symfony 6.0コンポーネント・Symfony Mailer・Flysystem 3.x・route:list出力の改善・Laravel Scoutデータベースエンジン、新しいEloquentアクセッサ／ミュータ構文・Enumによる、暗黙のルートバインド等が実装されます。詳細は以降でお話しします。

Laravel 9の新機能は？Laravel8.77からの機能リリース計画を解説！

### Laravel 9の主な新機能と変更点

Laravel 9の主な新機能と変更点は以下の通りです。

・*PHP*
Laravel 8ではPHP 7.3～8.1がサポートされていました。Laravel 9ではSymfony 6.0を用いるためPHP 8以降が必要で、8.0～8.1がサポートされます。

・*Symfony Mailer*
メール送信ライブラリが、以前のリリースで使用していたSwift MailerからSymfony Mailerに置き換わります。Swift Mailerのメンテナンス終了に伴う処置で、別途アプリケーションの互換性確認が必要です。

・*Flysystem 3.x*
Storageファサードが提供するファイルシステムのすべてのインタラクションが、Flysystem 3.xにアップグレードされます。アップグレードガイドに確認方法が記載されています。

・*route:list CLI Outputの改善*
route:listのCLI出力が大幅に見直され、ルート定義探索の際の表示が改善されます。

・*Laravel Scoutデータベースエンジン*
AlgoliaやMeiliSearchのような専用の検索サービスではなく、Scoutのデータベースエンジンを使用できます。「where like」句と全文インデックスを使用して、クエリに該当する検索結果をフィルタリングできます。

・*Eloquentアクセッサ／ミュータ構文*
従来では、モデルにプレフィックス付きのメソッドを定義する方法のみでしたが、単一の非プレフィックスのメソッドを使用して、アクセッサとミューテーターを定義することができます。

・*Enumによる暗黙のルートバインド*
PHP 8.1以降でEnumがサポートされることにLaravelが追従します。ルート定義で設定したURIに有効なEnum値の場合ルートを呼び出し、そうでない場合はHTTP 404を返します。

その他のアップデートには以下の項目が挙げられています。詳細につきましては、Release Notesをご確認ください。

・*EnumのEloquent属性Casting*
Enum castingは、PHP 8.1以降で利用可能です。モデルの$castsプロパティ配列に、キャストしたい属性とenumを指定することで、Enumにキャストすることが可能になります。

・*Forced scoped binding*
カスタムキー付きの暗黙のバインディングを、ネストされたルートパラメータとして使用する場合のサポートが追加されます。以前は子ルートバインディングにカスタムキーが使用された場合のみのサポートでした。今回、子ルートバインディングにカスタムキーの使用有無を問わずサポートされるよう改良されました。

・*Route groupの改善*
コントローラメソッドを使用するだけで、グループ内のすべてのルートに対して共通のコントローラを定義することが可能です。

・*フルテキストインデックスとWhere句*
fullTextメソッドをカラム定義に追加することで、フルテキストインデックスを生成できます。MySQLやPostgreSQLで利用可能です。whereFullTextやWhereFullTextメソッドを使用すれば、 フルテキストインデックスを持つカラムのWhere句をクエリに追加することができます。

・*Rendering Inline Blade Templates*
Bladeファサードが提供するレンダリングメソッドを使用し、Bladeテンプレート文字列を有効なHTMLに変換します。

・*スロット名のショートカット*
スロット名は、従来の<x-slot name="title">から<x-slot:title>に短縮することができます。

・*Checked and selected Blade directives*
@checkedと@selected指示語が、状態確認用に追加されました。

・*Bootstrap 5 Pagination Views*
Bootstrap 5で用いるビュー形式に、Tailwindの他にpaginationが追加されます。

・*ネスト配列データの検証の改善*
Rule::forEachメソッドが追加され、配列の要素に割り当てるルールの配列を受け取り、検証ルールを属性に割り当てます。

・*Laravel Breeze API & Next.js*
JavaScriptフロントエンドとLaravelバックエンドアプリケーションとの接続で用いる、Laravel Sanctum認証APIのジャンプスタートとして利用できます。

・*Ignition Exception Pageの改善*
Spatieが開発したオープンソースの例外デバッグページ、Ignitionが再設計されました。ライトやダークのテーマ変更、カスタマイズ可能な「エディタで開く」等を実装します。

・*Artisan testコマンドを用いたTest Coverage*
“php artisan test --coverage”により、コードカバレッジの量を調べることができます。

・*Soketi Echo Server*
Node.js用Laravel Echoに対応する、Web SocketサーバーSoketiの対応を支援します。独自のWeb Socketサーバーを管理したいアプリケーション開発の選択肢となります。

・*Improved Collections IDE Support*
genericの型定義が追加され、PHPStormなどのIDEやPHPStanなどの静的解析ツールで、Laravelのコレクションをネイティブ解釈できます。

・*ヘルパー関数の追加*
str関数とto\_route関数が追加されます。str関数は、Illuminate\Support\Stringableインスタンスを返します。Str::ofと同等です。to_route関数は、指定したルートに対するリダイレクトHTTPレスポンスを生成します。

Laravel 9のバージョンアップにおいては、*アプリケーションの依存関係を事前に確認する必要があります*。Flysystemが1.xから3.xにバージョンアップされますので、影響を事前に確認しておきましょう。Symfony MailerもSwift Mailerから置き換わりますので、事前確認が必要です。
【参考】：[Laravel Upgrade Guide](https://laravel.com/docs/9.x/upgrade)

可能であれば、既存環境はそのままに別のシステムをLaravel 9用に構築し、影響を調査するのが良いでしょう。

Laravelは*Dockerを使用してLaravelプロジェクトを実行することを想定しています*。そのためのコマンドラインインターフェースであるLaravel Sailを用います。PHP・MySQL、Redisを使用したLaravelアプリケーションに対応します。
【参考】：[Laravel Sail](https://laravel.com/docs/9.x/sail)

Laravel 9のAPIは以下のドキュメントに詳細情報が記載されていますので、必要に応じてご確認ください。
【参考】：[Laravel API Namespaces](https://laravel.com/api/9.x/)

Laravel 9を使うには、インストールが必要です。その前に*Laravelの動作環境で必要となるDockerを準備しておきます*。
【参考】：[Laravel Installation](https://laravel.com/docs/9.x/installation)

DockerはMacOSやWindowsの場合、Docker Desktopを用いることで簡単に構築できます。Docker DesktopのインストールはDocker社のサイトから行います。
【参考】：[Docker Desktop](https://www.docker.com/products/docker-desktop/)

Windowsの場合は、Windows Subsystem for Linux 2（WSL2）を利用します。WSLをインストール後、Docker Desktopをバックエンド設定します。
【参考】：[WSL のインストール](https://docs.microsoft.com/ja-jp/windows/wsl/install)
【参考】：[Docker Desktop WSL 2 backend](https://docs.docker.com/desktop/windows/wsl/)

Linuxの場合は、Docker Composeをインストールしておきます。
【参考】：[Install Docker Compose](https://docs.docker.com/compose/install/)

実際の操作例として、exampleディレクトリに新しいLaravelアプリケーションを作成する場合、ターミナルで以下のコマンドを実行します。
```curl -s "https://laravel.build/example" | bash```

プロジェクト作成後、Laravel Sailを起動します。
```cd example
 ./vendor/bin/sail up```

Dockerコンテナが起動したら、Webブラウザで”http\://localhost”からアプリケーションにアクセスすることができます。

Laravel9の構築設定については、以下のリンクをご確認ください。
【参考】：[Laravle Configuration](https://laravel.com/docs/9.x/configuration)

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