Web 開発

VisualStudioを使用してASP.NET Core+React(TypeScript)+MobXで動作するものをつくる(1/2)

投稿日:2019年7月17日 更新日:

前置き

皆さんお久しぶりです!グッチです!

前回、自己紹介だけしてから一切投稿をしていなかったので、久しぶりの登場です!

今後は月一ぐらいで登場する予定(あくまで予定)なので、よろしくお願いします(?)!

突然ですが皆さん、Reactでの状態管理ってどうしてますか?

状態管理を使用せずに実装してくと、Propsのバケツリレーが続いてしまう、いわゆるProps Driling問題が発生して辛いですよねー。

そこで弊社でも状態管理ライブラリを導入しよう!となったのですが、じゃあどれにする?ReduxとMobXというライブラリが人気あるみたいだけど・・・。

 

色々調査してみた結果、MobXを導入することにしました!主な理由としては、

  • (Reduxと比べると)比較的、学習コストが低い
  • TypeScriptと相性がいい

になります!

さて、↓から実際にやっていくわけですが、今回のブログでは、タイトルにある通り、環境構築してとりあえず動くものを作りたいので、ボタンクリックをしたらカウントが増えたり減ったりするという、めちゃくちゃ簡単なやつをゴールとしてやっていく予定です!

 

開発環境

  • VisualStudio2019 Enterprise
  • npm(6.9.0)
  • node(12.2.0)

 

やってみよう~プロジェクト作成~

ではさっそく環境構築していきましょー!

VisualStudioから新しいプロジェクトの作成を選択して、ASP.NET Core Web アプリケーションを選択して、次へをクリックしてください。

プロジェクト名はMobXSampleにしましたが、好きなのをつけてください(笑)

 

作成をクリックしたら、React.jsテンプレートを選択してまた作成を押しましょう!

そうすると、プロジェクトが出来上がると思います!

 

やってみよう~package追加~

次はpackage.jsonを開いて、@types/react,@types/react-dom,@types/react-router,@types/react-router-dom,mobx,mobx-reactを追加してください。

npm installも忘れずにね!

 

やってみよう~Store追加~

Storeはフォルダを分けたいので、ClientApp/srcにstoresといった名前でフォルダ作成してください。

作成されたフォルダを右クリックして、新しい項目の追加からTypeScript JSX ファイルを選択して、ファイル名をSampleStore.tsxとでもしておきましょう!

これで追加ボタンをおすと、「tsxが初めて作成されました。TypeScriptの機能を有効にしますか?」的なニュアンスのメッセージがVisualStudioに表示されると思うので、アントニオ猪木さんも言っている通り、迷わず行けよ!男なら!ということで、有効にしましょう!

今回は、ボタンクリックでカウントが上下するものを作りたいので、Storeの中身もそのようにしていきましょう。

クラス直下にcountという変数を定義して、@observableを付与してあげてください。

これでcountが監視対象の値だぞという宣言になります。

あとはupとdownという関数を用意してあげて、@action.boundを付与してあげてください。

監視対象の値を変更したりするぞといった関数たちがよそで使えるようになります。

 

ここで、「デコレーターは実験的な機能です。~~」的なニュアンスのエラーが発生していると思いますが、対処方法はのちほど!

 

やってみよう~TypeScriptの設定~

これはあんまり知られていないような気がしますが、VisualStudioで開発していると、tsconfig.jsonを作成しなくても、VisualStudio上からTypeScriptの設定ができます!

ということで、やっていきましょう。

プロジェクトを右クリックしてプロパティを選択します。

プロパティを開くとTypeScriptビルドという項目があるので、そこからTypeScriptの設定を下記画像のようにしていきます。

 

細かい設定は.csprojファイルから設定することができます。

Storeを作成したときに出た、デコレーターのエラーも.csprojファイルから消すことが出来ます。

PropertyGroupの中に

<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>

を追加してあげましょう。

これでErrorが消えると思います。他のとこでエラーが出てる!っていう場合はPropertyGroupの中を上記画像と全く同じ設定してあげると消えるかも。

 

最後

疲れたので今日はここまで!

次回で一応完結予定なので、来月まで少々お待ちください!

ではでは(@^^)/~~~


-Web, 開発