はじめに
Webフレームワーク、フロントエンドを開発するにあたり、大前提の知識すらわかっていなかったので、個人的な備忘録メモ、および、リンク集になります。
gulpについて
gulpについては以下のサイトがわかりやすかったです。
簡潔に言うと、Web開発にひつような工程を自動化してくれるツール。
絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう...
ics.media
gulpを使うためにはNode.jsが入った環境でnpmを用いてgulpをインストールします。
gulpをインストールするとnode_modulesディレクトリにインストールされます。
gulpを使うためにはnode_moduels内にgulpがインストールされており、gulpfile.jsが定義されていることで起動します。名前はgulpfile.jsである必要があります。
$ cat gulpfile.js
var gulp = require('gulp');
//プラグインを読み込んでいる。
var watch = require('gulp-watch');
//プラグインを読み込んでいる。npmでインストールされている必要有り
var browserSync = require('browser-sync').create();
//プラグインを読み込んでいる。npmでインストールされている必要有り
// Static server
gulp.task('browser-sync', function() {
//タスク名 browser-sync。処理はfunction以降
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('watch', function () {
//タスク名 watch。処理はfunction以降
// Callback mode, useful if any plugin in the pipeline depends on the `end`/`flush` event
watch(['./**/*.html', './js/**/*.js'], function () {
browserSync.reload();
});
});
gulp.task('default', gulp.series( gulp.parallel('browser-sync','watch') ));
gulpを実行することで、gulpfile.jsに従い、自動処理が行われます。
$ gulp
[18:41:18] Using gulpfile C:\cygwin64\home\homap\react\gulpfile.js
[18:41:18] Starting 'default'...
[18:41:18] Starting 'browser-sync'...
[18:41:18] Starting 'watch'...
[Browsersync] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.3.9:3000
------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
------------------------------------
[Browsersync] Serving files from: ./
Reactの基本構成
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React + Redux</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="./js/app.js"></script>
</body>
</html>scriptタグで./js/app.jsを読み込んでいる。
また、divタグでid属性にrootを指定している。
app.js
const helloWorld = React.createElement('h1',null, 'Hello React')
ReactDOM.render(
helloWorld,
document.getElementById('root')
);id=”root”の中に、helloworldを組み込む。
つまり、index.htmlのdivタグの中でh1のHello Reactが展開される。
実行すると以下のような感じ。なるほど！
DOMとVirtual DOM
DOMについては、以下のサイトが初心者にはわかりやすかった。
JavaScript初心者でもすぐわかる！DOMとは何か？
DOMとはJavaScriptでhtmlの要素を操作するための仕組みのことだ。このページではDOMの仕組みと使い方についてJavaScript初心者の方でもわかるように解説した。
eng-entrance.com
DOMとは - DOM入門 - JavaScript入門
DOMとは
www.javadrive.jp
仮想DOMについては、以下のサイトがわかりやすかったです。
コメント