.NET Core の開発環境

気づけば、 .NET Core の開発環境を作る方法やIDEなどが充実してました。

開発環境構築

こちらの手順に従って簡単にインストールできるようになっています。
.NET - Powerful Open Source Development

でのインストール方法について書かれています。

IDE

Windowsの場合は、VIsual Studio を使えば良いと思います。
今まで Mac だと、 Visual Studio Code や Vim, Emacs といったエディタを使っての開発でした。
ですが、最近ではMacでも利用可能なIDEがでてきたようです。

Rider

JETBRAIN社製の .NET IDE
A cross-platform .NET IDE based on the IntelliJ platform and ReSharper

slnファイルの記述

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio 2013

Visual Studio for Mac

Visual StudioMac
現在は PREVIEW版です。 www.visualstudio.com

slnファイルの記述

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio 2012

※ この2つのIDE両方とも開発することはできそうですが、slnファイルを見るとコメント部分の Visual Studio のバージョンが違うようでした。

vscodeでコード整形

jsonなどのコード整形をしたいときのショートカットキーを忘れてしまうのでメモ

コマンド

shift + alt + f

注意点

起動時のデフォルトで開かれてるファイル(Unitled-1)ではコマンドを入力してもコード整形されないので注意。
jsonなら拡張子 .json である必要があるようです。

ショートカット一覧確認方法

ショートカット一覧を見る方法

基本設定 > キーボード ショートカット

コード整形は下記の様に定義されています。

{ "key": "shift+alt+f",           "command": "editor.action.formatDocument",
                                     "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly" }

ReactでのHTML描画について

Reactで文字列のHTMLを文字列として描画するのではなく、HTMLで描画する。

方法

dangerouslySetInnerHTML を使う。

<span dangerouslySetInnerHTML={{__html: htmlString}}>

の様な形で、htmlString にはHTMLが文字列で代入されています。
こうすることで、 htmlString の値を文字列としてではなく、HTMLとして表示することができます。

MarkdownをHTMLの文字列に変換し、文字列ではなくHTMLとして描画する。
markedなどは、Markdownを変換して文字列を出力するので、今回の様な処理が必要になります。

github.com

参考

mikazuki.hatenablog.jp

vscodeでMarkdownプレビュー

visual studio code (vscode) では、簡単に下図のようにMarkdownのプレビューができます。

f:id:naught00:20170106222431p:plain

コマンド

Macの場合

command + shift + V

補足

上記コマンドでプレビューを表示することができます。
ですが、リアルタイムプレビューが可能なのは拡張子が.mdの場合である点に注意が必要なようです。

拡張子が.mdではない場合

# hoge

と入力した後にMarkdownプレビューを開始した結果 f:id:naught00:20170106222907p:plain

追加で

## fuga

と入力していますが、プレビューには反映されていません。 f:id:naught00:20170106223057p:plain

拡張子が.mdの場合

# hoge

と入力した後にMarkdownプレビューを開始した結果 f:id:naught00:20170106223348p:plain

追加で

## fuga

と入力しています。 拡張子が.mdの場合、プレビューがリアルタイムで更新されていることがわかります。 f:id:naught00:20170106223411p:plain

mac の .Net Core でapi作成

windows の場合は、visualstudio でプロジェクトのテンプレートを作成すれば良さそうですが、macの場合は visualstudio code(VScode)にはプロジェクトのテンプレートを作成する機能は無いため、どうやって作るのか調べてみました。

前提条件

Node.js がインストールされていること

前準備

必要なパッケージのインストール

$ npm install -g yo bower grunt-cli gulp
$ npm install -g generator-aspnet

プロジェクトテンプレートの作成

プロジェクトのテンプレート作成にはyoemanを使います。
yoemanは対話的にプロジェクトのテンプレートを作成してくれる物です。

yo  コマンド実行でテンプレート作成を開始します。

$ yo aspnet

下記の様に対話的にテンプレートを作成していきます。

? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │  marvellous ASP.NET Core │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of application do you want to create? Web API Application
? What's the name of your ASP.NET application? aspnet_test
   create aspnet_test/.gitignore
   create aspnet_test/appsettings.json
   create aspnet_test/Dockerfile
   create aspnet_test/Startup.cs
   create aspnet_test/Program.cs
   create aspnet_test/project.json
   create aspnet_test/Properties/launchSettings.json
   create aspnet_test/Controllers/ValuesController.cs
   create aspnet_test/web.config
   create aspnet_test/README.md


Your project is now created, you can use the following commands to get going
    cd "aspnet_test"
    dotnet restore
    dotnet build (optional, build will also happen when it's run)
    dotnet run

実際に設定した項目

項目 内容
アプリケーションの種類 Web API Application
アプリ名 aspnet_test

その後の操作手順も書いてありますので、記載のコマンドをそのまま実行してみます。

$ cd aspnet_test
$ dotnet restore
$ dotnet build
$ dotnet run

Project aspnet_test (.NETCoreApp,Version=v1.0) was previously compiled. Skipping compilation.
Hosting environment: Production
Content root path: /Users/naught/tutorial/aspnet_test/aspnet_test
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.

サーバーが起動して、 http://localhost:5000 でアクセス可能なことがわかります。

Controllers/ValuesController.cs を見るとアクセス可能なAPIがわかります。
試しに、 http://localhost:5000/api/values にアクセスしてみます

f:id:naught00:20161106141809p:plain

VScodeの場合左のメニューにあるデバッグマークからのデバッグ実行でもアプリ起動可能です。
こちらから実行させた場合、ブレークポイントなどもはれてデバッグがはかどります。

f:id:naught00:20161106143251p:plain

おまけ

リリースビルドする方法

$ dotnet build -c Release

macで始める .Net Core

いつのまにか簡単な手順で動作確認までできるようになっていました。
基本的に公式HPの手順に従えば動作確認まではできるようになってました。

.NET - Powerful Open Source Development

前提条件

Homebrew がインストールされていること

brew.sh

手順

1. はじめに
SDKインストールの前に openssl をインストールします。

$ brew update
$ brew install openssl
$ ln -s /usr/local/opt/openssl/lib/libcrypto.1.0.0.dylib /usr/local/lib/
$ ln -s /usr/local/opt/openssl/lib/libssl.1.0.0.dylib /usr/local/lib/

2. .Net Core SDK のインストール
インストーラのDL先 official installer
ダウンロードしたpkgをインストールします。
ここまでで、環境構築は完了です。

3. プロジェクトの作成
ディレクトリを作成して、プロジェクトを新規作成します。
dotnet new のコマンドだけでプロジェクト作成が完了して簡単になりました。

$ mkdir hwapp
$ cp hwapp
$ dotnet new

4. コンパイル&実行

$ dotnet restore
$ dotnet run

初回実行時はコンパイル処理が入りますが、最後に Hello World! と出力されていることがわかります。

$ dotnet run
Project hwapp (.NETCoreApp,Version=v1.0) will be compiled because expected outputs are missing
Compiling hwapp for .NETCoreApp,Version=v1.0

Compilation succeeded.
    0 Warning(s)
    0 Error(s)

Time elapsed 00:00:01.8591704


Hello World!

railsサーバーとのAPI通信

概要

rails で作成したサーバー との post通信でfetchを使ったときの注意点

環境

内容

railsで作成したサーバーとのAPI通信の為だけにjqueryを使うのは重いという話を聞いたのでfetchを使ってみました。

github.com

post送信するために最初に書いてみたソースコード

var data = new FormData();
data.append('', );    // post送信したいデータ
fetch('post先のURL, {
    method: 'post',
    body: data
}).then( (response) => {
    if (response.status >= 200 && response.status < 300) {
        return response.json();
    } else {
        var error = new Error(response.statusText)
        throw error
    }
}).then( (data) => {
    // 成功時に実行したい処理
}).catch( (error) => {
    // 失敗時に実行したい処理
});

上記ソースコードの場合、railsで作成したAPIサーバーと通信するためには

する必要があるようです。

修正したソースコード

var data = new FormData();
data.append('', );    // post送信したいデータ
fetch('post先のURL, {
    method: 'post',
    credentials: 'include',
    headers: {'X-CSRF-Token': document.getElementsByName('csrf-token').item(0)['content']},
    body: data
}).then( (response) => {
    if (response.status >= 200 && response.status < 300) {
        return response.json();
    } else {
        var error = new Error(response.statusText)
        throw error
    }
}).then( (data) => {
    // 成功時に実行したい処理
}).catch( (error) => {
    // 失敗時に実行したい処理
});

無事に通信できました。

参考にしたページ

qiita.com