株式会社INTSへようこそ

Month: October 2021

Flutterの基本：最初のアプリプログラミング（第一部）

Flutterは、モバイルだけでなく、Web、組込システム、デスクトップアプリなどの他のプラットフォームでも開発が益々進んでいます。Flutterを学ぶ時間が現在限りです。！ 最初のアプリの作成を開始する事より良いことは何ですか？それでは、すぐに始めましょう！ 環境設定 この投稿シリーズでは、EditorとしてVisual Studio Codeを使用しています。どんなeditorでも使用できます。Flutter SDKがPCにインストールされていることを確認しましょう。また、Emulatorまたは任意のAndroidデバイスでアプリを実行出来るようにAndroid Studioをインストールする必要があります。macOSを使用している場合は、iOSシミュレーターまたは実際のiOSデバイスでFlutterアプリを実行するようにXCodeを設定することもできます。 我々のデモアプリ ここでは、Flutterとそのwidgetのいくつかにすばやく慣れるために、デモシングルページアプリケーション（単一画面のアプリ）を構築します。デモアプリは次のようになります、 これは、アプリバーとボタンにテキストを表示するために構築するとても簡単なアプリです。ボタンをクリックすると、背景色が変わります。 アプリの初期化 新しいアプリケーションを初期化するには、terminal/consoleでディレクトリパスを指定し、以下のコマンドを使用します、 または、Android StudioまたはVS Codeコマンドパレットから新しいFlutterプロジェクトを作成することもできます。 プロジェクトフォルダの構造 最初のアプリの作成を開始する前にプロジェクトフォルダの構造をざっと目を通しておきましょう。 フォルダー「android」 このフォルダーには、Androidアプリケーションのすべてのプロジェクトファイルがあります。ここで変更を加えたり、必要な権限とAndroidのネイティブコードを追加したりできます。 フォルダー「build」 このフォルダーには、アプリバンドル、apkファイル、その他の関連ファイルやフォルダーなど、コンパイルされたすべての出力が含まれます。 フォルダー「ios」 このフォルダーには、iOSアプリのすべてのネイティブコードがあります。androidフォルダーと同様に、ここで必要な権限を追加し、iOSのネイティブコードを追加できます。 フォルダー「lib」 libフォルダーに、main.dartファイルがあります。 このフォルダーに記述されているすべてのdartコードは、コンパイル時にネイティブプラットフォームコード（ネイティブAndroidとiOS）にコンパイルされます。 フォルダー「test」 このフォルダーには、Flutterアプリケーションのunit testを記述できます。 ファイル「.gitignore」 プロジェクトのバージョン管理システム(version control)としてGITを使用している場合は、このファイルに精通していると思います。 GITに制御させたくない、変更を追跡させたくないファイルとフォルダーは、このファイルで宣言されます。 ファイル「pubspec.lock」と「pubspec.yaml」 このファイルには、必要なすべてのパッケージ名、それのバージョン、内容へのリンク、ディペンデンシーズ、アプリ名、アプリのバージョン、アプリのディペンデンシーズなどが含まれています。 ファイル「README」 これは、アプリケーションに関するすべての基本情報と記述を含むマークダウンファイルです。 エミュレーター/実際のデバイスでアプリを実行します アプリを実行するには、既存のAndroidエミュレーターまたはiOSエミュレーターを作成または開いてみてましょう。ibフォルダーとmain.dartファイルを開き、F5を押してアプリケーションを実行します。 VSコードエディターにflashingとdartの拡張機能がインストールされている場合は、main.dartファイルのvoid main（）関数にマウスオーバーするとRun | Debugオプションが表示されます。  アプリを実行すると、基本的なFlutterアプリが自動的に生成されます。 main.dartファイルは、Flutterアプリケーションのエントリポイントです。 いかなるFlutterアプリケーションの実行は、void main（）{…}から始まります。 これから、すべてを削除して、アプリケーションを最初から始めましょう。 アプリケーションをビルドします。 main.dartファイルのコードを削除しました。 次のようにアプリの作成を再開しましょう。 パッケージのインポート まず、必要なパッケージをインポートする必要があります。このアプリケーションでは、Flutterに提供されるmaterialパッケージが必要です。すべてのウィジェットと関数は、このパッケージに基づいて構築されています。 次のコマンドでこのパッケージをインポートできます。 アプリケーションで他のパッケージを追加する必要がある場合、コマンドは上記と同じ、パッケージ名を変更するだけです。 ここまで第一部は終わりです。この記事の第二部でお会いしましょう!

Read More
  • admin
  • October 09, 2021
  • No Comments

基本的なFlutter：Dartについて理解する （第二部）

第一部はこちら Objects Dartのすべてがオブジェクトです！ nullを含むすべてのオブジェクトは、あるクラスのインスタンスであり、これらのクラスのすべてはオブジェクトクラスから継承します。これを確認するために、isの演算子とis!の演算子を使用して、オブジェクトがインスタンスであるかクラスのタイプであるか確認出来ます。以下の例を見てみましょう。 上記のコードの結果は以下の通りです。 したがって、DartでのすべてがObjectであり、classの名前が識別子データ型 (Data Type Identifier)であることがはっきりとわかります。上記の例での$の演算子はdynamicデータを文字列に入れるために使用されています。マルチレベル値の場合、$ {person.name}または$ {77.99はdouble}のように{}とともに$を使用します。Single valueまたは変数を使用する場合は、「私の名前は$ name」のように、{}なしでプレーンな$を使用できます。ここで、nameは変数です。 Classes(クラス) 他のオブジェクト指向プログラミング言語と同様に、classはDartのコア機能です。Classはオブジェクトの仕様を定義できます。クラスには、UpperCamelCase命名規則に従って名前を付ける必要があります。Classの内で、Objectがどのように表示されるかを定義します。 データ間のより複雑な関係を表現したい場合、または特定の機能を単一のビルディングブロック (one building block)にカプセル化したい場合は、通常、独自のクラスを作成します。 上記のコードの結果は以下の通りです。 2つのinstance変数（class-level）を持つProductという名前のclassがあります。instance変数という意味はいくつかの値で初期化するclass内の変数です。 ここでは、dart type-inferenceのため、varを使用して変数を定義しています。Dartは、var型の変数に割り当てられた値型を自動参照することについて便利です。 次に、main（）{…}関数でProduct というclassを使用する2つの新しいObjectsを作成します。objectName.instanceVariableNameのようにドット「.」を使用してclass / instance変数にアクセスできます。例えば、product1.nameです。これらの変数に新しい値を割り当てることもできます。 Dartでprivate変数を宣言するには、_descriptionのようにinstance変数名の前に_を使用します。これにより、変数がprivateになり、class外でアクセスできなくなります。そして、Lists、Maps、const、finalを見てみましょう。 Final とconst Dartであるconstおよびfinalのようなキーワードは、固定値変数を作成するために使用されます。それでは、違い点は何でしょうか？ Constはコンパイル時定数(compile-time constant)を提供します。つまり、constはプログラミングのコンパイル中で、constの値を宣言する必要があります。それに対して、finalは実行時定数(runtime constant)であり、プログラムの実行中にその値を割り当てることができることを意味します。 よく理解するために、以下の例を見てみましょう。 上記の例のように、PIの値はコンパイル時に認識されます。しかし、square_7の値はコンパイル時に認識されいなく、実行時に計算されます。これは、final（実行時定数）とconst（コンパイル時定数）の主な違い点です。 Dartのリスト 他のプログラミング言語のArraysと同様に、Dartは、固定数の類似またはdynamicのデータ型の変数のいずれかを保持できるArraysのようなデータ構造を構築するためにリストというclassを提供します。Dartには、リストの作成するための［］の構文もあります。 固定的なリスト 固定長であるリストは、その長さを指定することで宣言できます。例えば： List <dynamic>は、9文字の長さのリストを作成します。リストはジェネリック型であるため、リスト内の要素のデータ型は<>内のキーワードによって確定されます。最初の件では、リストの長さは9で、要素のデータ型はdynamicです。そして、2番目の件では、リストの長さは7で、要素のデータ型はstringです。 動的なリスト(Growable lists) 動的リスト (Growable lists)という意味はList（）の初期化方法で引数又は値なしで定義されたリストです。以下の例を見てみましょう。 Maps Python辞書またはJavaScriptのリテラルのobjectに精通している場合、Dartのmapsも同様です。基本的に、mapsはkey-valueのペアのコレクションです。 Dartには、mapの作成に使用されるMap classがあります。Mapには、どんなタイプのkeyとvalueを含めることができます。 次の例を見てみましょう。 ここで、1、2、3、4、5はインデックスではなくkeysです。Printステートメントは、次の結果を出します。 Mapの上の.entriesプロパティからアクセスすることで、mapのアイテムを反復処理できます。 上記はDartに関する知識です。Dartがどのように機能するかをより明確にご理解いただくことを願っています。シリーズの次回の記事でお会いしましょう。

Read More

基本的なFlutter：Dartについて理解する （第一部）

より複雑なロジックコードを書けるプログラミング言語であるDartの基本を調べましょう。 変数とデータ型 Dartは、静的にデータ型(static typed)を持つオブジェクトを向く言語です。初期化の時に値が割り当てられていない変数はデフォルトでnull値があります。変数を宣言する時、またはプログラミングの何時でも、変数にnull値を割り当てることもできます。  基本的なデータ型 int, double, bool, String はDartの基本的なデータ型です。変数の存続期間中は、最初に定義されたデータ型でのみ使用されます。異なるデータ型を割り当てようとすると、コンパイルエラーが発生します。 infinity値はdouble classのstaticプロパティであり、double.infinityを使用してアクセスできます。 Varキーワード  var型で宣言された変数に任意の値を割り当てることができ、Dartは初期化値からデータを自動的に推論します。 型推論(Type-inference)はDartの組み込み機能です。 Num データ型 numキーワードはdartの中にもあり、intとdoubleの両方を持つ変数を作成できます。 ユースケースは、変数がいつでもint型またはdouble型の値を保持できる場合です。 文字列 (String) 文字列は、Javascriptと同様に、一重引用符‘ ‘または二重引用符 ” “を使用して宣言できます。 一重引用符”’または二重引用符“でも1行を複数行のコードに分割することもできます。 動的データ型(dynamic) dynamicキーワードを使用してdynamic変数を明示的に宣言することができます。又は、データ型が明示的に宣言されていない場合にdartで自動的に割り当てることができます。 注意 常にdynamicデータ型を注意して使用し、できるだけ頻繁にデータ型を明示的に宣言してください。 そうしないと、コードにバグが発生する可能性があります。 注意：自分が何をしているかがよくわかっている場合だけにdynamicを使用します。 機能 (function) Dartはtyped languageです。つまり、Dartの中に（関数も含む）何でも型(type)があります。 以下のmain関数の例を参照しましょう。 Main関数 この関数の戻り型はvoidです。 Dartは、アプリの起動時に自動的にmain（）{…}を呼び出します。 これは、このmain関数が呼び出されたときに実施される単純なforループです。 一般に、任意の関数に任意の名前を付けることができますが、mainはDartアプリの起動点であるため、特別な名前です。 注意 関数に名前を付けるには、camel-caseの規則に従う必要があります。つまり、yourFunctionName(){}です。 関数(function)の使い方 関数の機能を確定する 以上の説明の通りに、camel-caseで関数を定義し、名前を付けることができます。 関数から値を返す場合は、関数の戻り型を宣言する必要があります。 強行ではありませんが、実行しない場合、Dartはエラーを出さずに警告を表示するとともに実行します。 戻り型がある場合と戻り型がない場合の関数のこの例を見てみましょう。 これから、最初の関数addTwoNumbers(…){…}について考えてみましょう。 この関数には、明示的に宣言された戻り型と引数型はありません。 それで、以下のようにDartは語法を解析し、この関数を実施します。 Dartは、dynamic型を関数と引数に自動的に割り当てます。 この関数の引数としてどんなデータ型を渡すことができ、dartはそれを追加しようとします。 ただし、この関数宣言する方法はエラーが発生しやすくなります。理由はint型とbool型を追加できる時に、コンパイルエラーではなく、ランタイムエラーが発生します！ 2番目の関数void addTwoIntegerNumbers(int num1, int

Read More