Skip to content

Commit

Permalink
Merge pull request #18 from Atotti/ayuto
Browse files Browse the repository at this point in the history
かしつ・修正
Atotti authored Dec 5, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents 5561806 + 1bf028f commit 4b0962a
Showing 6 changed files with 104 additions and 5 deletions.
File renamed without changes.
File renamed without changes.
49 changes: 49 additions & 0 deletions ayuto/chapter03/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
# JavaScriptでUIを更新する
### 今後も使うこと
- `const`はJavaScriptの宣言子

### 今後は使わなそうなこと
- `getElementById()`はJavaScriptのDOMメソッドの一つ
`id`を指定して特定のDOM(エレメント)を取得出来る。取得したDOMに対して`appendChild`等のDOM操作が出来る。
- `document`はブラウザが現在読み込んでいるウェブページのオブジェクトでHTML文書全体を表す


### HTMLで普通に書くとこうなる
```html
<html>
<body>
<div id="neko">
<h1>ねこねこねこ</h1>
</div>
</body>
</html>
```

### DOM操作で`<div id=neko></div>`の中を書くとこうなる
```html
<html>
<body>
<div id="neko"></div>
<script type="text/javascript">
const neko = document.getElementById('neko');
// createElement()メソッドで空のh1要素を作成
const header = document.createElement('h1');
// ただの文字列を作成
const text = 'ねこねこねこ';
// createTextNode()メソッドでテキストノードを作成
const headerContent = document.createTextNode(text);
// 作ったテキストノードをh1要素(7行目で作ったheader)の中身に追加
header.appendChild(headerContent);
// 作ったh1要素をdiv要素(3行目で作ったneko)に追加
neko.appendChild(header);
</script>
</body>
</html>
```


このように素のJavaSciptでUIを操作するのは冗長で長い -> **UIは宣言型プログラミングが最高!**

5 changes: 0 additions & 5 deletions ayuto/chapter03/chapter03.md

This file was deleted.

18 changes: 18 additions & 0 deletions ayuto/chapter04/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
## JSX
JavaScriptの拡張記法
こんなやり方でhtml中でJSX書けるの初めて知った。普通拡張子をjsxにするよね

```html
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
</script>
</body>
</html>
```
37 changes: 37 additions & 0 deletions ayuto/chapter05/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
## コンポーネント
JSX中に`DOM`を戻り値に取るJavaScriptの関数を作る(大文字始まりで)
と、あら不思議コンポーネントが出来上がる。
関数を作成するメリットは再利用可能なこと。同様にコンポーネントにすれば
`DOM`を再利用可能になる。

```html
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById("app")
function Header() {
return (<h1>Develop. Preview. Ship. 🚀</h1>)
}
function HomePage() {
return (
<div>
{/* Nesting the Header component */}
<Header />
</div>
);
}
ReactDOM.render(<HomePage />, app)
</script>
</body>
</html>
```

自分で使う分にも便利だけど`DOM`UIフレームワークを使うと革命が起きる!

0 comments on commit 4b0962a

Please sign in to comment.