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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1762420/e3aeacfe-b4ae-66c5-438f-6b162a0372fd.png)

<p>より複雑なロジックコードを書けるプログラミング言語である<strong>Dart</strong>の基本を調べましょう。</p>

<!-- wp:heading {"level":3} -->
<h3><strong>変数とデータ型</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Dartは、静的にデータ型(static typed)を持つオブジェクトを向く言語です。初期化の時に値が割り当てられていない変数はデフォルトで<span class="has-inline-color has-pale-pink-color">null</span>値があります。変数を宣言する時、またはプログラミングの何時でも、変数に<span class="has-inline-color has-pale-pink-color">null</span>値を割り当てることもできます。 </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>基本的なデータ型</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><span class="has-inline-color has-pale-pink-color">int, double, bool, String </span>はDartの<strong>基本的</strong>なデータ型です。変数の存続期間中は、最初に定義されたデータ型でのみ使用されます。異なるデータ型を割り当てようとすると、<strong>コンパイルエラー</strong>が発生します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><span class="has-inline-color has-pale-pink-color">infinity</span>値は<span class="has-inline-color has-pale-pink-color">double </span>classのstaticプロパティであり、<span class="has-inline-color has-pale-pink-color">double.infinity</span>を使用してアクセスできます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong><span class="has-inline-color has-pale-pink-color">Var</span>キーワード </strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><span class="has-inline-color has-pale-pink-color">var</span>型で宣言された<strong>変数</strong>に任意の値を割り当てることができ、Dartは<strong>初期化値</strong>からデータを自動的に推論します。 型推論(Type-inference)はDartの組み込み機能です。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong><span class="has-inline-color has-pale-pink-color">Num</span> データ型</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><span class="has-inline-color has-pale-pink-color">num</span>キーワードはdartの中にもあり、<span class="has-inline-color has-pale-pink-color">int</span>と<span class="has-inline-color has-pale-pink-color">double</span>の両方を持つ変数を作成できます。 ユースケースは、変数がいつでも<span class="has-inline-color has-pale-pink-color">int</span>型または<span class="has-inline-color has-pale-pink-color">double</span>型の値を保持できる場合です。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>文字列 (String)</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>文字列は、<strong>Javascript</strong>と同様に、一重引用符<span class="has-inline-color has-pale-pink-color">' '</span>または二重引用符 <span class="has-inline-color has-pale-pink-color">" "</span>を使用して宣言できます。 一重引用符<span class="has-inline-color has-pale-pink-color">'''</span>または二重引用符<span class="has-inline-color has-pale-pink-color">"</span>でも1行を複数行のコードに分割することもできます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong><span class="has-inline-color has-pale-pink-color">動的</span>データ型(<span class="has-inline-color has-pale-pink-color">dynamic</span>)</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><span class="has-inline-color has-pale-pink-color">dynamic</span>キーワードを使用して<span class="has-inline-color has-pale-pink-color">dynamic</span>変数を明示的に宣言することができます。又は、データ型が<strong>明示的</strong>に宣言されていない場合にdartで自動的に割り当てることができます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><em>注意</em></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em>常にdynamicデータ型を注意して使用し、できるだけ頻繁にデータ型を明示的に宣言してください。 そうしないと、コードにバグが発生する可能性があります。 </em><strong><em>注意</em></strong><em>：自分が何をしているかがよくわかっている場合だけに<span class="has-inline-color has-pale-pink-color">dynamic</span>を使用します。</em></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>機能 (function)</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Dartは<strong>typed language</strong>です。つまり、Dartの中に（関数も含む）何でも<strong>型</strong>(type)があります。 以下の<span class="has-inline-color has-pale-pink-color">main</span>関数の例を参照しましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><span class="has-inline-color has-pale-pink-color">Main</span>関数</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://lh5.googleusercontent.com/yTCuGXsk7Gr1JnXEVJKGGHc6g6-03TsCSkRLTzRMDLvrtGr_7yNT4hHn5ygNUCsNXsXD-nfmyapI7YJFuRwW-zHoe3wUo2r29cUe80shbIogX5lkZ8uPqG9jv1vmVw=s0" alt=""/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong><br></strong>この関数の戻り型は<span class="has-inline-color has-pale-pink-color">void</span>です。 Dartは、アプリの起動時に自動的に<span class="has-inline-color has-pale-pink-color">main（）{...}</span>を呼び出します。 これは、この<span class="has-inline-color has-pale-pink-color">main</span>関数が呼び出されたときに実施される単純なforループです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>一般に、任意の関数に任意の名前を付けることができますが、<span class="has-inline-color has-pale-pink-color">main</span>はDartアプリの<strong>起動点</strong>であるため、特別な名前です。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>注意</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>関数に名前を付けるには、camel-caseの規則に従う必要があります。つまり、<span class="has-inline-color has-pale-pink-color">yourFunctionName(){}</span>です。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>関数(function)の使い方</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>関数の機能を確定する</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>以上の説明の通りに、camel-caseで関数を定義し、名前を付けることができます。 関数から値を返す場合は、関数の戻り型を宣言する必要があります。 強行ではありませんが、実行しない場合、Dartはエラーを出さずに警告を表示するとともに実行します。 戻り型がある場合と戻り型がない場合の関数のこの例を見てみましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://lh3.googleusercontent.com/zjgtCTVsTw4y9jHs-Yrc29ZIP5taUL3DdZrFdzob5t8e3n_VNXs3X2Bfs105bVs2zSKcU0asKT3HBFRNFQk06gFenrI71-5xnE-Iqq9kr2M-N_LRfVoV_xNMaZhfgQ=s0" alt=""/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>これから、最初の関数<span class="has-inline-color has-pale-pink-color">addTwoNumbers(...){...}</span>について考えてみましょう。 この関数には、明示的に宣言された戻り型と引数型はありません。 それで、以下のようにDartは語法を解析し、この関数を実施します。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://lh3.googleusercontent.com/GdVNs3NqMr9eT7QhgzJy_Xxupy8CSgLQL0DJCeEC76JcNmSYpZcukajNHsvwCoIN2JzhY-vXt-D6IYX-KTNvnBCeSlPIMFgEaQFKyVwT0pDlWobf05HUf_LdWsx-6Q=s0" alt=""/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Dartは、<span class="has-inline-color has-pale-pink-color">dynamic</span>型を関数と引数に自動的に割り当てます。 この関数の引数としてどんなデータ型を渡すことができ、dartはそれを追加しようとします。 ただし、この関数宣言する方法は<strong>エラーが発生</strong>しやすくなります。理由は<span class="has-inline-color has-pale-pink-color">int</span>型と<span class="has-inline-color has-pale-pink-color">bool</span>型を追加できる時に、コンパイルエラーではなく、ランタイムエラーが発生します！</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2番目の関数<span class="has-inline-color has-pale-pink-color">void addTwoIntegerNumbers(int num1, int num2){...}</span>は、<span class="has-inline-color has-pale-pink-color">void</span>と<span class="has-inline-color has-pale-pink-color">int</span>の戻り型と引数型を明示的に宣言しているため、エラーが発生し難くなっています。この関数に intではないデータを渡すと、すぐにコンパイラーはあなたに<strong>警告</strong>が出されます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>3番目の関数<span class="has-inline-color has-pale-pink-color">int sumOfTwoNumbers(int num1, int num2){...}</span>ですが、関数から返すため、戻り型がsum代わりに<span class="has-inline-color has-pale-pink-color">int</span>です。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><span class="has-inline-color has-pale-pink-color">main</span>関数では、これの名前でメソッドを呼び出し、実施するように、<span class="has-inline-color has-pale-pink-color">丸括弧（）</span>を追加します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>もう一度注意します！ dynamic型は避けてください！</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Dartは、strongly-typed言語とloosely-typed言語の間に組み合わせですが、上記の例で示したように、できるだけdynamic型を避く必要があります。 これにより、コードがより安定し、エラーが発生しなくなります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここまで<strong>第一部</strong>は終わりです。この記事の<strong>第二部</strong>でお会いしましょう!　</p>
<!-- /wp:paragraph -->


<!-- wp:paragraph -->
<p> <a href="https://ints.vn/">株式会社INTS</a>　　開発部　ハイ．アン </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->