フロントエンドのWeb開(kāi)発からフラッター開(kāi)発に変身しますか？この記事では、私の経験を共有して、移行を簡(jiǎn)単にするのに役立ちます。両方に共通する概念と、フラッターで學(xué)ぶための新しい概念を指摘します。そのため、どのエコシステムを選択するかを心配する必要はもうありません。

一般的な概念

このセクションでは、フロントエンドのWeb開(kāi)発とFlutterの類(lèi)似點(diǎn)と、すでに持っているスキルがどのようにFlutterをより速く開(kāi)始するのに役立つかをリストします。

1。ユーザーインターフェイス（UI）実裝

フロントエンドのWeb開(kāi)発では、HTML要素を使用してUIを構(gòu)築し、CSSでスタイリングします。 Flutterでは、ウィジェットを使用してUIを構(gòu)築し、プロパティでスタイリングします。

DARTのColorクラスは、CSSのような「RGBA」および「ヘックス」カラー値をサポートしています。フラッターは、CSSなどのスペースおよびサイズユニットとしてピクセルを使用します。

フラッターは、ほぼすべてのCSSプロパティとその値に対応するDARTクラスと列挙を提供します。

• BorderRadius
• BoxShadow
• FontWeight
• Opacity
• Padding
• …

FlutterのColumnとRowウィジェットはdisplay: flex in CSSに相當(dāng)します。 MainAxisAlignmentおよびCrossAxisAlignmentプロパティはjustify-contentとalign-itemsスタイルに対応しています。 flex-growスタイルを調(diào)整するには、対応する子供ウィジェットをExpandedまたはFlexibleで包むことができます。

複雑なUIの場(chǎng)合、FlutterはWeb開(kāi)発のCanvas APIに相當(dāng)するCustomPaintクラスを提供します。 CustomPaint使用すると、任意のUIの描畫(huà)をカスタマイズできます。通常、 CustomPaint 、非常に複雑なUIまたはウィジェットの組み合わせで不可能な効果を?qū)g裝する必要がある場(chǎng)合に使用されます。

2。マルチスクリーン解像度の適応

ウェブサイトはブラウザで実行され、モバイルアプリはデバイスで実行されます。開(kāi)発プロセス中に、プラットフォームの違いを考慮する必要があります。各プラットフォームは、同じ機(jī)能（カメラ、位置決め、通知など）をさまざまな方法で実裝します。

Web開(kāi)発者として、Webサイトのレスポンシブデザインに精通しており、メディアクエリを使用して、さまざまな畫(huà)面サイズでWebサイト表示効果を処理できます。

Flutterでは、 MediaQueryクラスは同様の機(jī)能を提供します。デバイスの向き（ランドスケープまたはポートレート）、ビューポートサイズ、 devicePixelRatioなどのデバイス情報(bào)を取得でき、さまざまな畫(huà)面サイズに従ってアプリケーションのUIを調(diào)整することができます。

3。デバッグツール、編集者、コマンドラインツール

デスクトップブラウザには、検査官、コンソール、ネットワーク監(jiān)視などの開(kāi)発者ツールがあり、これがWeb開(kāi)発の効率を向上させます。フラッターには、ウィジェットインスペクター、デバッガー、ネットワーク監(jiān)視、その他の機(jī)能など、獨(dú)自の開(kāi)発者もあります。

IDEサポートは似ています。 Visual Studioコードは、多くのWeb関連の拡張機(jī)能を備えた人気のあるWeb開(kāi)発IDEです。 Flutterは、VSコードとAndroid Studioもサポートしています。どちらもFlutter Devtoolsをサポートし、Flutterのツールチェーンを非常に完璧にします。

ほとんどのフロントエンドJavaScriptフレームワークには、次のようなコマンドラインインターフェイス（CLI）が付屬しています。AngularCLI、Create React App、Vue CLIなどフラッターには、フラッタープロジェクトの構(gòu)築、作成、開(kāi)発、およびコード分析とテストの実行に関する獨(dú)自のCLIもあります。

新しいコンセプト

このセクションでは、Flutterに固有の概念を紹介します。これは、Web開(kāi)発には存在しないか、さまざまな方法で実裝されています。

1。スクロール処理

Web開(kāi)発では、デフォルトのスクロール動(dòng)作はブラウザによって処理され、CSS（ overflowプロパティなど）を使用してスクロールをカスタマイズできます。

しかし、フラッターでは、ウィジェットグループはデフォルトでスクロールしません。ウィジェットグループがオーバーフローする場(chǎng)合は、スクロールを積極的に構(gòu)成する必要があります。

Flutterは特別なウィジェットを使用して、 ListView 、 SingleChildScrollView 、 CustomScrollViewなど、スクロールを構(gòu)成します。これらのスクロール可能なウィジェットは、スクロール挙動(dòng)を粒狀制御します。 CustomScrollView使用すると、複雑で専門(mén)的なスクロールメカニズムを構(gòu)成できます。

フラッターでは、 ScrollViewの使用は避けられません。 AndroidとiOSには、スクロールを処理するために、それぞれScrollViewとUIScrollViewがあります。フラッターには、レンダリングと開(kāi)発者エクスペリエンスを統(tǒng)合する方法が必要であるため、 ScrollViewも使用します。

考え方を変えて、ドキュメント構(gòu)造の流れについて考えるのをやめてください。ただし、アプリケーションはデバイスのネイティブ描畫(huà)メカニズムのオープンキャンバスと考えてください。

2。開(kāi)発環(huán)境構(gòu)築

簡(jiǎn)単なWebサイトを作成するには、 .htmlファイルを作成してブラウザで開(kāi)くだけです。フラッターははるかに複雑です。フラッターSDKをインストールし、テストデバイス用のフラッターを構(gòu)成する必要があります。 Android用のフラッターアプリを開(kāi)発する場(chǎng)合は、Android SDKをセットアップし、少なくとも1つのAndroidデバイス（エミュレーターまたは物理デバイス）を構(gòu)成する必要があります。

同じことがiOSデバイス（iOSおよびmacOS）についても當(dāng)てはまります。 MacにFlutterをインストールした後、Xcodeを設(shè)定する必要もあります。フラッターアプリをテストするには、少なくとも1つのiOSシミュレーターまたはiPhoneも必要です。デスクトップフラッターの設(shè)定も非常に複雑です。 Windowsでは、Visual Studioを使用してWindows Development SDKをセットアップする必要があります（VSコードではありません）。 Linuxでは、より多くのパッケージをインストールする必要があります。

フラッターは、追加の設(shè)定に頼らずにブラウザで実行されます。したがって、ターゲットデバイスの追加設(shè)定を無(wú)視する場(chǎng)合があります。ただし、ほとんどの場(chǎng)合、モバイルアプリ開(kāi)発にFlutterを使用するため、AndroidまたはiOS環(huán)境をセットアップする必要があります。 Flutterは、開(kāi)発環(huán)境の設(shè)定ステータスを報(bào)告するためにflutter doctorコマンドを提供して、必要な設(shè)定を理解するのに役立ちます。

しかし、これは、フラッターの発達(dá)が遅いことを意味するものではありません。 Flutterには強(qiáng)力なエンジンがあり、 flutter runコマンドにより、エンコード中にテストデバイスにホットリロードが可能になります。ただし、Rを押してホットリロードを?qū)g行する必要があります。 FlutterのVSコード拡張機(jī)能により、ファイルが変更されたときに自動(dòng)ホットリロードが可能になります。

3。パッケージングと展開(kāi)

ウェブサイトの展開(kāi)は、モバイルアプリを展開(kāi)するよりも安価で簡(jiǎn)単です。 Webサイトを展開(kāi)する場(chǎng)合、通常は年間更新が必要ですが、必要ありませんが、ドメイン名を介してアクセスできます。

多くのプラットフォームでは、 .ondigitalocean.comなどの無(wú)料のホスティングサービスを提供しています。これらのドメイン名を使用して、ブランディングに焦點(diǎn)を當(dāng)てていないWebサイトまたはWebサイトを作成できます。

Flutterのモバイルアプリケーション開(kāi)発では、通常、アプリケーションを2つのプラットフォームに展開(kāi)する必要があります。

• App Store（iOSデバイス）
• Google Play（Androidデバイス）

通常、各プラットフォームに開(kāi)発者アカウントを登録する必要があります。通常、料金またはサブスクリプションと認(rèn)証が必要です。

App Storeでは、Apple開(kāi)発者プログラムにサインアップし、年間99ドルのサブスクリプション料金を支払う必要があります。 Google Playには、25ドルの1回限りの登録料が必要です。

これらのアプリストアは、アプリがオンラインになる前にレビューします。

さらに、ユーザーはアプリの更新を自動(dòng)的に取得するわけではなく、インストールされたアプリを手動(dòng)で更新する必要があります。これは、Web上のユーザーがWebサイトの最新バージョンを自動(dòng)的に表示できるWebとは異なります。

展開(kāi)されたアプリケーションの管理は、展開(kāi)されたサイトを管理するよりも比較的面倒です。ただし、これは、これらのストアに何百萬(wàn)ものアプリがすでに展開(kāi)されていることを怖がらせるべきではありません。

フラッターに関する追加の考え

Flutterは、デスクトップ、モバイル、またはWebアプリケーションを構(gòu)築するためのクロスプラットフォームツールです。フラッターアプリケーションにはピクセルレベルの精度があり、各プラットフォームで同じUIをレンダリングします。各フラッターアプリケーションには、フラッターUIコードをレンダリングし、ターゲットプラットフォームと通信してイベントとインタラクションを処理するフラッターエンジンが含まれているためです。

フラッターは効率的であり、DARTの機(jī)能を構(gòu)築して活用するため、うまく機(jī)能します。

多くの利點(diǎn)があるため、フラッターは多くのアプリケーションに最適です。クロスプラットフォームアプリケーションは、生産とメンテナンス中のお金と時(shí)間を節(jié)約します。ただし、フラッター（およびクロスプラットフォームソリューション）は、場(chǎng)合によっては最良の選択ではない場(chǎng)合があります。

ユーザーにプラットフォーム開(kāi)発者ツールを使用してアプリケーションと対話(huà)する場(chǎng)合は、Flutterを使用しないでください。ここのプラットフォーム開(kāi)発者ツールは、Android開(kāi)発者オプションやブラウザー開(kāi)発者ツールなどのデバイス固有のツールを參照しています。

ブラウザ拡張機(jī)能がWebサイトと対話(huà)することを期待する場(chǎng)合は、Web開(kāi)発にFlutterを使用しないでください。

さらに、Flutterをコンテンツが豊富なWebサイトに使用しないでください。

結(jié)論は

この記事では、フロントエンドのWeb開(kāi)発からFlutter開(kāi)発へのスキル移転、および學(xué)習(xí)する必要がある新しいアプリケーション開(kāi)発の概念をレビューします。

Flutterは、Web開(kāi)発者がUIの実裝を伴うため、Web開(kāi)発者にとっては比較的簡(jiǎn)単です。 Flutterを試してみると、開(kāi)発者エクスペリエンスが提供されることがわかります。フラッターでモバイルアプリを構(gòu)築してみて、結(jié)果を紹介してください！

以上がフロントエンドのWeb開(kāi)発者向けのフラッターの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。