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.expo...

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を手放した理由 - Qiita step 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...

駅から遠いお客様のところへタクシーを使うのも費用がかさむので、法人でタイムズカーシェアを契約したときの覚書。 公式ページはこちら。 カーシェアリングならタイムズカーシェア（旧タイムズカープラス） タイムズカーシェアのメリット 法人の場合は 月額基本料金0円 キャンペーン期間中はカード発行手数料も0円 使った分だけクレジットカード決済で 経費処理が楽 15分206円。 ガソリン代込み 主要な駅にはステーションがある 24時間入出庫可能 ゴルフ行くときなど早朝出発前から使える（夜中駐車場に停めておく必要ない） 使えるようになるまで約10日ぐらい掛かるので注意 ウェブサイトから入会申し込みして書類を発送 1週間ぐらいすると法人用ログインIDが発行される（メールが届く） 法人専用画面から法人でログインしたあと個人IDを確認 通常画面から個人IDでログインし直す 運転免許証を登録 →３営業日で認証される 入会申し込みして10日後ぐらいに法人カードが届いた アプリもある スマートフォンアプリ | カーシェアリングのタイムズカーシェア 公式サイトの利用シーンとかみると確かに便利そうだと思う。 利用シーン | カーシェアリングのタイムズカーシェア 使ってみた感想 いろんな車に乗れて楽しい ネットで事前予約するだけ（2週間前から可能）で使えるので、レンタカーみたいに受付がなくてスムーズ ニコニコレンタカーを使わなくなった 法人であれば登録しておいて損はない。 自宅近くの駅前にステーションがあったし、もっと早く利用すれば良かったと思ったほど。