Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual Studio 2017 事はじめ

527 views

Published on

2017/07/28 「Fukuoka.NET(ふくてん) #7」 で発表した資料です

Published in: Technology
  • Be the first to comment

Visual Studio 2017 事はじめ

  1. 1. Visual Studio 2017 事はじめ 青柳 英明 Fukuoka.NET(ふくてん) #7 ~ プレミアムな週末にゆるりと語らおう! 2017/07/28
  2. 2. 自己紹介 青柳 英明 職業: インフラSE 経歴: アプリケーション開発 … 3年 インフラエンジニア … 16年 運営メンバーになりました (見習い中…) ・ Visual Basic (5.0/6.0) ・ ASP (≠ASP.NET) このたび
  3. 3. はじめに ・ スライドは connpass イベントページで公開します ・ 質問/疑問などありましたら、随時どうぞ ・ 上級者の方々へ: 間違っているところはツッコミお願いします もちろんセッション後でもOKです
  4. 4. Visual Studio 2017 を使って何を開発する? ・・・ やたらと多い (汗)
  5. 5. Visual Studio 2017 で開発できる 「モノ」 について ざ~っくりと調べました
  6. 6. Visual Studio 2017 で開発できるもの 1.デスクトップアプリ ① Windowsフォーム ② WPF ③ UWP
  7. 7. 1.デスクトップアプリ ① Windowsフォーム (Windows Forms) ・ 「.NET」 と同時に登場 ・ 動作OS: Windows 95/NT4.0 以降 GUI でデザインできるように それまでの 「C++/MFC」 UI をコードで書いていた 「Windowsフォーム」 当時は革新的な開発環境であった
  8. 8. 1.デスクトップアプリ ② WPF (Windows Presentation Foundation) ・ .NET 3.0 で登場、 動作OS: Windows Vista 以降 ・ 「マルチタッチ」 「高DPI」 対応 ・ GDI ベース → Direct3D ベース ・ XAML … XML で UI を記述 ・ MVVM … UI とロジックの分離 モダンなハードウェアへの対応 モダンなアーキテクチャの採用
  9. 9. 1.デスクトップアプリ ③ UWP (Universal Windows Platform) ・ Windows 10 専用 Windows PC IoT デバイス Sueface Hub Windows Mobile Xbox One HoloLens いろいろな 「Windows 10」 ・ UWP と言えば、つい最近にも話題に・・・ Surface Laptop に搭載される 「Windows 10 S」 → UWP のみ対応 (Win32アプリは実行不可)
  10. 10. 1.デスクトップアプリ ③ UWP (Universal Windows Platform) - 「Windowsストア」 経由でのみ配布可能 ・ セキュリティを高める仕組み ・ WPF から継承 … 「XAML」 「MVVM」 <テスト・デバッグ> → 「サイド・バイ・サイド」 で配置、実行可能 < 企業で利用 > → 「企業内プライベートWindowsストア」 - マシン上の資産、ネットワークへのアクセス等が一部制限される
  11. 11. 1.デスクトップアプリ これから始めるなら・・・? ① Windowsフォーム ② WPF ③ UWP
  12. 12. 1.デスクトップアプリ これから始めるなら・・・? ① Windowsフォーム ② WPF ③ UWP
  13. 13. Visual Studio 2017 で開発できるもの 2.Webアプリ/Webサービス ① ASP.NET Webフォーム ② ASP.NET MVC ③ ASP.NET SPA ④ ASP.NET Web API
  14. 14. 2.Webアプリ/Webサービス ① ASP.NET Webフォーム ・ 「.NET」 と同時に登場 ・ 「Windowsフォーム」 に似た操作性で開発ができる その代わり、生成された HTML は複雑で可読性が低い・・・
  15. 15. 2.Webアプリ/Webサービス ② ASP.NET MVC ・ 「MVC」 とは? → 「Ruby on Rails」 「AngularJS」 などで採用されている アプリケーションアーキテクチャ マイクロソフト独自の 「Webフォーム」 アーキテクチャから Web 業界で広く使われているアーキテクチャへの転換 ちなみに・・・ 「MVC」 を発展させたアーキテクチャの一つ → 「MVVM」
  16. 16. 2.Webアプリ/Webサービス ③ ASP.NET SPA ・ 「SPA」 ・・・ Single Page Application < 通常のWebアプリ > < SPA > ページを遷移しながら処理していく 1つのページ内で処理が完結 Ajax、WebSocket HTTP リクエスト/レスポンス (POST、PUT、etc.)
  17. 17. 2.Webアプリ/Webサービス ④ ASP.NET Web API ・ ブラウザからアクセスする 「Webサイト(Webページ)」 ではなく、 (別の)プログラムから要求を受けて処理を行い結果を返す いわゆる 「サービスアプリケーション」 を Web 技術で実装したもの ・ Webベースの API … 「REST API」 ・ Webアプリのバックエンドとしての役割 ・ あるいは、他のWebサイトからの処理を受け付ける場合も
  18. 18. 2.Webアプリ/Webサービス これから始めるなら・・・? ① ASP.NET Webフォーム ② ASP.NET MVC ③ ASP.NET SPA ④ ASP.NET Web API
  19. 19. 2.Webアプリ/Webサービス これから始めるなら・・・? ① ASP.NET Webフォーム ② ASP.NET MVC ③ ASP.NET SPA ④ ASP.NET Web API
  20. 20. 2.Webアプリ/Webサービス まずは・・・ ① ASP.NET Webフォーム ② ASP.NET MVC ③ ASP.NET SPA ④ ASP.NET Web API
  21. 21. Visual Studio 2017 で開発できるもの ・ Xamarin 3.そのほかにも・・・ ・ Unity ・ .NET Core → マルチプラットフォーム対応のモバイル開発環境 → ゲーム開発環境 → .NET Framework のオープンソース版
  22. 22. Visual Studio 2017 を 使ってみよう
  23. 23. インストーラーのダウンロード https://www.visualstudio.com/ja/downloads/
  24. 24. どの 「エディション」 を選べばいい? Community 無償 ただし、利用できるユーザー・目的に条件あり ・ 個人の開発者 ・ 学習、研究目的 ・ オープンソースプロジェクトへ貢献するための開発 上記に当てはまらない企業利用の場合 ・ 「非エンタープライズ組織」 に限り、5名まで利用可能 「非エンタープライズ」の定義: PC 250台未満、または年間収入100万米ドル未満の組織 Professional 有償 企業での開発向け … Communityよりも高機能Enterprise → 個人利用であれば 「Community」 を選んでおけばOK
  25. 25. Visual Studio 2017 のインストール 1.ダウンロードしたインストーラーを実行 2.コンポーネント選択画面
  26. 26. UWP WPF ASP.NET 後から追加・削除することも可能 → 最初は、自分が使うもの だけインストールすることを おすすめします
  27. 27. Visual Studio 2017 のインストール 3.コンポーネントのダウンロード ~ インストール処理 4.インストール完了! 起動してみましょう
  28. 28. Visual Studio 2017 のインストール 5.初回起動時: 「マイクロソフトアカウント」 のサインイン画面 ・ アカウントを持っている → サインインすると… ・ アカウントを持っていない - 複数PC間で設定を同期 - Azure、VSTS などへ自動サインイン - とりあえずスキップしてOK (後でサインイン可能) ※ ただし、30日以内にサインインしなければ Visual Studio が使えなくなります (評価期間の終了)
  29. 29. 開発してみよう: (例) WPFアプリ
  30. 30. UWP WPF ASP.NET
  31. 31. XAML UIデザイナ 連動
  32. 32. ドラッグ&ドロップ XAML が自動的に記述された! コントロール(Button)を 配置
  33. 33. コントロール(Button)を ダブルクリック 「ボタンがクリックされた」 イベントに対する処理内容
  34. 34. 入力中にリアルタイムに候補を表示 (IntelliSense) → [Tab]キーで単語が補完される 「.」 を入力すると、メソッドの候補を表示 → [↑][↓]キーで選択 メソッドの引数等について説明が表示される 残りの部分を手入力して完成
  35. 35. (デバッグの)「開始」 ビルドが行われる
  36. 36. デバッグ用ツールボタン (今は気にしない…) デバッグビルドされたアプリケーションが起動
  37. 37. 次回予告 (予定は未定…) (1) MVC、MVVM プログラミングの基礎 (2) 開発環境構築 (ハンズオン) ・ ASP.NET ~ クラウド連係 (Azure、GitHub、etc) ・ ASP.NET Core + Docker ・ UWPアプリを作って、いろんな環境で動かしてみる

×