ぱちおのいろいろ。

プログラミング、イラスト、作曲、アニメ等好きな事や近況報告とかアウトプットしたい時に使います。

11月pixivFANBOXまとめ!

おはおはの民 ぱちおです!

11月に投稿したFANBOX一覧です~!!!

C97当選してました~!

冬コミ!!!!受かってた!!ので今絶賛原稿中です!!!!!
ジャンルはバーチャルYoutuberなのでアイ月本(ギャグ多め)って感じになりそうです。

またfanboxの支援者向けに増量版サンプル公開すると思うのでよろしくお願いします~~~~!!!
www.pixiv.net

退院しました!(記念配信12/1 22:00~)

はい!!!!お騒がせしました!!!笑い話です!!!!残り1ヵ月思い残すことなく頑張ろうと思うのでよろしくお願いします!!
www.pixiv.net

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

おはおはの民~ぱちおです!

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

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


備忘録的情報

  • Reactの基本的なページ表示(part 1 ←ここ)
  • Flux(情報取得/表示のみ程度)
  • GASを使ったAPI作成

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

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>
        );
}

わぁすっきり

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

10月pixivFANBOXまとめ!

おはおはの民 ぱちおです!

10月に投稿したFANBOX一覧です~!!!

[Vol.3] BOOTHの発送で+αにつけるイラスト

注文くれた人に何か送ってるイラストを公開しております! 今回は自身のオリキャラVTuber)のゆあちゃんのアクリルスタンド買ってくれた方がいて本当にうれしすぎて泣きそうになりながら描きました

www.pixiv.net

しばらく入院します

今思うとfanbox的内容じゃなくてウケる www.pixiv.net

C97当選してました~!

入院とかいったけど当選してたのでハッピー!!!!!!!!! なんとなく描きたいネタの雰囲気構想はfanbox側に書きました。 www.pixiv.net

ということで10月でした!!!11月には退院できるので安静にして原稿に臨もうと思います!