-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Merge pull request #18 from Atotti/ayuto
かしつ・修正
Showing
6 changed files
with
104 additions
and
5 deletions.
There are no files selected for viewing
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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は宣言型プログラミングが最高!** | ||
|
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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フレームワークを使うと革命が起きる! |