<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>async</title>
	<atom:link href="https://techgrowup.net/tag/async/feed/" rel="self" type="application/rss+xml" />
	<link>https://techgrowup.net</link>
	<description>エンジニアを強くする</description>
	<lastBuildDate>Tue, 08 Oct 2024 02:38:59 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://techgrowup.net/wp-content/uploads/2021/05/hp-icon-150x150.png</url>
	<title>async</title>
	<link>https://techgrowup.net</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Flutter開発入門43 DartのAsync/Awaitを解説：非同期処理でパフォーマンスを最大化する方法</title>
		<link>https://techgrowup.net/flutter-dart-async-await/</link>
					<comments>https://techgrowup.net/flutter-dart-async-await/?noamp=mobile#respond</comments>
		
		<dc:creator><![CDATA[techgrowup]]></dc:creator>
		<pubDate>Tue, 08 Oct 2024 02:38:57 +0000</pubDate>
				<category><![CDATA[Flutter]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[async]]></category>
		<category><![CDATA[await]]></category>
		<category><![CDATA[Dart]]></category>
		<category><![CDATA[アプリ開発]]></category>
		<guid isPermaLink="false">https://techgrowup.net/?p=1936</guid>

					<description><![CDATA[はじめに Dartで非同期処理を扱う際に欠かせないのが、async/awaitの仕組みです。非同期処理は、I/O操作やネットワーク通信など時間がかかる処理を効率的に行うために重要です。Dartのasyncとawaitを使 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h1 class="wp-block-heading">はじめに</h1>



<p class="wp-block-paragraph"><strong>Dart</strong>で非同期処理を扱う際に欠かせないのが、<strong>async/await</strong>の仕組みです。非同期処理は、I/O操作やネットワーク通信など時間がかかる処理を効率的に行うために重要です。Dartの<code>async</code>と<code>await</code>を使うことで、複雑な非同期コードをシンプルに記述でき、コールバック地獄に陥ることなく、読みやすいコードを書くことができます。</p>



<p class="wp-block-paragraph">この記事では、<a rel="noopener" target="_blank" href="https://dart.dev/libraries/async/async-await">Dart公式ドキュメント<span class="fa fa-external-link external-icon anchor-icon"></span></a>を基に、<strong>async/await</strong>を使った非同期処理の基本的な使い方から、実際の応用方法、注意点まで詳しく解説します。Flutterアプリでも頻繁に使われるため、Dartでの開発効率を上げるために、async/awaitの使い方をマスターしましょう。</p>



<h2 class="wp-block-heading">Async/Awaitとは</h2>



<p class="wp-block-paragraph"><strong>Async/Await</strong>は、Dartで非同期処理を簡単に扱うためのキーワードです。<code>async</code>は関数が非同期処理を含むことを示し、<code>await</code>は非同期処理が完了するまで処理を一時停止させるキーワードです。これにより、非同期処理を直線的なコードのように扱うことができ、コールバックを多用せずにシンプルで可読性の高いコードを書けます。</p>



<h3 class="wp-block-heading">Async/Awaitの基本的な仕組み</h3>



<ol class="wp-block-list">
<li><strong>async</strong>：非同期処理を行う関数に指定するキーワード</li>



<li><strong>await</strong>：非同期処理が完了するまで待機するキーワード</li>
</ol>



<h2 class="wp-block-heading">Async/Awaitの使い方</h2>



<h3 class="wp-block-heading">基本的なAsync/Awaitの例</h3>



<p class="wp-block-paragraph">以下は、<code>async</code>と<code>await</code>を使って非同期処理を行うシンプルな例です。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="Future&lt;void&gt; fetchData() async {
  print('Fetching data...');
  await Future.delayed(Duration(seconds: 2)); // 非同期処理
  print('Data fetched!');
}

void main() async {
  print('Start');
  await fetchData(); // 非同期処理を待つ
  print('End');
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #569CD6">void</span><span style="color: #D4D4D4">&gt; </span><span style="color: #DCDCAA">fetchData</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Fetching data...&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">delayed</span><span style="color: #D4D4D4">(</span><span style="color: #4EC9B0">Duration</span><span style="color: #D4D4D4">(seconds: </span><span style="color: #B5CEA8">2</span><span style="color: #D4D4D4">)); </span><span style="color: #6A9955">// 非同期処理</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Data fetched!&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #569CD6">void</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">main</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Start&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">fetchData</span><span style="color: #D4D4D4">(); </span><span style="color: #6A9955">// 非同期処理を待つ</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;End&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<h6 class="wp-block-heading">出力結果：</h6>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="Start
Fetching data...
Data fetched!
End" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #DCDCAA">Start</span></span>
<span class="line"><span style="color: #DCDCAA">Fetching</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">data...</span></span>
<span class="line"><span style="color: #DCDCAA">Data</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">fetched!</span></span>
<span class="line"><span style="color: #DCDCAA">End</span></span></code></pre></div>



<h6 class="wp-block-heading">解説</h6>



<ul class="wp-block-list">
<li><strong><code>await Future.delayed</code></strong>：2秒後に処理を再開する非同期処理をシミュレーションしています。</li>



<li><strong><code>await fetchData()</code></strong>：<code>fetchData</code>関数が完了するまで待機します。</li>
</ul>



<p class="wp-block-paragraph">このように、直線的なコードで非同期処理を扱うことができます。</p>



<h3 class="wp-block-heading">実際のAPIリクエストでのAsync/Awaitの利用</h3>



<p class="wp-block-paragraph">APIを使った非同期リクエストを扱う場合でも、async/awaitは非常に便利です。以下は、HTTPリクエストを扱う例です。</p>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="import 'dart:convert';
import 'package:http/http.dart' as http;

Future&lt;void&gt; fetchUserData() async {
  final url = Uri.parse('https://jsonplaceholder.typicode.com/users/1');
  
  // 非同期でHTTPリクエスト
  final response = await http.get(url);

  // サーバーからのレスポンスを処理
  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    print('User data: $data');
  } else {
    print('Failed to load data');
  }
}

void main() async {
  await fetchUserData();
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">import</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&#39;dart:convert&#39;</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #569CD6">import</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&#39;package:http/http.dart&#39;</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">as</span><span style="color: #D4D4D4"> http;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #569CD6">void</span><span style="color: #D4D4D4">&gt; </span><span style="color: #DCDCAA">fetchUserData</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> url = </span><span style="color: #4EC9B0">Uri</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">parse</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;https://jsonplaceholder.typicode.com/users/1&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">  </span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #6A9955">// 非同期でHTTPリクエスト</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> response = </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> http.</span><span style="color: #DCDCAA">get</span><span style="color: #D4D4D4">(url);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #6A9955">// サーバーからのレスポンスを処理</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">if</span><span style="color: #D4D4D4"> (response.statusCode == </span><span style="color: #B5CEA8">200</span><span style="color: #D4D4D4">) {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> data = </span><span style="color: #DCDCAA">jsonDecode</span><span style="color: #D4D4D4">(response.body);</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;User data: $</span><span style="color: #9CDCFE">data</span><span style="color: #CE9178">&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">  } </span><span style="color: #C586C0">else</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Failed to load data&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">  }</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #569CD6">void</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">main</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">fetchUserData</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<h6 class="wp-block-heading">解説</h6>



<ul class="wp-block-list">
<li><strong><code>http.get</code></strong>：非同期でHTTPリクエストを行います。</li>



<li><strong><code>await</code></strong>：リクエストが完了するまで待機し、その後レスポンスを処理します。</li>



<li><strong><code>jsonDecode</code></strong>：レスポンスのJSONデータをデコードして使用しています。</li>
</ul>



<h2 class="wp-block-heading">FutureとAsync/Awaitの違い</h2>



<p class="wp-block-paragraph">Dartでは、非同期処理を行うために<code>Future</code>オブジェクトも頻繁に使われますが、<code>async/await</code>を使うことでコードがよりシンプルになります。</p>



<h3 class="wp-block-heading">Futureを使った非同期処理</h3>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="void main() {
  fetchData().then((value) =&gt; print('End'));
}

Future&lt;void&gt; fetchData() {
  print('Fetching data...');
  return Future.delayed(Duration(seconds: 2)).then((_) {
    print('Data fetched!');
  });
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">void</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">main</span><span style="color: #D4D4D4">() {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #DCDCAA">fetchData</span><span style="color: #D4D4D4">().</span><span style="color: #DCDCAA">then</span><span style="color: #D4D4D4">((value) =&gt; </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;End&#39;</span><span style="color: #D4D4D4">));</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #569CD6">void</span><span style="color: #D4D4D4">&gt; </span><span style="color: #DCDCAA">fetchData</span><span style="color: #D4D4D4">() {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Fetching data...&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">return</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">delayed</span><span style="color: #D4D4D4">(</span><span style="color: #4EC9B0">Duration</span><span style="color: #D4D4D4">(seconds: </span><span style="color: #B5CEA8">2</span><span style="color: #D4D4D4">)).</span><span style="color: #DCDCAA">then</span><span style="color: #D4D4D4">((_) {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Data fetched!&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">  });</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<p class="wp-block-paragraph">このコードでも同じ処理ができますが、<code>then</code>チェーンを使うため、コードがやや複雑になりがちです。<code>async/await</code>を使うと、より自然な順序で処理を書くことができます。</p>



<h2 class="wp-block-heading">Async/Awaitを使うメリット</h2>



<ol class="wp-block-list">
<li><strong>可読性の向上</strong>
<ul class="wp-block-list">
<li><code>async/await</code>を使うことで、非同期処理があたかも同期処理のように書けるため、コードの可読性が大幅に向上します。特に複数の非同期処理が連続して行われる場合、<code>then</code>チェーンを避け、直線的なコードが書けるのは大きなメリットです。</li>
</ul>
</li>



<li><strong>コールバック地獄の回避</strong>
<ul class="wp-block-list">
<li>非同期処理における「コールバック地獄」と呼ばれる、コールバックがネストしすぎてコードが読みにくくなる問題を避けられます。async/awaitを使うことで、コールバックがなくなり、シンプルな処理を記述できます。</li>
</ul>
</li>



<li><strong>エラーハンドリングの簡便さ</strong>
<ul class="wp-block-list">
<li><code>async/await</code>を使うと、同期処理と同様に<code>try-catch</code>を使ってエラーハンドリングが行えます。これにより、非同期処理中のエラーも簡単に処理できるようになります。</li>
</ul>
</li>
</ol>



<h2 class="wp-block-heading">Async/Awaitでのエラーハンドリング</h2>



<p class="wp-block-paragraph">非同期処理でエラーが発生する可能性がある場合、<code>try-catch</code>を使ってエラーを処理します。これにより、非同期処理中に発生するエラーも通常の同期処理と同じように扱うことができます。</p>



<h3 class="wp-block-heading">例：エラーハンドリング</h3>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="import 'dart:convert';
import 'package:http/http.dart' as http;

Future&lt;void&gt; fetchUserData() async {
  try {
    final url = Uri.parse('https://jsonplaceholder.typicode.com/users/1');
    final response = await http.get(url);

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      print('User data: $data');
    } else {
      throw Exception('Failed to load data');
    }
  } catch (e) {
    print('Error occurred: $e');
  }
}

void main() async {
  await fetchUserData();
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">import</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&#39;dart:convert&#39;</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #569CD6">import</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&#39;package:http/http.dart&#39;</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">as</span><span style="color: #D4D4D4"> http;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #569CD6">void</span><span style="color: #D4D4D4">&gt; </span><span style="color: #DCDCAA">fetchUserData</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">try</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> url = </span><span style="color: #4EC9B0">Uri</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">parse</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;https://jsonplaceholder.typicode.com/users/1&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> response = </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> http.</span><span style="color: #DCDCAA">get</span><span style="color: #D4D4D4">(url);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #C586C0">if</span><span style="color: #D4D4D4"> (response.statusCode == </span><span style="color: #B5CEA8">200</span><span style="color: #D4D4D4">) {</span></span>
<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #569CD6">final</span><span style="color: #D4D4D4"> data = </span><span style="color: #DCDCAA">jsonDecode</span><span style="color: #D4D4D4">(response.body);</span></span>
<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;User data: $</span><span style="color: #9CDCFE">data</span><span style="color: #CE9178">&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">    } </span><span style="color: #C586C0">else</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">      </span><span style="color: #C586C0">throw</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">Exception</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Failed to load data&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">    }</span></span>
<span class="line"><span style="color: #D4D4D4">  } </span><span style="color: #C586C0">catch</span><span style="color: #D4D4D4"> (e) {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">print</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&#39;Error occurred: $</span><span style="color: #9CDCFE">e</span><span style="color: #CE9178">&#39;</span><span style="color: #D4D4D4">);</span></span>
<span class="line"><span style="color: #D4D4D4">  }</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #569CD6">void</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">main</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #DCDCAA">fetchUserData</span><span style="color: #D4D4D4">();</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<p class="wp-block-paragraph">この例では、APIリクエストが失敗した場合に<code>Exception</code>を投げ、それを<code>catch</code>でキャッチしてエラーメッセージを表示しています。</p>



<h2 class="wp-block-heading">Async/Awaitのベストプラクティス</h2>



<ol class="wp-block-list">
<li><strong>不要な非同期処理を避ける</strong>
<ul class="wp-block-list">
<li>非同期処理が必要ない場合には、<code>async</code>を使わないことが推奨されます。非同期処理は基本的に少しのオーバーヘッドが発生するため、シンプルな処理であれば同期的に処理するほうが効率的です。</li>
</ul>
</li>



<li><strong>非同期処理の並列化</strong>
<ul class="wp-block-list">
<li>複数の非同期処理を並列で実行する必要がある場合、<code>Future.wait</code>を使うことで、複数のFutureを同時に待機できます。</li>
</ul>
</li>
</ol>



<div class="wp-block-kevinbatdorf-code-block-pro" data-code-block-pro-font-family="Code-Pro-JetBrains-Mono" style="font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E"><svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle><circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle><circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle></g></svg></span><span role="button" tabindex="0" data-code="Future&lt;void&gt; fetchMultipleData() async {
  await Future.wait([
    fetchData1(),
    fetchData2(),
    fetchData3(),
  ]);
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">&lt;</span><span style="color: #569CD6">void</span><span style="color: #D4D4D4">&gt; </span><span style="color: #DCDCAA">fetchMultipleData</span><span style="color: #D4D4D4">() </span><span style="color: #C586C0">async</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #C586C0">await</span><span style="color: #D4D4D4"> </span><span style="color: #4EC9B0">Future</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">wait</span><span style="color: #D4D4D4">([</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">fetchData1</span><span style="color: #D4D4D4">(),</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">fetchData2</span><span style="color: #D4D4D4">(),</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">fetchData3</span><span style="color: #D4D4D4">(),</span></span>
<span class="line"><span style="color: #D4D4D4">  ]);</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre></div>



<ol start="3" class="wp-block-list">
<li><strong>エラーのハンドリングを徹底する</strong>
<ul class="wp-block-list">
<li>非同期処理は外部のリソース（API、ファイル、データベース）に依存することが多いため、常にエラーが発生する可能性があります。<code>try-catch</code>でエラーを適切に処理し、アプリがクラッシュしないようにしましょう。</li>
</ul>
</li>
</ol>



<h2 class="wp-block-heading">まとめ</h2>



<p class="wp-block-paragraph">Dartの<strong>async/await</strong>を使うことで、複雑な非同期処理を簡潔で読みやすいコードに変えることができます。非同期処理は、時間のかかるタスク（I/O操作やネットワーク通信）に対して非常に重要であり、Flutter開発においても頻繁に使われます。<code>async</code>と<code>await</code>を正しく使うことで、可読性の高いコードを書き、パフォーマンスの最適化を図ることが可能です。</p>



<p class="wp-block-paragraph">この記事で紹介した基本的な使い方とベストプラクティスを活かして、DartやFlutterの非同期処理をより効率的に扱ってください！</p>



<p class="wp-block-paragraph"></p>
]]></content:encoded>
					
					<wfw:commentRss>https://techgrowup.net/flutter-dart-async-await/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Disk: Enhanced  を使用したページ キャッシュ

Served from: techgrowup.net @ 2026-06-22 15:54:01 by W3 Total Cache
-->