Gulp4.0 でライブリロード

1)静的ファイルのライブリロード

ググると無数にヒットするGulpですが、

無駄に独自カスタムしたGulpファイルを掲載する記事が多いので、

ミニマムで Gulp で使うために丁度よい記事を紹介します。

https://www.browsersync.io/docs/gulp#gulp-manual-reload

 

 

2)PHPのライブリロード記事。

https://tamago-gohan.com/mamp_php-html/

まだPHPの方は試してないけど、

MAMPでサーバを起動しつつ、

Gulpでは、ファイル保存されたらブラウザリロードする監視機能を提供するようだ。

 

ライブリロードはワンランク上のオッサンの必須アイテムだ

 

 

 

 

 

yarn

yarn (ヤーン)

 

apt-get, brew, npm みないな、パッケージ管理ツール。

パッケージのインストールが早いから npm より好まれる。

 

yarn は日本語ドキュメントが用意されている。

 

例えば、古くなったパッケージを更新する、

$ yarn update-interactive

https://yarnpkg.com/ja/docs/cli/upgrade-interactive

 

 

CSS-Flexbox

CSS-Flexbox 


CSS-Grid がページを構成するエリアを設定するプロパティであることに対し、

CSS-Flexbox は、エリア内に存在するコンテナとコンテナ内のアイテムの並び順(折返し/上下中央揃え/拡縮)を指定するプロパティです。


```

コンテナのプロパティ

1. flex-flow... 2,3を同時指定出来るプロパティ

-2. flex-direction... アイテムの並び順(縦/横ならび、右から左から)

-3. flex-wrap... アイテムの折り返し

4. justify-content... グリッドを水平方向に、アイテムのまとまりを(左/右/中央揃え)、均等(左右余白なし/あり)

5. align-content... グリッドを垂直方向に、アイテムのまとまりを(上/下/中央揃え)、均等(上下余白なし/あり)

6. align-items... すべてのアイテムに対して、1行の垂直方向の位置(上/下/中央揃え)

アイテムのプロパティ

1. item-order... HTMLの実装順に関わらず並び順を指定できるプロパティ

2. align-self... 個々のアイテムに対して、1行の垂直方向の位置(上/下/中央揃え)

3. flex... 4,5,6 を同時指定できる

-4. flex-grow... 伸長率を指定

-5. flex-shrink... 縮小率を指定

-6. flex-basis... ベースの幅を%指定

```


注意点

垂直方向を指定する vertical-align が使えなくなる。代わりにコンテナプロパティの align-content か、アイテムプロパティの align-self を使用すること。

React で何が出来るか

React とは、GmailGoogle drive のような Web アプリを作るときに使う、フロントエンドのライブラリです。


例えば、ユーザーがブラウザの画面上から特定のデータを選択して削除したり、メッセージを投稿するなどの操作をした時、Webアプリはデータベースサーバーに問い合わせ、値を取得・作成・編集・削除といった処理をします。

 

このとき、データ処理の直後にブラウザのDOM構造を変化させるのですが、それをエンジニアが実装していると、人的ミスが起きたり、非同期処理のネストが深くなったりして設計がカオス化していました。

React は、こういった問題を解決します。

 

データ処理とDOM構造の変化の対応付けをしてくれる、という特徴のほかに、コンポーネント化も可能です。

 

コンポーネント化されたウィジェットは公開されていて、使用することが出来ます。

https://github.com/brillout/awesome-react-components

 

同じような事ができるフロントエンドのライブラリには、

vue.js や angular.js があり、

学習コスト、経験があるエンジニアの数、メンテナンスコスト、技術的寿命など

プロジェクトで何を重視するかで選択される事が多いです。