プログラミング入門コース［2週目］

<strong>プログラミング未経験者でもたった8週間でWeb開発可能！</strong>
おっさんでもこうなれるのか:bangbang:
という思いで5／29日（月）からスパルタコーディングクラブの
プログラミング入門コースにて学習を開始しました！
今週は2週目となります。
結構難しくなってきたぜ〜:sweat_smile:

:arrow_forward: [スパルタコーディングクラブ](https://www.japan.spartacodingclub.com/)
![スクリーンショット 2023-06-04 11.14.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470116/950cc799-f042-9a6f-9811-88ffb8ed7e60.png)

## 第2週目スタート
###### 1週間の振り返り（2週目）
今週は平日は仕事ですが、動画も10分ぐらいなので、
隙間時間を見つけて少しづつ学習を進めていましたが
かなり内容も難しくなってきたので見返しながらやっていたら
1週間フルフルになりました。
来週も同じ感じかな〜？より高度になってｷﾀ━━━ヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)ノ━━━!!
でも頑張ります！

### ■JavaScript
JavaScriptは動き！
HTMLは骨組み、CSSは装飾
![jsimg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470116/8b23f910-aa90-0386-3e7f-a7506edafae4.png)
●webサイトを作る時に必要な三種の言語:interrobang:
HTML／CSS／JavaScript
webページは基本的に、
この3つのプログラミング言語で構成されることがほとんどです。
![webele.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470116/e7b09c86-b6cb-6847-f90e-60de95391f95.png)

●JavaScriptの記述例：コンソールで確認したい時
```Javascript
<script>
	function hey() {
		console.log("こんにちは")
	}
</script>
```
●JavaScriptの記述例：リスト型（順番を持っているデータ型「 [　] で囲う」）
:loudspeaker: ここ重要です！**コンピュータは0から数えます! リストに入っている最初の値は[0]で呼び出します!**
```Javascript
let a = ['りんご','すいか','いちご','かき']
```

●JavaScriptの記述例：ディクショナリ型（キー(key)-バリュー(value) 値の束「 { } で囲う」）
```Javascript
let a = {'name':'太郎','age':27}
```
●JavaScriptの記述例：リスト型とディクショナリ型の組み合わせ
:loudspeaker: ここ重要です！**大かっことキー - バリュー, この2種類からなるデータはよく使います！**
```Javascript
let a = [
	{'name':'太郎','age':27},
	{'name':'花子','age':15},
	{'name':'伸夫','age':20}
]
```
### ■jQuery（ジェイクエリー）
JavaScriptでできることを
コンパクトかつ便利にまとめたライブラリ言語である。
長く複雑になってしまうコードをjQueryでより直観的に書くことができます。
:arrow_forward: [jQuery](https://jquery.com/)

●jQueryを利用するには\<head>と\</head>の間に下記のコードを入れる
```JavaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
```
●プログラムでjQueryを使うには\$(’#id値’)の記述が必要
```JavaScript
document.getElementById("element").style.display = "none";
//この長いJavaScriptをjQueryで記述すると
$('#element').hide()
//という短いコードで記述できる
```
●jQueryは基本**id値**で要素を指定する
```JavaScript
$('#id名')
<div id="値"></div>
//idは重複して使用不可能、タグ1個に1個だけ指定可能
//【補足】
$('.class名')
<div class="値"></div>
//classは重複して使用可能、タグ1個に複数のclassを指定することもできる
```
### ■Fetch（フェッチ）
プログラムの特定の場所からデータなどを読み出す動作のこと

●fetchの基本形
```JavaScript
fetch("ここにURLを入力") // このURLでウェブ通信をリクエストする。 括弧の中に他のものがなければGET！
	.then(res => res.json()) // 通信リクエストを受けたデータはresという名前でJSON化する
	.then(data => { 
		console.log(data) // 開発者ツールに出力してみる
	}) // JSON形態に変わったデータをdataと名付けて使用する

//JSONとは「JavaScript Object Notation」の略で、「JavaScriptのオブジェクトの書き方を元にしたデータ定義方法」のこと
```

###### 2週目の成果
Githubにて1週間で学習しながら製作したサイトを公開しました。
（温度がリアルタイムに変化します）
:arrow_forward: [2週目の成果](https://keigtogac.github.io/mypage_003/)
![スクリーンショット 2023-06-11 23.31.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470116/dc4265e2-5690-0577-97b1-38af704de1b0.png)


###### 来週の目標
かなり難しくなってきたので、復習しながら
課題にもっと効率良く勉強していこう！



---

### ●プログラムの考え方の補足/参考情報
【JavaScriptのデータ型について】
#### **var**
・重複宣言できる。
　・var a = 10; var a = 20;の文法が許される
・宣言後、データを変えることができる。
　・var a = 10; a = 20;の文法が許される
・自由度と柔軟性が高いため、使うときは注意が必要とされる。
・条件分岐や繰り返し文の中に宣言する場合、外から操作できる。
#### **let**
・重複宣言できない。
・宣言後、データを変えることができる。
　・let a = 10; a = 20;の文法が許される
・ES6から追加されたデータ型
・条件分岐や繰り返し文の中に宣言する場合、外から操作できない。
#### **const**
・重複宣言できない。
・宣言後、データを変えることもできない。
・ES6から追加されたデータ型
・条件分岐や繰り返し文の中に宣言する場合、外から操作できない。
【演算子】
+：足し算
-：引き算
*：掛け算
/：割り算
%：割り算の余り（modular演算）
【比較演算子】
※条件分岐と繰り返し文で使われる
a < b：aはbより小さい
a <= b：aはbと同じまたはより小さい
a === b：aとbはデータ型を含めて完璧に一致している
a !== b：aとbはデータ型を含めて完璧に一致してない
a == b：aとbはaのデータ型基準で一致している
a != b：aとbはaのデータ型基準で一致してない
a > b：aはbより大きい
a >= b：aはbと同じまたはより大きい
【論理演算子】
※条件分岐と繰り返し文で複数の条件を取り扱う際に使われる
a>=3 && b>=3：aとbは3以上である。
a>=3 || b>=3：aまたはbは3以上である。
!a：true/falseの値で主に使われる。既存の値を否定する。