Skip to content

Commit bb362a4

Browse files
authored
Merge pull request #61 from jigintern/haruto17/chapter-1
📝 1章「JavaScript に触れてみよう」の修正
2 parents 40abe10 + 54a1aeb commit bb362a4

9 files changed

+18
-14
lines changed

javascript/DOCS.md

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
- [JavaScriptを始めよう](#javascriptを始めよう)
1111
- [1. JavaScript に触れてみよう](#1-javascript-に触れてみよう)
12-
- [1-1. ブラウザの開発者ツールを見よう](#1-1-ブラウザの開発者ツールを見よう)
12+
- [1-1. ブラウザの開発者ツールを開いてみよう](#1-1-ブラウザの開発者ツールを開いてみよう)
1313
- [1-2. Hello, World! しよう](#1-2-hello-world-しよう)
1414
- [2. 読みやすいコードを書くために](#2-読みやすいコードを書くために)
1515
- [2-1. 厳格モード](#2-1-厳格モード)
@@ -52,39 +52,43 @@
5252

5353
## 1. JavaScript に触れてみよう
5454

55-
JavaScript(以下JS)とは一般にWeb開発やシステム開発に用いられるプログラミング言語の一つです。
56-
今回はインターンでのチーム開発にあたって基礎的なJSについて説明します。
57-
> **※注意** 本記事には一部説明の簡単のために厳密には正しくない表現・説明があります。なるべく正確な記述を行いますが、気になる箇所は参考文献にある記事などから調べて貰えればと思います。
55+
JavaScript(以下 JS )とは一般に Web 開発やシステム開発に用いられるプログラミング言語の一つです。
56+
今回はインターンでのチーム開発にあたって基礎的な JS の構文や処理について説明します。
57+
> **注意**
58+
本記事には一部の説明を簡単にするために、厳密には正しくない表現・説明があります。
59+
なるべく正確な記述を行いますが、気になる箇所は参考文献にある記事などから調べて貰えればと思います。
5860

59-
### 1-1. ブラウザの開発者ツールを見よう
61+
### 1-1. ブラウザの開発者ツールを開いてみよう
6062

61-
Chromeではウィンドウ右上のケバブボタンから開いたメニューの「その他のツール」から「デベロッパーツール」を開けます。
63+
Chrome ではウィンドウ右上のケバブボタンから開いたメニューの「その他のツール」から「デベロッパーツール」を開けます。
6264

63-
![開発者ツールをひらく](imgs/open-devtool-from-kebab.png)
65+
<img src="imgs/open-devtool-from-kebab.webp" width="50%" alt="開発者ツールをひらく">
6466

65-
ショートカットキーが設定されているため、WindowsやChromeOSでは `Ctrl`+`Shift`+`I` で、macOSでは `Cmd`+`Option`+`I` でも開くことができます。また、ページの適当な部分で右クリックして「検証」を押すことでも開発者ツールが開けます。
67+
ショートカットキーが設定されているため、Windows や ChromeOS では `Ctrl`+`Shift`+`I` で、macOS では `Cmd`+`Option`+`I` でも開くことができます。また、ページの適当な部分で右クリックして「検証」を押すことでも開発者ツールが開けます。
6668
無事にツールが開けていれば以下のような表示になるはずです。
6769

68-
![開発者ツール開いた見た目](imgs/devtool-opened-element.png)
70+
<img src="imgs/devtool-opened-element.webp" width="50%" alt="開発者ツールを開いた見た目">
6971

70-
開いているタブが要素タブ(Elementタブ)ではなかったり日本語化されてなかったり日本語化案内が出るかもしれませんが、ひとまずコンソールタブ(Consoleタブ)を開いてください。これで準備完了です。
72+
開いているタブが要素タブ( Element タブ)ではなかったり、日本語化の案内が出るかもしれませんが、ひとまずコンソールタブ( Console タブ)を開いてください。
73+
これで準備完了です。
7174

72-
![コンソールタブ](imgs/devtool-opened-console.png)
75+
<img src="imgs/devtool-opened-console.webp" width="50%" alt="コンソールタブ">
7376

7477
### 1-2. Hello, World! しよう
7578

76-
「新たにプログラミング言語の学習を始めるとき、まず`Hello, World!`から始める教」に入信しているため、まずは標準的な出力方法で「Hello, World!」を表示させることにします。
79+
「新たにプログラミング言語の学習を始めるとき、まず `Hello, World!` から始める教」に入信しているため、まずは標準的な出力方法で「Hello, World!」を表示させることにします。
7780
先程開いたコンソールタブに以下のコードを入力してみてください。
7881

7982
```JavaScript
8083
console.log('Hello, World!');
8184
```
8285

86+
入力したら Enter キーで実行してみましょう。
8387
実行すると以下の画像のように表示されるはずです。
8488

85-
![Hello, World!](imgs/hello-world.png)
89+
<img src="imgs/hello-world.webp" width="50%" alt="Hello, World!">
8690

87-
このように、JSでは `Console.log(<任意の文字列>);` とすることでコンソールタブに出力を出すことができます
91+
このように、JS では `console.log(<任意の文字列>);` とすることでコンソールタブに出力することができます
8892

8993
## 2. 読みやすいコードを書くために
9094

-168 KB
Binary file not shown.
15.2 KB
Loading
-144 KB
Binary file not shown.
47.8 KB
Loading

javascript/imgs/hello-world.png

-86.9 KB
Binary file not shown.

javascript/imgs/hello-world.webp

18.8 KB
Loading
-102 KB
Binary file not shown.
45.7 KB
Loading

0 commit comments

Comments
 (0)