diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md index 54b7b50f..1fbc51d8 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md @@ -6,12 +6,12 @@ - [ ] JavaScript - [ ] Bash -1. Development environments are unique to each developer +2. Development environments are unique to each developer - [ ] True - [ ] False -1. What will a developer do to fix buggy code? +3. What will a developer do to fix buggy code? - [ ] Syntax highlighting - [ ] Debugging diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md index 2032a9d3..82e8e597 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md @@ -1,18 +1,18 @@ -*Complete this quiz in class* - -1. A program can be created without the creator writing any code - -- [ ] True -- [ ] False - -1. Low level languages are a popular choice for: - -- [ ] Websites -- [ ] Hardware -- [ ] Video game software - -1. Which one of these tools would most most likely be in a web developer's environment? - -- [ ] Hardware, like a Raspberry Pi -- [ ] Browser DevTools -- [ ] Operating system documentation +*Complete this quiz in class* + +1. A program can be created without the creator writing any code + +- [ ] True +- [ ] False + +2. Low level languages are a popular choice for: + +- [ ] Websites +- [ ] Hardware +- [ ] Video game software + +3. Which one of these tools would most likely be in a web developer's environment? + +- [ ] Hardware, like a Raspberry Pi +- [ ] Browser DevTools +- [ ] Operating system documentation diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md new file mode 100644 index 00000000..aaa8555e --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md @@ -0,0 +1,18 @@ +*択一です。このクイズを解いてみましょう。* + +1. Webサイトを作るときに最もよく使われるプログラミング言語はどれでしょう？ + +- [ ] 機械語 +- [ ] JavaScript +- [ ] Bash + +2. 開発環境は開発者ごとに異なる？ + +- [ ] はい +- [ ] いいえ + +3. バグだらけのコードを修正するため、開発者は何をしますか？ + +- [ ] シンタックスハイライト +- [ ] デバッグ +- [ ] コードフォーマット diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md new file mode 100644 index 00000000..0007a17c --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md @@ -0,0 +1,18 @@ +*この問題を解いてみよう。* + +1. コードを書かなくてもプログラムを作ることはできる？ + +- [ ] はい +- [ ] いいえ + +2. 低レベル言語がポピュラーな分野はどこですか？ + +- [ ] Webサイト +- [ ] ハードウェア +- [ ] ゲームソフト + +3. Web開発者と最も関連性の高いツールはどれでしょう？ + +- [ ] Raspberry Piのようなハードウェア +- [ ] ブラウザ開発者ツール +- [ ] OSドキュメント diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md new file mode 100644 index 00000000..00569fd1 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md @@ -0,0 +1,247 @@ +# プログラミング言語と開発ツール入門 + +このレッスンでは、まずプログラミング言語の基礎を学びます。 +ここで取り上げた特徴は、最新のプログラミング言語のほとんどに当てはまります。 +次にツールセクションでは、開発者にとって有用なソフトウェアを紹介します。 + +![Intro Programming](../webdev101-programming.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## 事前クイズ +[事前クイズ](.github/pre-lecture-quiz.ja.md) + +## Introduction + +この講座には以下が含まれています。 + +- プログラミングとは何か？ +- プログラミング言語の種類 +- プログラムの基本要素 +- 開発ツール + +## プログラミングとは何か？ + +プログラミング(コーディングとも表されます)とは、コンピュータやモバイル機器などのデバイスに対して、命令を出すことです。 +命令はプログラミング言語で書かれており、そしてデバイスはその命令を解釈して実行します。 +この命令は色々な名称で呼ばれることがありますが、*プログラム*、*コンピュータプログラム*、*アプリケーション(アプリ)*、*実行可能ファイル*、などが一般的に使われています。 + +*プログラム*とは、コードで書かれている何かです。 +Webサイトも、ゲームも、スマホアプリも、全てがプログラムです。 +コードを書かずにプログラムを作ることも可能ですが、作り上げたロジックは実際にはコードで書かれていて、実際にデバイスが解釈するのはコードです。 +プログラムはコードを実行し、デバイスに命令を出します。 +あなたが今このレッスンを読んでいるということは、文字を画面に表示するというプログラムをデバイスが実行しているということです。 + +✅ ちょっと調べてみましょう：世界初のコンピュータプログラマは誰でしょうか？ + +## プログラミング言語 + +プログラミング言語の主な目的は、開発者がデバイスに対して命令を送信する手助けをすることです。 +デバイスはバイナリ(要するに0と1)しか理解することができず、そして*ほとんどの*開発者にとってバイナリはあまり効率的な命令手段ではありません。 +プログラミング言語は、人間とコンピュータがコミュニケーションを取るための手段なのです。 + +世の中には様々な目的のために様々なプログラミング言語が存在しています。 +たとえばJavaScriptは主にWebアプリケーションのために、Bashは主にOSとの対話のために使われます。 + +*低レベル言語*とは、デバイスが命令を解釈するために必要なステップ数が、*高レベル言語*より少ない言語のことです。 +高レベル言語が人気であるのは、その読みやすさとサポート能力によるものです。 +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; +} +``` + +```c + 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個出力します。 + +✅ [フィボナッチ数](https://en.wikipedia.org/wiki/Fibonacci_number)とは、各数がその手前の二つの値の和である値の集合です。 + +## プログラムの基本要素 + +プログラムにおいてひとつの命令は*文*と呼ばれ、文は通常は改行などの*区切り文字*で分かたれます。 +プログラムの区切り文字は言語によって異なります。 + +多くのプログラムは、ユーザや他から来た入力データによって出力が変わります。 +データによってプログラムの動作を変えるため、プログラミング言語にはデータを一時的に保存しておく方法が用意されています。 +そのデータは*変数*と呼ばれています。 +変数とは、デバイス内のメモリにデータを保存する文のことです。 +プログラムにおける変数は数学における変数と似ていて、変数には固有の名称があり、その値は処理の経過に伴って変化することがあります。 + +プログラムには、実行されない文が現れることがあります。 +これは、そうなるように開発者が設計して制御されたものであるか、予期せぬエラーが発生したかのいずれかです。 +アプリケーションの制御は、堅牢で信頼性の高いプログラムを書くために必要なことです。 +制御は、何らかの条件が満たされたことによって発生することが一般的です。 +最近のプログラミング言語には、実行される文を制御するために`if...else`のような文が存在します。 + +✅ これら文については次のレッスンで詳しく学びます。 + +## 開発ツール + +[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") + +このセクションでは、プロの開発者としての道を歩き始めるときに役立つであろうソフトウェアについて紹介します。 + +**開発環境**とは、開発者がソフトウェアを作成する際に頻繁に使用するツールや機能のセットのことです。 +開発環境は、開発者が特定のニーズに合わせてカスタマイズしたり、優先順位を変更したり、異なるプログラミング言語を使用したりといった理由で次々と変わっていくこともあります。 +開発環境は、それを使用する開発者の数と同じくらい千差万別です。 + +### エディタ + +ソフトウェア開発において最も重要なツールのひとつが、エディタです。 +エディタはコードを書く場所であり、時にはコードを実行する場所であることもあります。 + +開発者がエディタを使う理由は、それ以外にも多々あります。 + +- *デバッグ* +コードを1行1行ステップ実行することで、バグやエラーを発見しやすくします。 +デバッグ機能を備えたエディタや、特定のプログラミング言語用にカスタマイズすることができるエディタも存在します。 + +- *シンタックスハイライト* +コードに色や書式を設定することで、コードを読みやすくします。 +多くのエディタはシンタックスハイライトをカスタマイズすることもできます。 + +- *拡張機能* +デフォルトでは含まれない、一部の開発者向けに特化された拡張機能を追加することができます。 +例えば、コードをドキュメント化してどのように動作するかを確認したいユーザがいて、タイプミスのチェックのためにスペルチェックを行いたいユーザがいて、各自が自分のほしい拡張機能をインストールすることができます。 +ほとんどの拡張機能は特定のエディタでのみ動作するもので、そしてほとんどのエディタは拡張機能を検索する方法を用意しています。 + +- *カスタマイズ* +ほとんどのエディタは幅広いカスタマイズが可能で、開発者は自分のニーズに合わせた開発環境を作ることができます。 +さらに多くのエディタでは、開発者が自分で拡張機能を作ることも可能です。 + +#### 有名なエディタとWeb開発向けのエクステンション + +- [Visual Studio Code](https://code.visualstudio.com/) + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) + - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [Atom](https://atom.io/) + - [spell-check](https://atom.io/packages/spell-check) + - [teletype](https://atom.io/packages/teletype) + - [atom-beautify](https://atom.io/packages/atom-beautify) + +### ブラウザ + +もうひとつの重要なツールはブラウザです。 +Web開発者は、自分のコードがWeb上でどのように実行されるかを確認するため、そしてHTML要素を視覚的に確認するためにブラウザを必要とします。 + +多くのブラウザには*開発者ツール*が付属しており、アプリケーションの動作を収集・分析するために便利な機能や情報があります。 +たとえば開発者ツールを使って、Webページにエラーがあった場合に、いつどこでエラーが発生したかを把握することができます。 + + +#### 有名なブラウザ + +- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) +- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) +- [Firefox](https://developer.mozilla.org/docs/Tools) + +### コマンドラインツール + +開発者の中には、日常の作業をGUIで行うことを好まず、コマンドラインに多くを頼る人もいます。 +コードの開発には多量のタイピングが必要となるため、マウスを使うためにキーボードから手を外すことで作業の流れを中断されることを避け、キーボードショートカットを駆使して複数のファイルを操作したり複数のツールを併用したりします。 + +多くのタスクはマウスだけでも実行可能です。 +しかし、コマンドラインの利点のひとつが、マウスとキーボードで行ったり来たりせずにキーボードだけで作業を完結できるというものです。 +またコマンドラインのもうひとつの利点が、カスタム設定を登録しておくことが可能ということです。 +さらにマシンを新調したときに設定を移動することもできます。 + +開発環境は個人個人によって非常に異なるため、コマンドラインの使用を避ける人もいれば、完全にコマンドラインだけしか使わない人もいます。 +両方とも使う人も多いでしょう。 + +### 有名なコマンドラインオプション + +コマンドラインオプションは、OSによって異なります。 + +💻はOSにプリインストールされているものです。 + +#### Windows + +- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻 +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻 +- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) +- [mintty](https://mintty.github.io/) + +#### MacOS + +- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 +- [iTerm](https://iterm2.com/) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7) + +#### Linux + +- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 +- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7) + +#### 有名なコマンドラインツール + +- [Git](https://git-scm.com/) (多くのOSで 💻) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### ドキュメント + +何か新しいことを学びたいと思ったとき、その使い方を学ぶためには大抵ドキュメントに頼ることになるでしょう。 +開発者は、ツールや言語を適切に使用する方法を学んだり、その仕組みについて深く調べる場合、まずはドキュメントを参照します。 + +#### Web開発者向けの有名なドキュメント + +- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +✅ Web開発者の開発環境の基礎を理解したところで、Webデザイナーの開発環境との違いを見てみましょう。 + +--- + +## 🚀 チャレンジ + +いくつかのプログラミング言語について比較してみましょう。 +JavaScriptとJavaの特徴は？ +COBOLとGoについては？ + +## 事後テスト +[事後テスト](.github/post-lecture-quiz.ja.md) + +## レビュー & 自習 + +プログラマーが利用できる様々な言語について、少しだけかじってみましょう。 +ひとつの言語で1行書いて実行したら、次は別のふたつの言語で同じことをやってみてください。 +なにかわかりましたか？ + +## 課題 + +[assignment.md](../assignment.md) diff --git a/1-getting-started-lessons/2-github-basics/README.md b/1-getting-started-lessons/2-github-basics/README.md index 24415aa9..2f1a4b6b 100644 --- a/1-getting-started-lessons/2-github-basics/README.md +++ b/1-getting-started-lessons/2-github-basics/README.md @@ -82,13 +82,38 @@ Let's say you have a folder locally with some code project and you want to start Typically a `git status` command tells you things like what files are ready to be _saved_ to the repo or has changes on it that you might want to persist. -1. **Add files to tracking** +1. **Add all files for tracking** + This also called as staging files/ adding files to the staging area. ```bash git add . ``` - The `git add` plus `.` argument indicates that all your files & changes for tracking. + The `git add` plus `.` argument indicates that all your files & changes for tracking. + +1. **Add selected files for tracking** + + ```bash + git add [file or folder name] + ``` + + This helps us to add only selected files to the staging area when we don't want to commit all files at once. + +1. **Unstage all files** + + ```bash + git reset + ``` + + This command helps us to unstage all files at once. + +1. **Unstage a particular file** + + ```bash + git reset [file or folder name] + ``` + + This command helps us to unstage only a particular file at once that we don't want to include for the next commit. 1. **Persisting your work**. At this point you've added the files to a so called _staging area_. A place where Git is tracking your files. To make the change permanent you need to _commit_ the files. To do so you create a _commit_ with the `git commit` command. A _commit_ represents a saving point in the history of your repo. Type the following to create a _commit_: diff --git a/1-getting-started-lessons/3-accessibility/README.md b/1-getting-started-lessons/3-accessibility/README.md index 601b0de1..99723168 100644 --- a/1-getting-started-lessons/3-accessibility/README.md +++ b/1-getting-started-lessons/3-accessibility/README.md @@ -62,7 +62,7 @@ When a particular phrase needs to be highlighted, use the `` or `` e ### Use the correct HTML -With CSS and JavaScript it's possible to many any element look like any type of control. `` could be used to create a `