Web Development for Beginners(microsoft / Web-Dev-For-Beginners – GitHub)とは?
【更新情報】
2021年1月10日(日)
:【レッスン3】Creating Accessible Webpages:アクセシブルなWebページの作成
2020年11月にMicrosoftのGitHubアカウントで、HTML・CSS・JavaScriptなどが学べるWeb開発(ウェブ開発・ウェブ制作)入門者向けのチュートリアルが公開されました。
:microsoft/Web-Dev-For-Beginners(MIT Licence)| GitHub
JavaScriptの基礎的な内容から、ちょっとしたゲーム開発や、簡単なWebアプリ構築手法などを一通り学べるようです。
Announcing: Web Development for Beginners
視聴時間:2分15秒
GitHubを使われているプログラマーの方は、Web Development for Beginners by Microsoft(2020.11)を既にご存知の方も多いのではないかと思いますが、これからウェブサイトやウェブアプリ開発を志す日本人の方への認知は、低いのではないかと思います。
今回は、自分自身のWebプログラミング学習と、Webプログラミング関連の情報をお探し中のプログラミング初学者の方の情報収集の利便性を兼ねて、Web Development for Beginners by Microsoft(2020.11)を、できる範囲ではありますが、本文の一部を日本語に翻訳したり、チュートリアルのプログラムの使い方などをまとめていこうと思います。
記事初回投稿時点(2020年12月30日時点)では、どこまで出来るか全く分かりませんが、コツコツと作業をしていきたいと思います。
長期戦になるかと思いすが、よろしくお願いいたします。
尚、最終的な内容の詳細は、公式サイトでご自身でよくご確認いただくようお願いいたします。
:microsoft/Web-Dev-For-Beginners(MIT Licence)| GitHub
初学者のためのウェブ開発 Aカリキュラム:Web Development for Beginners – A Curriculum
MicrosoftのAzure Cloud Advocatesは、JavaScript、CSS、HTMLの基礎知識を12週間、24レッスンのカリキュラムで提供しています。各レッスンには、レッスン前後のクイズ、レッスンを完了するための説明、解決方法、課題などが含まれています。私たちのプロジェクトベースの教育法は、新しいスキルを「定着させる」ための実証済みの方法で、作りながら学ぶことを可能にしています。
著者のJen Looper、Chris Noring、Christopher Harrison、Jasmine Greenaway、Yohan Lasorsa、Floor Drees、そしてスケッチノートアーティストのTomomi Imuraに心から感謝します。
教授法(教育方法):Pedagogy
私たちは、このカリキュラムを構築する際に、2つの教育学的な考え方を選択しました。このシリーズが終わる頃には、学生はタイピングゲーム、バーチャルテラリウム、「グリーン」ブラウザ拡張機能、「スペースインベーダー」のようなシューティングゲーム、ビジネス向けの銀行アプリを作成し、JavaScript、HTML、CSSの基本を、今日のウェブ開発者の最新のツールチェーンとともに学んでいることでしょう。
コンテンツがプロジェクトに沿ったものであることを確認することで、プロセスは学生にとってより魅力的なものとなり、概念の定着率が向上します。また、概念を紹介するために、JavaScriptの基礎のスターターレッスンをいくつか書き、ビデオチュートリアルの「Beginner’s Series to: JavaScript | Channel 9」のビデオと組み合わせて、概念を紹介するスターターレッスンをいくつか作成しました。
また、授業前の小テストで学習者の学習意欲を高め、授業後に2回目の小テストを行うことで、学習の定着度を高めています。このカリキュラムは柔軟性があり、楽しく、全体的にも部分的にも受講できるように設計されています。プロジェクトは小さなものから始まり、12週間のサイクルが終わる頃には徐々に複雑なものになっていきます。
フレームワークを採用する前にウェブ開発者として必要とされる基本的なスキルに集中するため、JavaScriptフレームワークの紹介は意図的に避けていますが、このカリキュラムを修了するための良い次のステップとして、別のビデオのコレクションを通してNode.jsについて学ぶことができます。:「Beginner Series to: Node.js | Channel 9」
各レッスンには以下のものを含みます:Each lesson includes
・オプションのスケッチノート
・オプションの補足ビデオ
・プレレッスン・ウォーミングアップ・クイズ
・コーディング
・プロジェクトベースのレッスンのために、プロジェクトを構築する方法をステップ・バイ・ステップ(段階的指導)でガイドします。
・知識テスト
・挑戦
・副読本
・課題
・レッスン後の小テスト
レッスン:Lessons
作成次第、リンクを掲載予定です。
1.まずはじめに:Getting Started
プロジェクト名
:Getting Started
コンセプト
:プログラミング言語と各種ツール入門
学習目標
:プログラミング言語の基礎と、プロのWeb開発者が仕事をするのに役立つソフトウェアなどについて学ぶことができます。
リンクされたレッスン
:【レッスン1】Intro to Programming Languages and Tools of the Trade:プログラミング言語と各種ツール入門
2.まずはじめに:Getting Started
プロジェクト名
:Getting Started
コンセプト
:GitHubの基本、チームでの共同作業を含む
学習目標
:プロジェクトでGitHubの使い方、コードベースでの共同作業の方法
リンクされたレッスン
:【レッスン2】Introduction to GitHub:GitHub入門
3.まずはじめに:Getting Started
プロジェクト名:Getting Started
コンセプト:アクセシビリティ
学習目標:Webアクセシビリティの基本を学ぶ
リンクされたレッスン
:【レッスン3】Creating Accessible Webpages:アクセシブルなWebページの作成
4.JS Basics
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
5.JS Basics
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
6.JS Basics
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
7.JS Basics
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
8.Terrarium(テラリウム:陸上の植物などをガラス容器などで育てる園芸方法)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
9.Terrarium(テラリウム)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
10.Terrarium(テラリウム)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
11.Typing Game(タイピングゲーム)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
12.Green Browser Extension(二酸化炭素排出量を表示させるブラウザ拡張機能の開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
13.Green Browser Extension(ブラウザ拡張機能の開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
14.Green Browser Extension(ブラウザ拡張機能の開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
15.Space Game(シューティングゲーム開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
16.Space Game(シューティングゲーム開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
17.Space Game(シューティングゲーム開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
18.Space Game(シューティングゲーム開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
19.Space Game(シューティングゲーム開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
20.Space Game(シューティングゲーム開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
21.Banking App(銀行Webアプリ開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
22..Banking App(銀行Webアプリ開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
23.Banking App(銀行Webアプリ開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
24..Banking App(銀行Webアプリ開発)
プロジェクト名:
コンセプト;
学習目標:
リンクされたレッスン:
オフラインで「microsoft / Web-Dev-For-Beginners – GitHub」にアクセスする方法:Offline access
Docsifyを使えば、このドキュメント(microsoft/Web-Dev-For-Beginners(MIT Licence)| GitHub)をオフラインで実行することができます。このリポジトリをフォークしてローカル環境にDocsifyをインストールし、このリポジトリのルートフォルダに docsify serve
と入力してください。ウェブサイトはローカルホスト上のポート3000で提供されます: localhost:3000。
補足:
ターミナル(Mac)・コマンドプロンプト(Windows)などで 半角英数で
cd
と入力後スペースを1つあけて、「Web-Dev-For-Beginners-main」のフォルダをドラッグ&ドロップ後「enter」キーを押します。
その後、
docsify serve
と入力し「enter」キーで http://localhost:3000で閲覧出来るようになります。