CINXE.COM

<!DOCTYPE html> <html class="writer-html5" lang="ja" > <head> <meta charset="utf-8" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>仕事ですぐに使えるTypeScript — 仕事ですぐに使えるTypeScript ドキュメント</title> <link rel="stylesheet" href="_static/pygments.css" type="text/css" /> <link rel="stylesheet" href="_static/css/theme.css" type="text/css" />  <script data-url_root="./" id="documentation_options" src="_static/documentation_options.js"></script> <script src="_static/jquery.js"></script> <script src="_static/underscore.js"></script> <script src="_static/_sphinx_javascript_frameworks_compat.js"></script> <script src="_static/doctools.js"></script> <script src="_static/sphinx_highlight.js"></script> <script src="_static/translations.js"></script> <script src="_static/js/theme.js"></script> <link rel="index" title="索引" href="genindex.html" /> <link rel="search" title="検索" href="search.html" /> <link rel="next" title="前書き" href="preface.html" /> </head> <body class="wy-body-for-nav"> <div class="wy-grid-for-nav"> <nav data-toggle="wy-nav-shift" class="wy-nav-side"> <div class="wy-side-scroll"> <div class="wy-side-nav-search" > <a href="#" class="icon icon-home"> 仕事ですぐに使えるTypeScript </a> <div role="search"> <form id="rtd-search-form" class="wy-form" action="search.html" method="get"> <input type="text" name="q" placeholder="Search docs" /> <input type="hidden" name="check_keywords" value="yes" /> <input type="hidden" name="area" value="default" /> </form> </div> </div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu"> <p class="caption" role="heading"><span class="caption-text">TypeScriptの世界を知る</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="preface.html">前書き</a></li> <li class="toctree-l1"><a class="reference internal" href="ecosystem.html">Node.jsエコシステムを体験しよう</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">TypeScriptの書き方</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="variable.html">変数</a></li> <li class="toctree-l1"><a class="reference internal" href="primitive.html">プリミティブ型</a></li> <li class="toctree-l1"><a class="reference internal" href="complex.html">複合型</a></li> <li class="toctree-l1"><a class="reference internal" href="syntax.html">基本的な構文</a></li> <li class="toctree-l1"><a class="reference internal" href="typing.html">基本的な型付け</a></li> <li class="toctree-l1"><a class="reference internal" href="function.html">関数</a></li> <li class="toctree-l1"><a class="reference internal" href="otherbuiltinobjects.html">その他の組み込み型・関数</a></li> <li class="toctree-l1"><a class="reference internal" href="class.html">クラス</a></li> <li class="toctree-l1"><a class="reference internal" href="async.html">非同期処理</a></li> <li class="toctree-l1"><a class="reference internal" href="exception.html">例外処理</a></li> <li class="toctree-l1"><a class="reference internal" href="module.html">モジュール</a></li> <li class="toctree-l1"><a class="reference internal" href="console.html"><code class="docutils literal notranslate"><span class="pre">console.log</span></code>によるログ出力</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">中級のテクニック</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="generics.html">ジェネリクス</a></li> <li class="toctree-l1"><a class="reference internal" href="functional.html">関数型指向のプログラミング</a></li> <li class="toctree-l1"><a class="reference internal" href="class2.html">クラス上級編</a></li> <li class="toctree-l1"><a class="reference internal" href="reactive.html">リアクティブ</a></li> <li class="toctree-l1"><a class="reference internal" href="advance.html">高度なテクニック</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">環境ごとのTips（共通環境・ブラウザ以外）</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="prodenv.html">ソフトウェア開発の環境を考える</a></li> <li class="toctree-l1"><a class="reference internal" href="baseenv.html">基本の環境構築</a></li> <li class="toctree-l1"><a class="reference internal" href="libenv.html">ライブラリ開発のための環境設定</a></li> <li class="toctree-l1"><a class="reference internal" href="clienv.html">CLIツール・ウェブサーバー作成のための環境設定</a></li> <li class="toctree-l1"><a class="reference internal" href="ci.html">CI（継続的インテグレーション）環境の構築</a></li> <li class="toctree-l1"><a class="reference internal" href="deploy.html">成果物のデプロイ</a></li> <li class="toctree-l1"><a class="reference internal" href="version.html">使用ライブラリのバージョン管理</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">環境ごとのTips（ブラウザ環境）</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="browserenv.html">ブラウザ環境</a></li> <li class="toctree-l1"><a class="reference internal" href="browserobjects.html">ブラウザ関連の組み込み型</a></li> <li class="toctree-l1"><a class="reference internal" href="react.html">Reactの環境構築</a></li> <li class="toctree-l1"><a class="reference internal" href="vue.html">Vue.jsの環境構築</a></li> <li class="toctree-l1"><a class="reference internal" href="webparcel.html">Parcelを使ったウェブ開発</a></li> <li class="toctree-l1"><a class="reference internal" href="electron.html">Electronアプリケーションの作成</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Appendix</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="recommended.html">おすすめのパッケージ・ツール</a></li> <li class="toctree-l1"><a class="reference internal" href="contributors.html">貢献者</a></li> </ul> </div> </div> </nav> <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" > <i data-toggle="wy-nav-top" class="fa fa-bars"></i> <a href="#">仕事ですぐに使えるTypeScript</a> </nav> <div class="wy-nav-content"> <div class="rst-content"> <div role="navigation" aria-label="Page navigation"> <ul class="wy-breadcrumbs"> <li><a href="#" class="icon icon-home"></a></li> <li class="breadcrumb-item active">仕事ですぐに使えるTypeScript</li> <li class="wy-breadcrumbs-aside"> <a href="_sources/index.rst.txt" rel="nofollow"> View page source</a> </li> </ul> <hr/> </div> <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article"> <div itemprop="articleBody"> <section id="typescript"> <h1>仕事ですぐに使えるTypeScript<a class="headerlink" href="#typescript" title="この見出しへのパーマリンク"></a></h1> <div class="admonition note"> <p class="admonition-title">注釈</p> <p>本ドキュメントは、まだ未完成ですが、ウェブフロントエンドの開発を学ぶときに、JavaScriptを経由せずに、最初からTypeScriptで学んでいく社内向けコンテンツとして作成されはじめました。基本の文法部分以外はまだ執筆されていない章もいくつもあります。書かれている章もまだまだ内容が追加される可能性がありますし、環境の変化で内容の変更が入る可能性もあります。</p> <p>書籍の原稿はGitHub上で管理しております。もしTypoを見つけてくださった方がいらっしゃいましたら、 <a class="reference external" href="https://github.com/future-architect/typescript-guide/pulls">GitHub上で連絡</a> をお願いします <a class="footnote-reference brackets" href="#id2" id="id1">1</a> 。reSTファイルだけ修正してもらえれば、HTML/PDFの生成までは不要です。フィードバックなども歓迎しております。</p> <dl class="footnote brackets"> <dt class="label" id="id2"><span class="brackets"><a class="fn-backref" href="#id1">1</a></span></dt> <dd><p><a class="reference external" href="https://github.com/future-architect/typescript-guide/pulls">https://github.com/future-architect/typescript-guide/pulls</a></p> </dd> </dl> </div> <p><a href="./typescript-guide.pdf">PDF版をダウンロード</a></p><div class="toctree-wrapper compound"> <p class="caption" role="heading"><span class="caption-text">TypeScriptの世界を知る</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="preface.html">前書き</a><ul> <li class="toctree-l2"><a class="reference internal" href="preface.html#id2">本ドキュメントの位置づけ</a></li> <li class="toctree-l2"><a class="reference internal" href="preface.html#typescript">TypeScriptのウェブ開発における位置づけ</a></li> <li class="toctree-l2"><a class="reference internal" href="preface.html#id3">TypeScriptを選んで開発すべき理由</a></li> <li class="toctree-l2"><a class="reference internal" href="preface.html#id4">ライセンス</a></li> <li class="toctree-l2"><a class="reference internal" href="preface.html#id8">本書の構成と学習の準備</a></li> <li class="toctree-l2"><a class="reference internal" href="preface.html#javascript">JavaScriptのバージョン</a></li> <li class="toctree-l2"><a class="reference internal" href="preface.html#id9">TypeScriptと互換性</a></li> <li class="toctree-l2"><a class="reference internal" href="preface.html#id20">本書の参考文献など</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="ecosystem.html">Node.jsエコシステムを体験しよう</a><ul> <li class="toctree-l2"><a class="reference internal" href="ecosystem.html#id5">Node.jsのインストール</a></li> <li class="toctree-l2"><a class="reference internal" href="ecosystem.html#package-json-ts-node"><code class="docutils literal notranslate"><span class="pre">package.json</span></code> の作成と <code class="docutils literal notranslate"><span class="pre">ts-node</span></code> のインストール</a></li> <li class="toctree-l2"><a class="reference internal" href="ecosystem.html#id7">プロジェクトフォルダ共有後の環境構築</a></li> <li class="toctree-l2"><a class="reference internal" href="ecosystem.html#id8">インストールしたコマンドの実行</a></li> <li class="toctree-l2"><a class="reference internal" href="ecosystem.html#typescript">TypeScriptの環境設定</a></li> <li class="toctree-l2"><a class="reference internal" href="ecosystem.html#id9">エディタ環境</a></li> <li class="toctree-l2"><a class="reference internal" href="ecosystem.html#ts-nodetypescript">ts-nodeを使ったTypeScriptのコードの実行</a></li> <li class="toctree-l2"><a class="reference internal" href="ecosystem.html#id10">まとめ</a></li> </ul> </li> </ul> </div> <div class="toctree-wrapper compound"> <p class="caption" role="heading"><span class="caption-text">TypeScriptの書き方</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="variable.html">変数</a><ul> <li class="toctree-l2"><a class="reference internal" href="variable.html#id2">三種類の宣言構文</a></li> <li class="toctree-l2"><a class="reference internal" href="variable.html#id3">変数の型定義</a></li> <li class="toctree-l2"><a class="reference internal" href="variable.html#id4">より柔軟な型定義</a></li> <li class="toctree-l2"><a class="reference internal" href="variable.html#id5">変数の巻き上げ</a></li> <li class="toctree-l2"><a class="reference internal" href="variable.html#id6">変数のスコープ</a></li> <li class="toctree-l2"><a class="reference internal" href="variable.html#id7">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="primitive.html">プリミティブ型</a><ul> <li class="toctree-l2"><a class="reference internal" href="primitive.html#boolean"><code class="docutils literal notranslate"><span class="pre">boolean</span></code> リテラル</a></li> <li class="toctree-l2"><a class="reference internal" href="primitive.html#id5">数値型</a></li> <li class="toctree-l2"><a class="reference internal" href="primitive.html#string"><code class="docutils literal notranslate"><span class="pre">string</span></code> リテラル</a></li> <li class="toctree-l2"><a class="reference internal" href="primitive.html#undefined-null"><code class="docutils literal notranslate"><span class="pre">undefined</span></code> と <code class="docutils literal notranslate"><span class="pre">null</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="primitive.html#id23">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="complex.html">複合型</a><ul> <li class="toctree-l2"><a class="reference internal" href="complex.html#id2">配列</a></li> <li class="toctree-l2"><a class="reference internal" href="complex.html#id10">オブジェクト</a></li> <li class="toctree-l2"><a class="reference internal" href="complex.html#id15">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="syntax.html">基本的な構文</a><ul> <li class="toctree-l2"><a class="reference internal" href="syntax.html#id2">制御構文</a></li> <li class="toctree-l2"><a class="reference internal" href="syntax.html#id3">式</a></li> <li class="toctree-l2"><a class="reference internal" href="syntax.html#id4">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="typing.html">基本的な型付け</a><ul> <li class="toctree-l2"><a class="reference internal" href="typing.html#any">一番手抜きな型付け: <code class="docutils literal notranslate"><span class="pre">any</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#unknown">未知の型: <code class="docutils literal notranslate"><span class="pre">unknown</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#id3">型に名前をつける</a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#id4">関数のレスポンスや引数で使うオブジェクトの定義</a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#id5">オブジェクトの属性の修飾: オプション、読み込み専用</a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#id6">属性名が可変のオブジェクトを扱う</a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#ab">AかつBでなければならない</a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#id7">タグ付き合併型: パラメータの値によって必要な属性が変わる柔軟な型定義を行う</a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#id10">型ガード</a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#keyof-mapped-type"><code class="docutils literal notranslate"><span class="pre">keyof</span></code> とMapped Type: オブジェクトのキーの文字列のみを許容する動的な型宣言</a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#id14">インタフェースを使った型定義</a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#typescript">もしTypeScriptの型を付けるのがコストが高いと感じたら？</a></li> <li class="toctree-l2"><a class="reference internal" href="typing.html#id15">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="function.html">関数</a><ul> <li class="toctree-l2"><a class="reference internal" href="function.html#id2">関数の引数と返り値の型定義</a></li> <li class="toctree-l2"><a class="reference internal" href="function.html#id3">関数を扱う変数の型定義</a></li> <li class="toctree-l2"><a class="reference internal" href="function.html#id4">関数を扱う変数に、デフォルトで何もしない関数を設定する</a></li> <li class="toctree-l2"><a class="reference internal" href="function.html#id5">デフォルト引数</a></li> <li class="toctree-l2"><a class="reference internal" href="function.html#id6">関数を含むオブジェクトの定義方法</a></li> <li class="toctree-l2"><a class="reference internal" href="function.html#this">クロージャと<code class="docutils literal notranslate"><span class="pre">this</span></code>とアロー関数</a></li> <li class="toctree-l2"><a class="reference internal" href="function.html#this-1"><code class="docutils literal notranslate"><span class="pre">this</span></code>を操作するコードは書かない（1）</a></li> <li class="toctree-l2"><a class="reference internal" href="function.html#id8">即時実行関数はもう使わない</a></li> <li class="toctree-l2"><a class="reference internal" href="function.html#id9">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="otherbuiltinobjects.html">その他の組み込み型・関数</a><ul> <li class="toctree-l2"><a class="reference internal" href="otherbuiltinobjects.html#date"><code class="docutils literal notranslate"><span class="pre">Date</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="otherbuiltinobjects.html#regexp"><code class="docutils literal notranslate"><span class="pre">RegExp</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="otherbuiltinobjects.html#json"><code class="docutils literal notranslate"><span class="pre">JSON</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="otherbuiltinobjects.html#urlurlsearchparams"><code class="docutils literal notranslate"><span class="pre">URL</span></code>と<code class="docutils literal notranslate"><span class="pre">URLSearchParams</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="otherbuiltinobjects.html#id23">時間のための関数</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="class.html">クラス</a><ul> <li class="toctree-l2"><a class="reference internal" href="class.html#javascriptjava">JavaScriptとJava風オブジェクト指向文法の歴史</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#id2">用語の整理</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#id3">基本のクラス宣言</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#public-protected-private">アクセス制御（<code class="docutils literal notranslate"><span class="pre">public</span></code>/ <code class="docutils literal notranslate"><span class="pre">protected</span></code> / <code class="docutils literal notranslate"><span class="pre">private</span></code>）</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#id4">コンストラクタの引数を使ってプロパティを宣言</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#static"><code class="docutils literal notranslate"><span class="pre">static</span></code> メンバー</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#id5">インスタンスクラスフィールド</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#readonly">読み込み専用の変数（ <code class="docutils literal notranslate"><span class="pre">readonly</span></code> ）</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#id12">メンバー定義方法のまとめ</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#id13">継承/インタフェース実装宣言</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#id14">クラスとインタフェースの違い・使い分け</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#id15">デコレータ</a></li> <li class="toctree-l2"><a class="reference internal" href="class.html#id18">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="async.html">非同期処理</a><ul> <li class="toctree-l2"><a class="reference internal" href="async.html#id2">非同期とは何か</a></li> <li class="toctree-l2"><a class="reference internal" href="async.html#id3">コールバックは使わない</a></li> <li class="toctree-l2"><a class="reference internal" href="async.html#id6">非同期と制御構文</a></li> <li class="toctree-l2"><a class="reference internal" href="async.html#promise"><code class="docutils literal notranslate"><span class="pre">Promise</span></code> の分岐と待ち合わせの制御</a></li> <li class="toctree-l2"><a class="reference internal" href="async.html#await">ループの中の <code class="docutils literal notranslate"><span class="pre">await</span></code> に注意</a></li> <li class="toctree-l2"><a class="reference internal" href="async.html#id9">非同期で繰り返し呼ばれる処理</a></li> <li class="toctree-l2"><a class="reference internal" href="async.html#id10">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="exception.html">例外処理</a><ul> <li class="toctree-l2"><a class="reference internal" href="exception.html#typescript">TypeScriptの例外処理構文</a></li> <li class="toctree-l2"><a class="reference internal" href="exception.html#error"><code class="docutils literal notranslate"><span class="pre">Error</span></code> クラス</a></li> <li class="toctree-l2"><a class="reference internal" href="exception.html#id3">例外処理とコードの読みやすさ</a></li> <li class="toctree-l2"><a class="reference internal" href="exception.html#id4">リカバリー処理の分岐のためにユーザー定義の例外クラスを作る</a></li> <li class="toctree-l2"><a class="reference internal" href="exception.html#id5">例外処理を使わないエラー処理</a></li> <li class="toctree-l2"><a class="reference internal" href="exception.html#id6">非同期と例外処理</a></li> <li class="toctree-l2"><a class="reference internal" href="exception.html#id7">例外とエラーの違い</a></li> <li class="toctree-l2"><a class="reference internal" href="exception.html#id8">例外処理のハンドリングの漏れ</a></li> <li class="toctree-l2"><a class="reference internal" href="exception.html#id9">例外処理機構以外で例外を扱う</a></li> <li class="toctree-l2"><a class="reference internal" href="exception.html#id10">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="module.html">モジュール</a><ul> <li class="toctree-l2"><a class="reference internal" href="module.html#id2">用語の整理</a></li> <li class="toctree-l2"><a class="reference internal" href="module.html#id7">基本文法</a></li> <li class="toctree-l2"><a class="reference internal" href="module.html#id13">中級向けの機能</a></li> <li class="toctree-l2"><a class="reference internal" href="module.html#id16">ちょっと上級の話題</a></li> <li class="toctree-l2"><a class="reference internal" href="module.html#id23">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="console.html"><code class="docutils literal notranslate"><span class="pre">console.log</span></code>によるログ出力</a><ul> <li class="toctree-l2"><a class="reference internal" href="console.html#console-log-info-warn-error"><code class="docutils literal notranslate"><span class="pre">console.log/info/warn/error()</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="console.html#console-table-dir"><code class="docutils literal notranslate"><span class="pre">console.table/dir()</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="console.html#id1">その他のメソッド</a></li> <li class="toctree-l2"><a class="reference internal" href="console.html#id2">まとめ</a></li> </ul> </li> </ul> </div> <div class="toctree-wrapper compound"> <p class="caption" role="heading"><span class="caption-text">中級のテクニック</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="generics.html">ジェネリクス</a><ul> <li class="toctree-l2"><a class="reference internal" href="generics.html#id2">ジェネリクスの書き方</a></li> <li class="toctree-l2"><a class="reference internal" href="generics.html#id4">ジェネリクスの型パラメータに制約をつける</a></li> <li class="toctree-l2"><a class="reference internal" href="generics.html#id5">型パラメータの自動解決</a></li> <li class="toctree-l2"><a class="reference internal" href="generics.html#id6">ジェネリクスの文法でできること、できないこと</a></li> <li class="toctree-l2"><a class="reference internal" href="generics.html#id7">型変換のためのユーティリティ型</a></li> <li class="toctree-l2"><a class="reference internal" href="generics.html#any-unknown"><code class="docutils literal notranslate"><span class="pre">any</span></code> や <code class="docutils literal notranslate"><span class="pre">unknown</span></code> 、合併型との違い</a></li> <li class="toctree-l2"><a class="reference internal" href="generics.html#id13">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="functional.html">関数型指向のプログラミング</a><ul> <li class="toctree-l2"><a class="reference internal" href="functional.html#id2">イミュータブル</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="class2.html">クラス上級編</a><ul> <li class="toctree-l2"><a class="reference internal" href="class2.html#id2">アクセッサ</a></li> <li class="toctree-l2"><a class="reference internal" href="class2.html#id3">抽象クラス</a></li> <li class="toctree-l2"><a class="reference internal" href="class2.html#id4">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="reactive.html">リアクティブ</a></li> <li class="toctree-l1"><a class="reference internal" href="advance.html">高度なテクニック</a></li> </ul> </div> <div class="toctree-wrapper compound"> <p class="caption" role="heading"><span class="caption-text">環境ごとのTips（共通環境・ブラウザ以外）</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="prodenv.html">ソフトウェア開発の環境を考える</a><ul> <li class="toctree-l2"><a class="reference internal" href="prodenv.html#id2">環境構築できるメンバーがいないときはどうするか？</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="baseenv.html">基本の環境構築</a><ul> <li class="toctree-l2"><a class="reference internal" href="baseenv.html#id2">作業フォルダの作成</a></li> <li class="toctree-l2"><a class="reference internal" href="baseenv.html#typescript">TypeScriptの環境整備</a></li> <li class="toctree-l2"><a class="reference internal" href="baseenv.html#prettier">Prettier</a></li> <li class="toctree-l2"><a class="reference internal" href="baseenv.html#eslint">ESLint</a></li> <li class="toctree-l2"><a class="reference internal" href="baseenv.html#id6">テスト</a></li> <li class="toctree-l2"><a class="reference internal" href="baseenv.html#change-import-path">プロジェクト内のファイルの参照方法を<code class="docutils literal notranslate"><span class="pre">@/</span></code>にする</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="libenv.html">ライブラリ開発のための環境設定</a><ul> <li class="toctree-l2"><a class="reference internal" href="libenv.html#id2">ディレクトリの作成</a></li> <li class="toctree-l2"><a class="reference internal" href="libenv.html#id3">ビルド設定</a></li> <li class="toctree-l2"><a class="reference internal" href="libenv.html#id5">ライブラリコード</a></li> <li class="toctree-l2"><a class="reference internal" href="libenv.html#id6">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="clienv.html">CLIツール・ウェブサーバー作成のための環境設定</a><ul> <li class="toctree-l2"><a class="reference internal" href="clienv.html#node-js">Node.jsの環境構築</a></li> <li class="toctree-l2"><a class="reference internal" href="clienv.html#deno">Deno</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="ci.html">CI（継続的インテグレーション）環境の構築</a></li> <li class="toctree-l1"><a class="reference internal" href="deploy.html">成果物のデプロイ</a><ul> <li class="toctree-l2"><a class="reference internal" href="deploy.html#npm">npmパッケージとしてデプロイ</a></li> <li class="toctree-l2"><a class="reference internal" href="deploy.html#id3">サーバーにアプリケーションをデプロイ</a></li> <li class="toctree-l2"><a class="reference internal" href="deploy.html#docker">Dockerイメージの作成</a></li> <li class="toctree-l2"><a class="reference internal" href="deploy.html#cli">CLI/ウェブアプリケーションのイメージ作成</a></li> <li class="toctree-l2"><a class="reference internal" href="deploy.html#id8">ウェブフロントエンドのDockerイメージの作成</a></li> <li class="toctree-l2"><a class="reference internal" href="deploy.html#kubernetes">Kubernetesへのデプロイ</a></li> <li class="toctree-l2"><a class="reference internal" href="deploy.html#id11">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="version.html">使用ライブラリのバージョン管理</a><ul> <li class="toctree-l2"><a class="reference internal" href="version.html#id2">バージョンとは</a></li> <li class="toctree-l2"><a class="reference internal" href="version.html#id5">バージョン選びの作戦</a></li> <li class="toctree-l2"><a class="reference internal" href="version.html#id8">バージョンアップの方法</a></li> <li class="toctree-l2"><a class="reference internal" href="version.html#id10">バージョンアップ時のトラブルを減らす</a></li> <li class="toctree-l2"><a class="reference internal" href="version.html#id15">なぜバージョンを管理する必要があるのか</a></li> <li class="toctree-l2"><a class="reference internal" href="version.html#id19">まとめ</a></li> </ul> </li> </ul> </div> <div class="toctree-wrapper compound"> <p class="caption" role="heading"><span class="caption-text">環境ごとのTips（ブラウザ環境）</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="browserenv.html">ブラウザ環境</a><ul> <li class="toctree-l2"><a class="reference internal" href="browserenv.html#id2">ウェブアプリケーションにおけるビルドツールのゴール</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="browserobjects.html">ブラウザ関連の組み込み型</a><ul> <li class="toctree-l2"><a class="reference internal" href="browserobjects.html#polyfillponyfill">Polyfill、Ponyfill</a></li> <li class="toctree-l2"><a class="reference internal" href="browserobjects.html#fetch"><code class="docutils literal notranslate"><span class="pre">fetch()</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="browserobjects.html#formdata"><code class="docutils literal notranslate"><span class="pre">FormData</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="browserobjects.html#eventlistener"><code class="docutils literal notranslate"><span class="pre">EventListener</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="browserobjects.html#eventsourcewebsocket"><code class="docutils literal notranslate"><span class="pre">EventSource</span></code>と<code class="docutils literal notranslate"><span class="pre">WebSocket</span></code></a></li> <li class="toctree-l2"><a class="reference internal" href="browserobjects.html#localstoragesessionstorage"><code class="docutils literal notranslate"><span class="pre">LocalStorage</span></code>と<code class="docutils literal notranslate"><span class="pre">SessionStorage</span></code></a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="react.html">Reactの環境構築</a><ul> <li class="toctree-l2"><a class="reference internal" href="react.html#create-react-app">create-react-appによる環境構築</a></li> <li class="toctree-l2"><a class="reference internal" href="react.html#next-js">Next.js</a></li> <li class="toctree-l2"><a class="reference internal" href="react.html#id3">Reactの周辺ツールのインストールと設定</a></li> <li class="toctree-l2"><a class="reference internal" href="react.html#ui">UI部品の追加</a></li> <li class="toctree-l2"><a class="reference internal" href="react.html#react-material-ui-typescript">React+Material UI+TypeScriptのサンプル</a></li> <li class="toctree-l2"><a class="reference internal" href="react.html#reacttypescript">ReactとTypeScript</a></li> <li class="toctree-l2"><a class="reference internal" href="react.html#reduxtypescript">ReduxとTypeScript</a></li> <li class="toctree-l2"><a class="reference internal" href="react.html#reactredux">ReactとReduxの非同期アクセス</a></li> <li class="toctree-l2"><a class="reference internal" href="react.html#id4">Reactの新しい書き方</a></li> <li class="toctree-l2"><a class="reference internal" href="react.html#id6">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="vue.html">Vue.jsの環境構築</a><ul> <li class="toctree-l2"><a class="reference internal" href="vue.html#id1">クラスベースのコンポーネント</a></li> <li class="toctree-l2"><a class="reference internal" href="vue.html#id2">関数ベースのコンポーネント作成</a></li> <li class="toctree-l2"><a class="reference internal" href="vue.html#vue-jsjquery">Vue.jsを使ったjQueryのリプレース</a></li> <li class="toctree-l2"><a class="reference internal" href="vue.html#id9">まとめ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="webparcel.html">Parcelを使ったウェブ開発</a><ul> <li class="toctree-l2"><a class="reference internal" href="webparcel.html#id1">Parcelとは</a></li> <li class="toctree-l2"><a class="reference internal" href="webparcel.html#id2">Parcelのインストールと環境の構築</a></li> <li class="toctree-l2"><a class="reference internal" href="webparcel.html#react">React環境</a></li> <li class="toctree-l2"><a class="reference internal" href="webparcel.html#web-components">Web Components開発環境</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="electron.html">Electronアプリケーションの作成</a><ul> <li class="toctree-l2"><a class="reference internal" href="electron.html#react-electron">React+Electronの環境構築の方法</a></li> <li class="toctree-l2"><a class="reference internal" href="electron.html#id3">配布用アプリケーションの構築</a></li> <li class="toctree-l2"><a class="reference internal" href="electron.html#id4">デバッグ</a></li> <li class="toctree-l2"><a class="reference internal" href="electron.html#id5">レンダープロセスとメインプロセス間の通信</a></li> <li class="toctree-l2"><a class="reference internal" href="electron.html#id6">まとめ</a></li> </ul> </li> </ul> </div> <div class="toctree-wrapper compound"> <p class="caption" role="heading"><span class="caption-text">Appendix</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="recommended.html">おすすめのパッケージ・ツール</a><ul> <li class="toctree-l2"><a class="reference internal" href="recommended.html#typescript-playground">TypeScript Playground</a></li> <li class="toctree-l2"><a class="reference internal" href="recommended.html#id4">ビルド補助ツール</a></li> <li class="toctree-l2"><a class="reference internal" href="recommended.html#id10">コマンドラインツール用ライブラリ</a></li> <li class="toctree-l2"><a class="reference internal" href="recommended.html#id13">アルゴリズム関連のライブラリ</a></li> </ul> </li> <li class="toctree-l1"><a class="reference internal" href="contributors.html">貢献者</a><ul> <li class="toctree-l2"><a class="reference internal" href="contributors.html#pull-request-issue">Pull Request/Issueをくださった方々</a></li> <li class="toctree-l2"><a class="reference internal" href="contributors.html#id2">フィードバックをくださった方々</a></li> </ul> </li> </ul> </div> <div class="admonition-todo admonition"> <p class="admonition-title">課題</p> <p>デコレータを使ってDI。他にある？</p> <p><a class="reference external" href="https://github.com/Microsoft/tsyringe">https://github.com/Microsoft/tsyringe</a></p> </div> <p class="todo-source">(<a class="reference internal" href="advance.html#id2"><em>元のエントリ</em></a> は、 /Users/shibu/book/typescript-guide/advance.rst の 4 行目です)</p> <div class="admonition-todo admonition"> <p class="admonition-title">課題</p> <p>tsdocとかドキュメントツールを紹介</p> </div> <p class="todo-source">(<a class="reference internal" href="baseenv.html#id7"><em>元のエントリ</em></a> は、 /Users/shibu/book/typescript-guide/baseenv.rst の 490 行目です)</p> <div class="admonition-todo admonition"> <p class="admonition-title">課題</p> <p>eslintやテストの書き方の紹介</p> </div> <p class="todo-source">(<a class="reference internal" href="baseenv.html#id8"><em>元のエントリ</em></a> は、 /Users/shibu/book/typescript-guide/baseenv.rst の 492 行目です)</p> <div class="admonition-todo admonition"> <p class="admonition-title">課題</p> <p>travis、circle.ci、gitlab-ciの設定を紹介。あとはJenkins？</p> <p><a class="reference external" href="https://qiita.com/nju33/items/72992bd4941b96bc4ce5">https://qiita.com/nju33/items/72992bd4941b96bc4ce5</a></p> <p><a class="reference external" href="https://qiita.com/naokikimura/items/f1c8903eec86ec1de655">https://qiita.com/naokikimura/items/f1c8903eec86ec1de655</a></p> </div> <p class="todo-source">(<a class="reference internal" href="ci.html#id1"><em>元のエントリ</em></a> は、 /Users/shibu/book/typescript-guide/ci.rst の 4 行目です)</p> <div class="admonition-todo admonition"> <p class="admonition-title">課題</p> <p>npmパッケージ to npm npmパッケージ to nexus</p> <p><a class="reference external" href="https://qiita.com/kannkyo/items/5195069c65350b60edd9">https://qiita.com/kannkyo/items/5195069c65350b60edd9</a></p> </div> <p class="todo-source">(<a class="reference internal" href="deploy.html#id2"><em>元のエントリ</em></a> は、 /Users/shibu/book/typescript-guide/deploy.rst の 6 行目です)</p> <div class="admonition-todo admonition"> <p class="admonition-title">課題</p> <p>Denoはこちらのスレッドを見守る <a class="reference external" href="https://github.com/denoland/deno/issues/3356">https://github.com/denoland/deno/issues/3356</a></p> </div> <p class="todo-source">(<a class="reference internal" href="deploy.html#id6"><em>元のエントリ</em></a> は、 /Users/shibu/book/typescript-guide/deploy.rst の 208 行目です)</p> <div class="admonition-todo admonition"> <p class="admonition-title">課題</p> <p>あとで書く</p> </div> <p class="todo-source">(<a class="reference internal" href="ecosystem.html#id6"><em>元のエントリ</em></a> は、 /Users/shibu/book/typescript-guide/ecosystem.rst の 43 行目です)</p> <div class="admonition-todo admonition"> <p class="admonition-title">課題</p> <p>// browser/moduleなど // <a class="reference external" href="https://qiita.com/shinout/items/4c9854b00977883e0668">https://qiita.com/shinout/items/4c9854b00977883e0668</a></p> </div> <p class="todo-source">(<a class="reference internal" href="libenv.html#id4"><em>元のエントリ</em></a> は、 /Users/shibu/book/typescript-guide/libenv.rst の 131 行目です)</p> <div class="admonition-todo admonition"> <p class="admonition-title">課題</p> <p>要検証</p> </div> <p class="todo-source">(<a class="reference internal" href="module.html#id12"><em>元のエントリ</em></a> は、 /Users/shibu/book/typescript-guide/module.rst の 190 行目です)</p> <div class="admonition-todo admonition"> <p class="admonition-title">課題</p> <p>ちょっとうまく動いていないので、要調査</p> </div> <p class="todo-source">(<a class="reference internal" href="module.html#id18"><em>元のエントリ</em></a> は、 /Users/shibu/book/typescript-guide/module.rst の 313 行目です)</p> <div class="admonition-todo admonition"> <p class="admonition-title">課題</p> <p>cashにexportがあるので、cross-envはいらないかも？</p> </div> <p class="todo-source">(<a class="reference internal" href="recommended.html#id7"><em>元のエントリ</em></a> は、 /Users/shibu/book/typescript-guide/recommended.rst の 54 行目です)</p> </section> <section id="indices-and-tables"> <h1>Indices and tables<a class="headerlink" href="#indices-and-tables" title="この見出しへのパーマリンク"></a></h1> <ul class="simple"> <li><p><a class="reference internal" href="genindex.html"><span class="std std-ref">索引</span></a></p></li> <li><p><a class="reference internal" href="py-modindex.html"><span class="std std-ref">モジュール索引</span></a></p></li> <li><p><a class="reference internal" href="search.html"><span class="std std-ref">検索ページ</span></a></p></li> </ul> </section> </div> </div> <footer><div class="rst-footer-buttons" role="navigation" aria-label="Footer"> <a href="preface.html" class="btn btn-neutral float-right" title="前書き" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a> </div> <hr/> <div role="contentinfo"> <p>© Copyright 2019-2020, Future Corporation.</p> </div> Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>. </footer> </div> </div> </section> </div> <script> jQuery(function () { SphinxRtdTheme.Navigation.enable(true); }); </script> </body> </html>