update.本記事の執筆に当たっては、ニコニコ生放送において、MaxMEllonさんを始めとして、皆様からのアドバイスをいただきました。ありがとうございます。私はこれまでJavaScriptといえば、Webサーバに配置する*.jsファイルを直接書いていました。使っているライブラリも、jQueryやBackbone.jsぐらいでした。2015やTypeScriptという新しい言語仕様、React等の新しいライブラリの興隆を見て、時代からの遅れを感じていました。そこで、ビルドシステムの導入や新しい言語・ライブラリの利用によって、開発過程と成果物の品質を高めたいと思い、色々と挑戦してみました。TypeScriptJavaScriptへとコンパイル可能な言語の一つです。2015やCoffeeScriptも検討しましたが、静的型付けによるコンパイル時エラー検出や強力なIDE補完が期待できるため、本言語を選定しました。ReactいわゆるMVCのビューのためのライブラリです。AngularJS等と比べるとビューに特化しており、設計の自由度が高いのではないかと考え、普及度の向上も鑑みて、選定しました。SassCSSのプリプロセッサです。普及度が高いようでしたので、選定しました。ファイル形式としては、ソフトウェアエンジニア以外の方にも親しみやすいSCSSを採用しました。webpackJavaScriptのモジュールを結合します。Browserifyも検討しましたが、後発で普及度が高まっているこちらを選定しました。gulpビルドのためのツールです。Gruntも検討しましたが、後発で普及度が高まっているこちらを選定しました。(無くても構いません)各種ツールのインストールnode.jsのインストールnode.jsのオフィシャルサイトのインストーラを実行します。業務利用を想定して、LTSバージョンを利用しました。これによって、npm(パッケージマネージャ)がインストールされ、コマンドプロンプトでnpmコマンドを実行できるようになります。-gこれによって、コマンドプロンプトでtscコマンドを実行できるようになります。実行できない場合は、環境変数PATHにC:\Users\(ユーザ名)\AppData\Roaming\npmが含まれるようにしてください。付けたとき、Windows環境ではC:\Users\(ユーザ名)\AppData\Roaming\npm以下にモジュールがインストールされます。typingsのインストールtypingsは既存のJavaScriptライブラリを利用するための型定義ファイルを取得するツールです。-gこれによって、コマンドプロンプトでtypingsコマンドを実行できるようになります。TSLintのインストールTSLintはTypeScriptのフォーマットチェックツールです。IDEAから使用します。-gこれによって、コマンドプロンプトでtslintコマンドを実行できるようになります。Windowsから、Rubyをインストールします。その後、コマンドプロンプトで以下を実行します。sassこれによって、コマンドプロンプトでsassコマンドを実行できるようになります。-gこれによって、コマンドプロンプトでgulpコマンドを実行できるようになります。dist作成したディレクトリ、および自動的に作成されるディレクトリの用途は以下の通りです。ソースコードを格納します。バージョン管理下に置きます。TypeScriptによるコンパイル結果を格納します。バージョン管理からは除外します。ビルドによって出力された、配備するファイルを格納します。バージョン管理からは除外します。npmの--saveまたは--save-devで取得したモジュールが格納されます。バージョン管理からは除外します。typingsで取得した型定義ファイルが格納されます。バージョン管理からは除外します。以下の作業は、hello-reactディレクトリで実行します。initこれによってhello-react内にpackage.jsonファイルが作成されます。このファイルはJavaのMavenにおけるpom.xmlのようなものかと理解しています。--save-dev--save-devオプションによって、hello-react/node_modulesディレクトリ内に、必要なビルド用(配備用ではない)モジュールがインストールされ、package.jsonに記録されます。package.jsonに記録されたモジュールは、以下で更新できます。locationにhello-reactを選び、プロジェクトを作成します。Root]を選びます。As]-[Excluded]を選びます。[File]-[Settings]で設定ダイアログを開きます。TypeScript]を開きます。Compiler]をチェックします。commonjsを入力します。これにより、JSXに対応し、また、出力されるモジュールの形式がCommonJS形式にされます。path]をチェックし、build/$FileDirRelativeToSourcepath$を入力します。IDEAによるコンパイル結果は、gulpによるコンパイル結果と同じ場所に格納されます。TSLint]を開きます。[Enable]をチェックします。空で良いtslint.jsonの作成TSLintオフィシャルのサンプルを元に作成しました。'watch']);コマンドプロンプトからgulpを実行します。>gulpgulpfile.jsとはMakefileのようなものと理解しています。gulpを実行することにより、'default'で指定されたタスクが実行されます。'watch'タスクは、ファイルの更新を監視し、各種タスクを自動実行します。gulpを終了するには、Ctrl+Cを押してください。APIであるJSONPlaceholderの/postsに接続し、CRUD操作を行います。実装するクラスの構成は以下の通りです。--save--saveオプションにより、配備するNodeモジュールがインストールされ、package.jsonに記録されます。--save--ambientオプションによりDefinitelyTypedから、型定義ファイルが検索されます。--saveオプションにより、取得した型定義ファイルが、typings.jsonに記載されます。typings.jsonに記録された型定義ファイルを改めて取得したいときは、以下で取得できます。clean>gulp以上で、dist/index.htmlを閲覧できるようになりました。APIを用いているため、期待通りに動作しない機能もあります。まとめビルドシステムの構築に関しては、情報収集に苦労しましたが、一度構築してしまえばあまり手を入れることは無く、使い回しもできると思います。TypeScriptに関しては、ライブラリを利用する際、JavaScriptを対象に書かれているドキュメントをTypeScriptに読み替えなければならない、必要に応じて型定義ファイルを参照しなければならないことなどから、ライブラリ利用のハードルが上がっています。利用が軌道に乗れば、コンパイルによるエラー発見やIDEによる強力な補完によって、開発効率の向上を実感できました。TypeScriptの定義通り、Java等の静的型付け言語の感覚で実装できるので、とりあえずコードの一部を書き換えて、コンパイルエラーの出ている箇所を修正していくというようなコーディング手法も実践できました。IDEA上で表示されるTSLintの警告の助けを借りて、TypeScriptならではの書き方を学習できました。Reactに関しては、まだチュートリアルを行っただけのレベルですが、ビューをコンポーネントの組み合わせで構築でき、モデルについては自分の好きなように設計できるので、アプリケーションに合ったわかりやすいアーキテクチャを作る手助けになりそうです。モデル部分には当初Backbone.jsを用いる予定でしたが、Model.get()で型付きの戻り値が得られないなど、TypeScriptの恩恵に預かれない部分が多そうなので、類似のモジュールをtypebone.tsとして自作しました。Sassに関しては、ほとんど触っていませんが、SCSSはCSSと同じ感覚で書けるので、CSSからの移行はスムーズにできそうです。本記事と同様の内容で、Reactの代わりにVue.jsを用いた記事も書きましたので、ご参照ください。資料もご参照ください。https://data9824.comFollow株式会社ヨドウェアソフトウェア技術でできることがたくさんあります。私たちソフトウェアの専門家にお任せください。upLoginユーザーは見つかりませんでした。