SE奮闘記

WordPressの１ページをReactを使って開発したいと勉強しているときの覚書。

環境： CentOS 7.6, node v11.14.0

今まで通りPHPでさくっと作れるけれど下記理由で今に至る
Flutterを最近使い始めたから。FlutterがインスパイアーされたReactの仮想DOMの考え方を学びたい予約システムやLINEのようなコミュニティシステムの開発は、SPA(Single Page Application)になると思うそろそろ技術の淘汰が進んで学びやすくなっていそう

まずはReact公式サイトを読む
Create a New React App – React

そこからリンクされている記事を参考にする。
Creating a React App… From Scratch. - Noteworthy - The Journal Blog

作業環境を作る$ mkdir react-demo
$ cd react-demo/
$ npm init -y

各種ディレクトリ作成
$ mkdir public src dist

index.htmlはGistのを流し込む。
$ vi public/index.html

BabelのインストールBabelの公式サイトで各種パッケージの説明がある。
$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

Babelの設定ファイルを作る
$ vi .babelrc
{
  "presets": [
    "@babel/preset-env", "@babel/preset-react"
  ]
}
Webpackのインストール まずは必要なものだけ。
$ npm install --save-dev webpack webpack-cli babel-loader

設定ファイルを作る
$ webpack.config.js
const path = require("path");
module.exports = {
  entry: "./src/index.js",
  mode: "development",
…

React（仮想DOM）を試してみたくて、WordPressサイトの一部（ログイン後の管理画面）をReactで構築したときの覚書。

Reactの基礎 Reactは「UI構築のためのJavaScriptライブラリ」
React – ユーザインターフェース構築のための JavaScript ライブラリ

Reactの主な特徴
「learn once, use everywhere（一度学習すれば、どこでも使える）」が目標SPA(Single Page Application)を構築するのに優れている。仮想DOMの考え方はFlutterにも影響を与えた。
参考：翻訳記事:俺のFlutterはレボリューション(革命)だ！ - Qiita
Reactの参考書籍
買ったのはこの本
Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門
余計なことを掲載せず「Reactとは」を理解するには良書だと思う。
詳しいことはウェブに全部あるし。

React.jsとVue.jsとの比較 VueはReactの考え方を元に、よりシンプルに記述できるよう設計された。

参考サイト
ReactとVueのどちらを選ぶか - Qiita他のフレームワークとの比較 — Vue.js【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA

決めてになったのは最期の速度比較記事。
バックエンドがPHP(WordPress)なので、Vueの方が合っているような気もするけど、将来的なことを考えてReactを採用することにした。
…というか、これから試して実装するか判断する。



【関連記事】
「Flutter」でAndroidアプリ、iOSアプリ開発計画CentOS6でv8をソースからビルド

ReactのチュートリアルをやっているときにBabelのビルドツールとしてWebpackを導入したときの覚書。

環境： CentOS 7.6, Node.js v11.14.0, webpack v4.39.3

今までのタスクランナーは
Grunt → PhpStormのファイル監視機能
を使って問題なく開発していた。

Reactを学ぶ際に、最近流行りのWebpackも覚えておこうとやってみた。

Webpackとは Node.jsで動くビルドツール。タスクランナー、開発ウェブサーバーとしても機能もある。
最近はGulpやGruntからWebpackに移行している流れ。
[意訳]私がGulpとGruntを手放した理由 - Qiitastep by stepで始めるwebpack - Qiita

公式のチュートリアルをやる まずは大人しく公式のチュートリアルをやってみる（読んだだけでやった気にならない）。
Getting Started | webpack

lessファイルをビルド チュートリアルのディレクトリで作業する。
Lessファイルを作成
$ mkdir less
$ cd less
$ vi variables.less
@red: #ff0000;$ vi main.less
@import "./variables";
body {
  background-color: @red;
} 公式に従いless-loaderをインストール（参考：less-loader | webpack）
$ npm install less-loader --save-dev

必要なモジュールをインストール
$ npm install less style-loader css-loader --save-dev

設定変更
$ vi webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
…

駅から遠いお客様のところへタクシーを使うのも費用がかさむので、法人でタイムズカーシェアを契約したときの覚書。

公式ページはこちら。
カーシェアリングならタイムズカーシェア（旧タイムズカープラス）

タイムズカーシェアのメリット
法人の場合は月額基本料金0円キャンペーン期間中はカード発行手数料も0円使った分だけクレジットカード決済で経費処理が楽15分206円。ガソリン代込み主要な駅にはステーションがある24時間入出庫可能ゴルフ行くときなど早朝出発前から使える（夜中駐車場に停めておく必要ない）

使えるようになるまで約10日ぐらい掛かるので注意
ウェブサイトから入会申し込みして書類を発送1週間ぐらいすると法人用ログインIDが発行される（メールが届く）法人専用画面から法人でログインしたあと個人IDを確認通常画面から個人IDでログインし直す運転免許証を登録 →３営業日で認証される入会申し込みして10日後ぐらいに法人カードが届いた

アプリもある
スマートフォンアプリ | カーシェアリングのタイムズカーシェア

公式サイトの利用シーンとかみると確かに便利そうだと思う。
利用シーン | カーシェアリングのタイムズカーシェア


使ってみた感想
いろんな車に乗れて楽しいネットで事前予約するだけ（2週間前から可能）で使えるので、レンタカーみたいに受付がなくてスムーズニコニコレンタカーを使わなくなった


法人であれば登録しておいて損はない。
自宅近くの駅前にステーションがあったし、もっと早く利用すれば良かったと思ったほど。