|
9 | 9 |
|
10 | 10 | - [JavaScriptを始めよう](#javascriptを始めよう) |
11 | 11 | - [1. JavaScript に触れてみよう](#1-javascript-に触れてみよう) |
12 | | - - [1-1. ブラウザの開発者ツールを見よう](#1-1-ブラウザの開発者ツールを見よう) |
| 12 | + - [1-1. ブラウザの開発者ツールを開いてみよう](#1-1-ブラウザの開発者ツールを開いてみよう) |
13 | 13 | - [1-2. Hello, World! しよう](#1-2-hello-world-しよう) |
14 | 14 | - [2. 読みやすいコードを書くために](#2-読みやすいコードを書くために) |
15 | 15 | - [2-1. 厳格モード](#2-1-厳格モード) |
|
52 | 52 |
|
53 | 53 | ## 1. JavaScript に触れてみよう |
54 | 54 |
|
55 | | -JavaScript(以下JS)とは一般にWeb開発やシステム開発に用いられるプログラミング言語の一つです。 |
56 | | -今回はインターンでのチーム開発にあたって基礎的なJSについて説明します。 |
57 | | -> **※注意** 本記事には一部説明の簡単のために厳密には正しくない表現・説明があります。なるべく正確な記述を行いますが、気になる箇所は参考文献にある記事などから調べて貰えればと思います。 |
| 55 | +JavaScript(以下 JS )とは一般に Web 開発やシステム開発に用いられるプログラミング言語の一つです。 |
| 56 | +今回はインターンでのチーム開発にあたって基礎的な JS の構文や処理について説明します。 |
| 57 | +> **注意** |
| 58 | +本記事には一部の説明を簡単にするために、厳密には正しくない表現・説明があります。 |
| 59 | +なるべく正確な記述を行いますが、気になる箇所は参考文献にある記事などから調べて貰えればと思います。 |
58 | 60 |
|
59 | | -### 1-1. ブラウザの開発者ツールを見よう |
| 61 | +### 1-1. ブラウザの開発者ツールを開いてみよう |
60 | 62 |
|
61 | | -Chromeではウィンドウ右上のケバブボタンから開いたメニューの「その他のツール」から「デベロッパーツール」を開けます。 |
| 63 | +Chrome ではウィンドウ右上のケバブボタンから開いたメニューの「その他のツール」から「デベロッパーツール」を開けます。 |
62 | 64 |
|
63 | | - |
| 65 | +<img src="imgs/open-devtool-from-kebab.webp" width="50%" alt="開発者ツールをひらく"> |
64 | 66 |
|
65 | | -ショートカットキーが設定されているため、WindowsやChromeOSでは `Ctrl`+`Shift`+`I` で、macOSでは `Cmd`+`Option`+`I` でも開くことができます。また、ページの適当な部分で右クリックして「検証」を押すことでも開発者ツールが開けます。 |
| 67 | +ショートカットキーが設定されているため、Windows や ChromeOS では `Ctrl`+`Shift`+`I` で、macOS では `Cmd`+`Option`+`I` でも開くことができます。また、ページの適当な部分で右クリックして「検証」を押すことでも開発者ツールが開けます。 |
66 | 68 | 無事にツールが開けていれば以下のような表示になるはずです。 |
67 | 69 |
|
68 | | - |
| 70 | +<img src="imgs/devtool-opened-element.webp" width="50%" alt="開発者ツールを開いた見た目"> |
69 | 71 |
|
70 | | -開いているタブが要素タブ(Elementタブ)ではなかったり日本語化されてなかったり日本語化案内が出るかもしれませんが、ひとまずコンソールタブ(Consoleタブ)を開いてください。これで準備完了です。 |
| 72 | +開いているタブが要素タブ( Element タブ)ではなかったり、日本語化の案内が出るかもしれませんが、ひとまずコンソールタブ( Console タブ)を開いてください。 |
| 73 | +これで準備完了です。 |
71 | 74 |
|
72 | | - |
| 75 | +<img src="imgs/devtool-opened-console.webp" width="50%" alt="コンソールタブ"> |
73 | 76 |
|
74 | 77 | ### 1-2. Hello, World! しよう |
75 | 78 |
|
76 | | -「新たにプログラミング言語の学習を始めるとき、まず`Hello, World!`から始める教」に入信しているため、まずは標準的な出力方法で「Hello, World!」を表示させることにします。 |
| 79 | +「新たにプログラミング言語の学習を始めるとき、まず `Hello, World!` から始める教」に入信しているため、まずは標準的な出力方法で「Hello, World!」を表示させることにします。 |
77 | 80 | 先程開いたコンソールタブに以下のコードを入力してみてください。 |
78 | 81 |
|
79 | 82 | ```JavaScript |
80 | 83 | console.log('Hello, World!'); |
81 | 84 | ``` |
82 | 85 |
|
| 86 | +入力したら Enter キーで実行してみましょう。 |
83 | 87 | 実行すると以下の画像のように表示されるはずです。 |
84 | 88 |
|
85 | | - |
| 89 | +<img src="imgs/hello-world.webp" width="50%" alt="Hello, World!"> |
86 | 90 |
|
87 | | -このように、JSでは `Console.log(<任意の文字列>);` とすることでコンソールタブに出力を出すことができます。 |
| 91 | +このように、JS では `console.log(<任意の文字列>);` とすることでコンソールタブに出力することができます。 |
88 | 92 |
|
89 | 93 | ## 2. 読みやすいコードを書くために |
90 | 94 |
|
|
0 commit comments