2019-11-09

【React + Flux + GAS】自サイトを作り変えた話 part1(React Router触った編)

プログラミング

おはおはの民～ぱちおです！

この度ホームページを一気に改変しました！そして、ずっと触る触るといって触ってなかったReactを使って作り替えようと思い、色々学習した記録を備忘録として残しておきます。

正直フロントエンジニアとしてどうなのみたいな技術力ですが、この4年間「恥をかきたくない」みたいな感覚でなんもしてなかったな、と。恥をかいていこう恥って思いました。
作り替えたサイト↓
patiopatimon.com

備忘録的情報

Reactの基本的なページ表示(part 1 ←ここ)

Flux（情報取得/表示のみ程度）

GASを使ったAPI作成

これはpart 1でReact Router触った話

備忘録的情報
React RouterでHello Worldしたい
- わかったメモ
SFC(Stateless Functional Component)で書きなおす

Reactはコンポーネントの出し分けが良い感じできてなんかFacebook製の～みたいなふんわり知識レベルです。ちょっとVueは触ったかもしれないし、触ってないかもしれない程度

まぁあくまで自分用備忘録なので、説明用ブログという感じではないです。

Webpackの設定とかnpm環境作るとかはぐぐってください。 f:id:patioglass:20191109221855p:plain

React RouterでHello Worldしたい

Reactでまずただのテキスト表示みたいなことをしたい！わけですので、Hello Worldを出します。
（基本的書き方をやってみてるだけで最終的に次節のSFCの章の書き方に変える）

なんか触る前から「Reactではこういう書き方で～」というのがまったくもってどこから入ればいいかわからない感じがあるの強いイメージあるんですけどわかりますか？
あと単ページ表示だとなんか違うなと思ったので実際にルーティングを作る時のものでHello Worldしようと思った。

イメージ的HelloWorld（変数とかそういうのは後回し）
f:id:patioglass:20191109212823j:plain

React Routerを使ってルーティング設定とかをするらしい。
react-routerのpackege.jsonは"^5.1.2"でした

src/js/pages/Layout.js

import React from 'react';

export default class Layout extends React.Component {
    render() {
        return (
            <div class="wrapper">
                {this.props.children}
            </div>
        );
    }
}

src/js/components/top/TopComponent

import React from "react";
import { Link } from "react-router-dom";

import TestComponent from "src/js/components/top/TestComponent";

export default class TopComponent extends React.Component {
    render() {
        return (
            <div class="contents">
                <h1>ぱちお</h1>
                <Link to="something">something</Link>
                 { TestComponent }
            </div>
        );
    }
}

src/client.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from "react-router-dom"; // react-router

import Layout from "./src/js/pages/Layout";
import TopComponent "./src/js/components/top/TopComponent";
import SomethingComponent "./src/js/components/top/SomethingComponent";

const app = document.getElementById('app');

ReactDOM.render(
<Router>
       <Layout>
            <Route exact path="/top" component={TopComponent}></Route>
            <Route exact path="/something" component={SomethingComponent}></Route>
        </Layout>
    </Router>,
app);

src/index.html

<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <div id="app"></div>
  <script src="./build/client.min.js"></script>
</body>
</html>

webpackでビルドしてbuild/client.min.js作成する方法とかは別途ぐぐってください

わかったメモ

ルートとなるclient.jsは基本この書き方でよさそう

読み込みたい部品をimportで持ってきての形で展開されるっぽい

Routeタグ属性のexactをつけると完全マッチの時に有効になる（つけないとデフォでどのページでも読み込まれるコンポーネントになる？っぽい）

「React内」のaタグでページ遷移するときはLinkを使う

入れ子構造にすると入れ子の親タグ側で「this.props.children」に展開される

なるほどね、こんな感じで共通となる親レイアウトを作ってそこにさらにimportで追加して～とやっていきページが作られていく感じ。これでじゃんじゃかパーツ作って組み合わせていくだけってのがわかりを得た。Hello World終わり

SFC(Stateless Functional Component)で書きなおす

ここまでよくある感じで実際こんな感じで開発を進めて、デプロイまでしました。
そしたらある助言をいただいて（2個目の指摘）
f:id:patioglass:20191109215702j:plain

なんと

とどのつまりコンポーネントをReact.Componentの継承でクラスで作っていたけど、最近のReactだと関数で書く方がもろもろclassでコンポーネント作るよりすっきりする（ていうかした）
qiita.com

これあとあとリファクタリングとかしようとすると死んだので、できるなら最初からSFCで書いていくのが吉でした。

例えばさっきのTopComponentを書き換えるなら
src/js/components/top/TopComponent

import React from "react";
import { Link } from "react-router-dom";

import TestComponent from "./TestComponent";

export default class TopComponent extends React.Component {
    render() {
        return (
            <div class="contents">
                <h1>ぱちお</h1>
                <Link to="something">something</Link>
                 { TestComponent }
            </div>
        );
    }
}

↓
SFCにする
src/js/components/top/TopComponent

import React from "react";
import { Link } from "react-router-dom";

import TestComponent from "./TestComponent";

export default function TopComponent() {
        return (
            <div class="contents">
                <h1>ぱちお</h1>
                <Link to="something">something</Link>
                 { TestComponent }
            </div>
        );
}

わぁすっきり

てな感じで静的ページを無限に作る方法がわかったので次に実際に情報とってきて読み込んだり、変数使ったりするやつを時間をみて備忘録まとめていこうとおもいます。

2019-08-28

自分的iPad Proのクリスタレイアウト

こんにちはぱちおです

ここ最近移動中のお絵描きしてて、iPadで使うときのフィットした感じのレイアウト紹介します

f:id:patioglass:20190828225100j:plain

マルチポストですが、雑ノウハウはfanboxのほうが投稿するかもしれないです

www.pixiv.net

便利ショートカット
閉じないウィンドウたち
ちょっとした楽

便利ショートカット

これはiPad Proのお絵描きソフトの常識っぽいですが
　・　二本指タップ＝元に戻る（Ctrl + Z）
　・　三本指タップ=一つ進む（Ctrl + Shift + Z）
↑の割り当てを変えたい場合は
右上のクリスタマーク→環境設定→タッチジェスチャー
で変えられます

閉じないウィンドウたち

まず閉じないウィンドウたちの配置です
他をタッチしたら閉じてしまわないような常に使いたいやつですね
ペンの種類、大きさ、レイヤーはとりあえず常に出した方が楽でした。毎回開いて閉じるの数が多いやつらを固定しました。あと左に偏るのがイヤなので右にレイヤー系を固めました
筆と消しゴムは頻繁に切り替えるので上にもっていけるので、上にもっていきます

f:id:patioglass:20190828225225j:plain