1.はじめに Getting Started：Web Development for Beginners
2020年11月にMicrosoftのGitHubアカウントで公開された、HTML・CSS・JavaScriptなどが学べるWeb開発（ウェブ開・ウェブ制作）入門者向けのチュートリアル
GitHub – microsoft/Web-Dev-For-Beginners: 24 Lessons, 12 Weeks, Get Started as a Web Developer
：microsoft/Web-Dev-For-Beginners（MIT Licence）| GitHub
の以下のページ
の一部を、日々の学習を兼ねて日本語訳しておきます。
自分と同じように、これからWeb開発・Webプログラミングなどを学び始めたい方の何かしらの参考になることがありましたら幸いです。
尚、最終的な内容の詳細は、公式サイトでご自身でよくご確認いただくようお願いいたします。
ウェブ開発について学んでいきましょう！
ドキドキ
プログラミング言語と各種ツール入門：Introduction to Programming Languages and Tools of the Trade
このレッスンでは、プログラミング言語の基本を学びます。ここで取り上げたトピックは、今日のほとんどの最新のプログラミング言語に適用されます。各種ツールのセクションでは、ウェブ開発者として役立つソフトウェアについて学びます。
レクチャー前のクイズ：Pre-Lecture Quiz
初学者のためのWeb開発：クイズ
レッスン1-プログラミング言語入門：レクチャー前のクイズ
問題1.作成者がコードを書かなくてもプログラムを作成できます。
・はい：true
・いいえ：false
問題2.低級言語は、〜で人気のある選択肢です。
・Webサイト：Websites
・ハードウェア：Hardware
・ビデオゲームのソフトウェア：Video game software
問題3.Web開発者のツールはどれ？
・ラズベリーパイのようなハードウェア：Hardware, like a Raspberry Pi
・Webブラウザの開発者ツール：Browser DevTools
・オペレーションシステム（OS）のドキュメント：Operating system documentation
【答え】
問題1 → いいえ：false
：おそらくノーコード開発のことでしょうか？
問題2 → ハードウェア：Hardware
問題3 → Webブラウザの開発者ツール：Browser DevTools
導入：Introduction
このレッスンでは
・プログラミングとは何か？
・プログラミング言語の種類
・プログラムの基本要素
・エンジニア（プロの開発者）のための便利なソフトウェアとツール
などのプログラミングの基本的なことを学びます。
プログラミングって何？：What is Programming?
プログラミング（コーディングとも呼ばれる）とは、コンピュータやモバイル機器などのデバイスに命令を書くことです。
デバイスへの命令をプログラミング言語で書き、それをデバイスが解釈します。これらの命令セットは様々な名前で呼ばれることがあります。プログラム、コンピュータプログラム、アプリケーション（アプリ・アップ）、実行可能ファイルなどと一般的に呼ばれます。
プログラムはコードで書かれたものであれば何でもいいです：例えば、ウェブサイト、ゲーム、携帯アプリはプログラムです。根底にあるロジックはデバイスによって解釈され、そのロジックはコードで書かれている可能性が高いです。
コードを実行しているプログラムは、命令を実行しています。現在このレッスンを読んでいるデバイスは、画面に表示するためのプログラムを実行しています。
□ 調べてみよう：世界初のコンピュータプログラマーは誰でしょうか?
プログラミング言語：Programming Languages
プログラミング言語の目的：
開発者がデバイスに送信する命令を構築するためのものです。デバイスはバイナリ(1と0)しか理解できませんが、ほとんどの開発者にとっては、これはあまり効率的な通信方法ではありません。プログラミング言語は人間とコンピュータがコミュニケーションをするための手段です。
プログラミング言語にはさまざまな形式があり、それぞれの目的に応じて使い分けることができます。例えば、JavaScript は主にWebアプリケーションに使われ、Bash は主にオペレーティングシステムに使われます。
低級言語は通常、デバイスが命令を解釈するために必要なステップが高級言語よりも少ないです。しかし、高級言語が人気があるのは、その読みやすさ（可読性）とサポート力の高さです。JavaScript は高級言語とされています。
以下のコードは、JavaScript を使った高級言語とARM のアセンブリコードを使った低級言語の違いを示しています。
JavaScript（高級言語のコード例）
let number = 10
let n1 = 0, n2 = 1, nextTerm;
for (let i = 1; i <= number; i++) {
console.log(n1);
nextTerm = n1 + n2;
n1 = n2;
n2 = nextTerm;
}
ARM のアセンブリコード（低級言語のコード例）
area ascen,code,readonly
entry
code32
adr r0,thumb+1
bx r0
code16
thumb
mov r0,#00
sub r0,r0,#01
mov r1,#01
mov r4,#10
ldr r2,=0x40000000
back add r0,r1
str r0,[r2]
add r2,#04
mov r3,r0
mov r0,r1
mov r1,r3
sub r4,#01
cmp r4,#00
bne back
end
信じられないかもしれませんが、どちらも同じことをしています：10までのフィボナッチ数列を出力しています。
□フィボナッチ数列は、各数値が0と1から始まる2つの先行する数値の合計であるような数値の集合として定義されています。
子供プログラマーによる補足：
フィボナッチ数列（10まで）
0, 1, 1, 2, 3, 5, 8
（順番に0, 1, 0+1=1, 1+1=2, 1+2=3 ,2+3=5, 3+5=8）
上記のJavaScriptのコードを試してみたところ
「0, 1, 2, 3, 5, 8」
がコンソールに出力されるようでした。
低級言語の場合は、人間がコンピュータに指令を出すための難易度が高いですが、高級言語の場合は、やや難易度が下がりそうですね。
プログラムの構成要素：Elements of a program
プログラムの中の1つの命令はステートメント（または、文 – ぶん）と呼ばれ、通常は命令の終わりを示す印として文字や行間があります。プログラムの終了方法はプログラミング言語によって異なります。
ほとんどのプログラムは、ユーザや他の場所からのデータの使用に依存していますが、ステートメント（文）は命令を実行するためにデータに依存している場合があります。データによってプログラムの挙動を変えることができるので、プログラミング言語には、後で使用できるデータを一時的に保存する方法が用意されています。このデータは「変数」と呼ばれています。
「変数」とは、デバイスのメモリにデータを保存するように指示するステートメント（文）のことです。プログラムの中の「変数」は「代数学の変数」に似ていて、「変数」には固有の名前があり、その値は時間の経過とともに変化することがあります。
一部のステートメント（文）がデバイスによって実行されないこともあります。これは通常、開発者が書いた時の設計によるものか、予期せぬエラーが発生した時に起きます。このようなアプリケーションコントロールは、アプリケーションをより堅牢で保守性の高いものにします。一般的に、これらの制御の変更は、ある決定事項が満たされたときに起こります。プログラムの実行方法を制御するための現代のプログラミング言語の一般的な文は、「if…else 文」です。
□このタイプのステートメント（文）については、後のレッスンで詳しく説明していきます。
子供プログラマーによる補足：
プログラミングを学ぶ上で、知っておきたいこと
・文（ステートメント）
：if文（If文else節 – 2段階の分岐・If文else if節 – 3段階以上の分岐）- 条件分岐（条件によって処理内容を変える）
：for文・while文 – ループ処理（繰り返す処理）
・変数（値を代入する記号または文字列。数値や文字列などのデータを一時的に保持）
・定数（値を代入する記号または文字列。「変数」との違いは、「定数」は後から変更することができない）
・配列（複数のデータを連続的に並べたデータの構造。プログラミング言語にもよるが配列内のデータの順番は0から始まる）
・関数（入力された値に対してある決まった処理を実行）
・引数（関数に入力する値）
・クラス（モノの設計書・分類）
・オブジェクト（変数や関数の集合体。データと処理の集合体：モノ・概念）
・インスタンス（実体）
・プロパティ（一般にデータ構造と関連付けられた属性を記述する、オブジェクトの特性：性質）
・メソッド（オブジェクトのプロパティに代入された関数：命令）
・パラメータ（関数に渡される名前付きの変数：細かい指定）
・戻り値/返り値/リターン値（関数などのプログラムの結果戻ってくる値：細かい指定をして命令をした結果戻ってきたもの）
などがあります。
言葉の説明だけでは分かりにくいですが、プログラムを読み書きする中で、何度も触れることで、次第に直感的にわかってくるのではないかと思います。プログラミング初学者の方にとっては、言葉が意味不明で挫折しそうになりますよね…
まずは、プログラミング特有の言い回しがあるのだなあ・・・程度に受け流しておいてください。
また、プログラミングを学習していく中で
・GitHub
（ソフトウェア開発のプラットフォーム – 英語）
・Qiita
（エンジニアリングに関する知識を記録・共有するためのサービス – 日本語）
に公開してくださっているコードで学ぶ機会も出てくるのではないかと思いますが、実際にコードを実行してみると・・・・
「動かない…」
という経験をするのではないかと思います。
使用するプログラミング言語にもよりますが、プログラムを実行するためには、様々な依存関係の整合性をクリアする必要があるようです。そのため、プログラミング言語のバージョンや、使用している開発環境・ライブラリ・フレームワークをはじめとしたバージョンの違いによって、開発当初は予測していなかったエラーが起きます。場合によっては、その時点では解決が難しいエラーもありますが、その都度、出力されたエラーの内容を調べて、解決へ向けて国内外の情報を調べる力も要求されそうです。
プログラミングのツール（プログラミングで使う開発環境などの仕事道具）：Tools of the Trade
このセクションでは、プロの開発者としての道を歩み始める際に非常に役立つと思われるソフトウェアについて学びます。開発環境とは、開発者がソフトウェアを書くときに頻繁に使用するツールや機能のセットのことです。これらのツールの中には、開発者特有のニーズに合わせてカスタマイズされたものもありますが、開発経験を通して開発者が仕事や個人的なプロジェクトで優先順位を変えたり、異なるプログラミング言語を使用したりすると、変化する可能性もあります。プログラミングの開発環境というのは、それを使用する開発者・エンジニアと同じくらいユニークなものです。
エディタ：Editors
ソフトウェア開発において最も重要なツールの一つがエディタです。エディタはコードを書く場所であり、時にはコードを実行する場所でもあります。
開発者がエディタを使うのは、上記以外にもいくつかの理由があります：
・デバッグ（Debugging）
コードを一行ずつステップ実行して、バグやエラーを発見します。
エディタによっては、デバッグ機能を備えているものもあれば、特定のプログラミング言語用にカスタマイズして追加することもできます。
・シンタックスハイライト（構文強調）（Syntax highlighting）
コードに色やテキストの書式を追加し、読みやすくします。
ほとんどのエディタでは、シンタックスハイライト（構文強調）をカスタマイズすることができます。
・拡張機能と統合/インテグレーション（Extensions and Integrations）
デフォルト（初期状態）のエディタに組み込まれていない追加ツールにアクセスするための、追加機能です。
例えば、多くの開発者はコードを文書化し、どのように動作するかを説明する方法を必要としているので、タイプミスをチェックするためにスペルチェックの拡張機能をインストールします。これらの追加機能のほとんどは、特定のエディタ内での使用を目的としており、ほとんどのエディタには利用可能な拡張機能を検索する方法が搭載されています。
・カスタマイズ（Customization）
ほとんどのエディタはカスタマイズ可能で、開発者は自分のニーズに合った独自の開発環境を構築することになります。また、多くのエディタは開発者が独自の拡張機能を作成できるようになっています。
子供プログラマーによる補足：
エディタを始めとした開発環境の構築は、プログラミング初学者の難関ですね・・・
インターネット上にサンプルコードが掲載されていても、そのコードを使える状態にするまでの開発環境を自力で構築出来ずに、辛い思いをされている方も多いのではないかと思います。
人気のエディタとWeb開発拡張機能：Popular Editors and Web Development Extensions
・Atom
Webブラウザ：Browsers
もう一つの重要なツールはWebブラウザです。
ウェブ開発者は、自分のコードがウェブ上でどのように実行されているかを知るためにブラウザを使いますが、HTML（HyperText Markup Language）のように、エディタで書かれたWebページの視覚的な要素を表示するためにも使用されます。
多くのブラウザには「開発者ツール」（DevTools）が付属しており、開発者がアプリケーションについての重要な潜在ニーズ（インサイト）を把握するのを支援するための便利な機能や情報が含まれています。
例：
Webページにエラーがあった場合、いつエラーが発生したのかを知ることができると便利です。
ブラウザの「開発者ツール」で、情報を取得することができます。
人気のWebブラウザと開発者ツール：Popular Browsers and DevTools
・Edge – Microsoft Edge (Chromium) 開発者ツールの概要
コマンドラインツール：Command Line Tools
開発者の中には、日常のタスクをあまりグラフィカルに表示しないことを好む、コマンドライン派の開発者もいます。
コードでの開発にはかなりの量のタイピング作業が必要なため、キーボードでの作業を中断しないことを好む開発者もいます。ほとんどのタスクはマウスで完了できるのですが、コマンドラインを使う利点の一つは、マウスとキーボードを切り替えずに、多くのことができる点です。コマンドラインのもう一つの利点として、コンフィグレーション（機械やシステムの構造に関わる設定 – ソフトウェア/ハードウェア・アプリ/プログラムの設定）があります。カスタム設定を保存しておいて後で変更したり、新しい開発マシンにインポートしたりできます。
開発環境は開発者によって異なるため、コマンドラインの使用を避ける人もいれば、完全にコマンドラインに頼る人もいるでしょうし、2つの組み合わせを好む人もいるでしょう。
人気のコマンドラインオプション：Popular Command Line Options
コマンドラインのオプションは、お使いのオペレーティングシステム（OS）によって異なります。
💻 = オペレーティングシステムにプレインストールされています（あらかじめインストールされています）。
Windows
：Command Line (also known as CMD) – Windows のコマンド 💻
：Windows Terminal – Windows ターミナルとは
macOS
：Powershell – macOSへのPowerShell のインストール
Linux
：Bash – Bash Reference Manual 💻
：KDE Konsole – The Konsole Handbook
：Powershell – LinuxへのPowerShellのインストール
人気のコマンドラインツール
・Git – 分散型バージョン管理システム (💻 on most operating sytems)
ドキュメント・文書：Documentation
開発者が何か新しいことを学びたいと思ったとき、ほとんどの場合、その使い方を学ぶためにドキュメントに頼ることになるでしょう。
開発者は、ツールや言語を適切に使用する方法をガイドしたり、ツールがどのように動作するかについてより深い知識を得るために、しばしばドキュメントを活用します。
ウェブ開発に関する人気のあるドキュメント
・Mozilla Developer Network – 開発者向けのウェブ技術（日本語対応 – 無料）
・Frontend Masters（英語 – 有料）
：Frontend Masters Books（英語 – 無料）
□調べてみよう:
今回は、Web開発者の環境の基本を学びました。Webデザイナーの環境と比較してみましょう。
チャレンジ：Challenge
いくつかのプログラミング言語を比較してみましょう。
・プログラミング言語の「JavaScript」と「Java」の特徴は？
・プログラミング言語の「COBOL」と「Go」はどうですか？
レクチャー後のクイズ：Post-Lecture Quiz
初学者のためのWeb開発：クイズ
レッスン1-プログラミング言語入門：レクチャー後のクイズ
問題1.Webサイトを作成するために最も使用する可能性が高い言語は何ですか？
・Machine Code
・JavaScript
・Bash
問題2.開発環境は開発者ごとに違います。
・はい：true
・いいえ：false
問題3.バグのあるコードを修正するために開発者は何をしますか？
・シンタックスハイライト（構文強調）：Syntax highlighting
・デバッグ：Debugging
・コードのフォーマット：Code formatting
＊バグ：コンピュータのプログラムにひそむ誤り・欠陥。
【答え】
問題1 → JavaScript
・Machine Code：機械語・マシン語
・JavaScript：Webプログラミング言語
・Bash：コマンド言語
問題2 → はい：true
問題3 → デバッグ：Debugging
子供プログラマーによる補足：
今回の問題は、一連のレクチャーの内容を把握していれば比較的簡単に解けそうですね。
Web開発を学びたい方にとっては、JavaScriptは、重要なプログラミング言語のようです。
参考情報として、GitHub上で人気の高いプログラミング言語ランキングによると2014年〜2020年にかけて第1位は「JavaScript」のようです。
出典：
The 2020 State of the OCTO——VERSE | Github
2021年1月1日利用
Webプログラミング初学者にとってJavaScriptは、とっつきにくい存在かもしれませんが、これから時間をかけて学ぶ意義はありそうです。
基本的にJavaScriptは、WebブラウザがあればJavaScriptのプログラムを動かすことができるので、他のプログラミング言語に比べると環境構築が楽です。
JavaScriptのメリット・デメリット・将来性などが知りたい方は、GoogleやYouTubeなどでJavaScript関連のキーワードで検索すると、エンジニアの方などが情報をまとめてくださっているようでしたので、気になる方はチェックしてみてください。
復習・自己学習：Review & Self Study
プログラマーが利用できる様々な言語について少し勉強しましょう。
1つの言語で1行書いてみて、他の2つの言語でやり直してみてください。何を学びましたか？
子供プログラマーによる補足：
プログラミング言語の比較について
例として、JavaScriptとC言語やPythonで「Hello World」などの文字を出力する方法を比較してみると、その違いが分かるのではないかと思います。
ただ、プログラミング未経験者の方は、お使いのOS環境（Windows・Macなど）で、JavaScript・C言語・Pythonを動かす方法が分かりませんよね・・・
課題：Assignment
指示：Instructions
Web開発者が必要とする可能性のあるツールは、MDNドキュメント（MDN documentation for client-side tooling）に記載されています。
今回のレッスン１
・プログラミング言語と各種ツール入門 Intro to Programming Languages and Tools of the Trade
で紹介されていないツールを3つ選び、Web開発者がそれを使う理由を説明し、そのカテゴリに該当するツールを検索し、そのドキュメントを共有してください。MDNドキュメント上のツール例は使用しないでください。
ルーブリック（目標達成度の評価）：Rubric
・称賛：Exemplary
Web開発者がツールを使う理由を説明
・適切：Adequate
Web開発者がツールを使用する理由ではなく、どのように使用するかを説明
・改善が必要：Needs Improvement
Web開発者がツールを使用する方法や理由については言及せず
Web Development for Beginners by Microsoft レッスン１の日本語訳を終えて
今回のレッスンでは、プログラミング言語の基本ということで
・プログラミング言語の基本的な知識
・エンジニアが使うもの
などについて学びました。
日本語化する過程で、じっくり文章を読むことになりましたが、現段階では、本当に自分が、Webブラウザ上でプログラムを動かすことができるのか？不安と感じる方も多いのかもしれませんね。
「24 Lessons, 12 Weeks」ということは、２レッスンを１週間かけて学習する計算になりますので、１週間に２レッスンの翻訳を終えればいい・・・・？
と考えると、プレッシャーを感じてしまいますが、とりあえずは2021年の目標として、
・24レッスンの翻訳
・環境構築方法のチュートリアル作成
・Webアプリを動かす方法のチュートリアル作成
などが、できたらなあ…
という思いで続けていきたいと思います。
では、次回のレッスンをお楽しみに♪
：日本人のためのWeb Development for Beginners（microsoft / Web-Dev-For-Beginners：GitHub）| 一覧
– 【レッスン２】Introduction to GitHub：GitHub入門