Visual Studio Code for Education の概要

# Visual Studio Code for Education とは

## 概要

[**Visual Studio Code for Education**](https://vscodeedu.com/) は、Web 版の　[**Visual Studio Code**](https://azure.microsoft.com/ja-jp/products/visual-studio-code) を教員と学生向けにカスタマイズした無料のオンラインコンピュータサイエンス教育プラットホームです。サウンドボックス化されたコーディング環境と[Python](https://www.python.org/)や[JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript)などを学ぶ多彩なカリキュラムが用意されています。

[**Visual Studio Code for Education**](https://vscodeedu.com/) は、Webブラウザで [https://vscodeedu.com/](https://vscodeedu.com/) にアクセスすればすぐに使い始めることができます。デバイスやプラットフォームを問わずに利用できるのが魅力的です。WindowsでもChromebookでもiPadでも利用可能です。

[**Visual Studio Code for Education**](https://vscodeedu.com/) は、実際に業務でも使用されている [**Visual Studio Code**](https://azure.microsoft.com/ja-jp/products/visual-studio-code)がそのまま用いられている点が大きなメリットです。教育プラットフォームにありがちな問題として、教育用途にフォーカスするあまり、業務で広く用いられている標準から外れてしまうことはよくあります。例えば、せっかくブロックプログラミングツールなどで学んでも、その知識やノウハウが実践で役に立たなければ無駄となるし、改めて業務ツールに習熟する必要があるからです。その点[**Visual Studio Code for Education**](https://vscodeedu.com/) ならば、コースで学ぶうえで身に着けたノウハウがそのまま業務で生かせるはずです。入門向け教育プラットフォームからのステップアップを考えるユーザーにとっても最適なものとなっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/f0a66540-8c55-9587-ef2b-49d7896b14d5.png)

## アクセシビリティ(Accessibility)機能

Microsoft のミッションは "Our mission is to empower every person and every organization on the planet to achieve more." 「地球上のすべての人々と組織がより多くのことをできるようにする」です。

[**Visual Studio Code for Education**](https://vscodeedu.com/)もすべての人々がコードを学べるようにアクセシビリティ機能(イマーシブリーダー、ハイコントラスト、ズーム、スクリーンリーダーのサポート)が初めから組み込まれています。

## プライバシーとセキュリティ

Microsoftは、厳格なガバナンス実践とプライバシーバイデザインのアプローチで、学生のデータプライバシーと学校のセキュリティを価値観として守ります。[**Visual Studio Code for Education**](https://vscodeedu.com/) でも教育現場に適したセキュリティやプライバシー保護にも配慮されています。


## 提供コース

Python や Web 開発のコースに加えて、Python Fortune Teller や Spooky Manor のテキストベースのアドベンチャーゲームなど、45分以内の楽しいコーディングアクティビティを提供しています。

- [**Python 入門**](https://vscodeedu.com/courses/intro-to-python)
中等学校と大学レベルのクラスの両方に適した通年の入門レベルのコース。このコースでは、関数、ifステートメント、forループ、構造体などのPythonプログラミング言語の基礎をカバーしています。
- [**Intro to Web Development**](https://vscodeedu.com/courses/intro-to-web-dev)
HTML、CSS、JavaScriptの使用に焦点を当てたWebデザインコースの学期の長さの入門コース。このプロジェクトベースのカリキュラムでは、クライアントが問題を解決したり、目的を果たすためのWebサイトを作成したりするためのデザイン思考プロセスを学生に紹介します。受講者は、基本的な HTML 構文を学習し、CSS を使用したスタイル設定を学習し、JavaScript を使用して動的な Web 要素を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/a4cd6c53-8728-2f87-eb0c-e0bef3cd25fe.png)


# Visual Stuio Code for Education を使ってみる

[**Visual Studio Code for Education**](https://vscodeedu.com/) では、コースの履修とプロジェクトの作成が行えます。以下にそれぞれ順番に説明していきます

## コースの履修

- Webブラウザで  [https://vscodeedu.com/](https://vscodeedu.com/) にアクセスします。
- [**Explore activities (アクティビティを探る)**](https://vscodeedu.com/courses)をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/92b3a919-a65c-b3f3-b272-7aa833bc1ca2.png)
- 5つのコースが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/ffeb0972-cfc6-2951-5220-7b9e20ec909f.png)
- [Getting Started with VS Code for Education](https://vscodeedu.com/courses/getting-started) からはじめてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/f81e21f7-9d59-a404-dd33-af7e1eb8a3c2.png)
- 英語な苦手な方は、Edgeブラウザをお使いであればブラウザの翻訳機能をお使いください。右クリックを押し、メニュ画面が出てきたら **「日本語に翻訳」** をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/2754d9d3-dedc-4f5a-a9bb-aa8afa8e931f.png)
- 英語のWebページが日本語に翻訳されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/a73e86aa-3dd6-d10f-c84d-894d072877ee.png)
- [Getting Started with VS Code for Education](https://vscodeedu.com/courses/getting-started) のページが開いたら [**Start couse(コースの開始)**]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/039e2db3-aa13-5510-d679-0eef67bdf145.png)
- サインインの画面が表示されますので、Microsoft, Google どちらかのアカウントでサインインしてください。Microsoft, Google ともに個人用のアカウント、組織用のアカウントどちらでもサインインできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/eae70468-178b-b9e9-4254-9eff5c064c14.png)
- Microsoft アカウントを選んだ場合は以下のような画面が表示されます。使用するアカウントを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/2ba9a0b3-d20e-1db1-162c-c2192d150f95.png)
- Google アカウントを選んだ場合には以下のような画面が表示されます。使用するアカウントを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/e7b9eada-1ae3-9772-9653-0b0c93a0df14.png)
- サインインが完了すると Web 版の Visual Stuio Code が起動します。 **[Start]** をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/df5be2db-6e13-c696-65f7-909daf3ab9af.png)
- コースが開始されます。Visual Studio Code 内のコンテンツは日本語化できませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/f6646fd6-f0f0-9ed2-a442-fee593b8d780.png)

## プロジェクトを開始する

[**Visual Studio Code for Education**](https://vscodeedu.com/) の [Start a project] は、学生が自分自身のプロジェクトをカスタム作成し、ポートフォリオをこうちくするための機能です。この機能は教育用のサウンドボックス環境として提供されているため、安全により用いただけます。

学生はこの環境で、[Python](https://www.python.org/) や [JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript) などの現代の技術と言語を使用してコードを書くことができます。これにより、学生は実際の職場で求められる技術スキルを身につけることができます。

使用開始方法を以下に示します。

- Webブラウザで  [https://vscodeedu.com/](https://vscodeedu.com/) にアクセスします。
- [Start a project] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/28a15b89-6bea-d0ff-39df-460dc53269ab.png)
- Microsoft, Google の組織のアカウント、個人のアカウントのどちらも使用可能です。お手持ちのアカウントを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/9112c7b2-70a1-1056-de26-5038fb608a3f.png)
- Microsoft アカウントを選んだ場合は以下のような画面が表示されます。使用するアカウントを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/2ba9a0b3-d20e-1db1-162c-c2192d150f95.png)
- Google アカウントを選んだ場合には以下のような画面が表示されます。使用するアカウントを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/e7b9eada-1ae3-9772-9653-0b0c93a0df14.png)
- サインインが完了すると「Create a project」のページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/9af4e3c1-85d8-2f7e-2bf8-507a7ec4a6e3.png)
    - プロジェクト名とプロジェクトの説明を入力し、[**Create project**] をクリックするとプロジェクトが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/80729bd9-e017-33a9-239f-e75cf98f18d3.png)
- プロジェクトが作成されると Visual Stodio Code が開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78535/3c652f74-122b-0a79-7d24-ede641c5a9bc.png)

# まとめ

Visual Studio Code for Education は、デバイスやプラットフォームを問わずに利用できる無償のオンラインコンピュータサイエンス教育プラットフォームです。 数クリックで使用を開始することができますので、ぜひともお試しください。