ぱちお誕生日2019まとめ
はっぴーばーすでーーとぅーみーー🥳 pic.twitter.com/tlCOw1bR78
— ぱちお@4日目 西O-33a (@patioglass) 2019年12月17日
誕生日になった瞬間Twitter落ちるの何????????💢💢💢💢
— ぱちお@4日目 西O-33a (@patioglass) 2019年12月17日
今年もイラストやら贈り物、ありがとうございました;;;;;;;;;;
@syusui_s 様
@KasakiSakura 様
@lapze25 様
@_mochiraion 様
@zassou_y 様
ていうか見てくれ〜〜今日久々に会った絵のお師匠様からお誕生日絵もらって公開おkもらったーー!!!!😭😭#ゆあーと pic.twitter.com/0GhuccxAce
— ぱちお@4日目 西O-33a (@patioglass) 2020年1月2日
うぇ〜〜!!!早めに誕生日プレゼント届いた〜〜???、!(18日です)
— ぱちお@4日目 西O-33a (@patioglass) 2019年12月13日
なんかゲームプレイしてくれってことなんでプレイするぞ!!!!!💪💪💪
作画資料も😭😭(布教用漫画があるな????)
ご贈入じゃねえんじゃ💢💢💢贈ってくれてありがとう💢✨#ゆあちゃん記録 pic.twitter.com/j6B9IObYXD
うぉ〜〜ありがとう甘味小麦様!、!!ありがとう!!!!君らどれだけswitchの知らないマイナーゲームさせたいんや!!!!
— ぱちお@4日目 西O-33a (@patioglass) 2019年12月15日
ありがとう!!!!誕生日配信計画してやるんで💪💪 pic.twitter.com/0n17oPsJ8Y
たらいやさんありがとうーーーーー!!!!どの店舗にも置いてない味のやつ!!!!!!!!!!!欲しかったやつです!!!!!!ありがとう!!! pic.twitter.com/U3u5QqBwOt
— ぱちお@4日目 西O-33a (@patioglass) 2019年12月20日
どなたかわからない…!!!!どなたかわからんけど、午後ティーありがとう😭😭😭🙏🙏🙏🙏✨ pic.twitter.com/SyjKHXX0wR
— ぱちお@4日目 西O-33a (@patioglass) 2019年12月20日
おあーー!!!!欲しいものに入れてたイヤホンだ😭🙏🙏🙏🙏おたおめありがとうございます!!!!!!!!来年も元気にやっていきます!!!!!!!!!!!! pic.twitter.com/wDSdgd4ehz
— ぱちお@4日目 西O-33a (@patioglass) 2019年12月25日
ま、まって!!!!クリスマスプレゼント?!?!
— ぱちお@4日目 西O-33a (@patioglass) 2019年12月25日
界隈では必須科目と言われつつも途中から見るのもな〜〜とか一歩踏み出してなかった愚かなぱちおさんにわたモテを?!?!😭😭ぜったいよむ👊👊👊👊
と思ったら袋にはプロコンじゃん……もうどう喜べばいいかわからんくらい嬉しい…ありがとう!!!! pic.twitter.com/7OeUCcvW7Z
【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環境作るとかはぐぐってください。
React RouterでHello Worldしたい
Reactでまずただのテキスト表示みたいなことをしたい!わけですので、Hello Worldを出します。(基本的書き方をやってみてるだけで最終的に次節のSFCの章の書き方に変える)
なんか触る前から「Reactではこういう書き方で~」というのがまったくもってどこから入ればいいかわからない感じがあるの強いイメージあるんですけどわかりますか?
あと単ページ表示だとなんか違うなと思ったので実際にルーティングを作る時のものでHello Worldしようと思った。
イメージ的HelloWorld(変数とかそういうのは後回し)
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を使う
なるほどね、こんな感じで共通となる親レイアウトを作ってそこにさらにimportで追加して~とやっていきページが作られていく感じ。これでじゃんじゃかパーツ作って組み合わせていくだけってのがわかりを得た。Hello World終わり
SFC(Stateless Functional Component)で書きなおす
ここまでよくある感じで実際こんな感じで開発を進めて、デプロイまでしました。そしたらある助言をいただいて(2個目の指摘)
なんと
とどのつまりコンポーネントを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> ); }
わぁすっきり
てな感じで静的ページを無限に作る方法がわかったので次に実際に情報とってきて読み込んだり、変数使ったりするやつを時間をみて備忘録まとめていこうとおもいます。
自分的iPad Proのクリスタレイアウト
こんにちはぱちおです
ここ最近移動中のお絵描きしてて、iPadで使うときのフィットした感じのレイアウト紹介します
マルチポストですが、雑ノウハウはfanboxのほうが投稿するかもしれないです
便利ショートカット
これはiPad Proのお絵描きソフトの常識っぽいですが
・ 二本指タップ=元に戻る(Ctrl + Z)
・ 三本指タップ=一つ進む(Ctrl + Shift + Z)
↑の割り当てを変えたい場合は
右上のクリスタマーク→環境設定→タッチジェスチャー
で変えられます
閉じないウィンドウたち
まず閉じないウィンドウたちの配置です
他をタッチしたら閉じてしまわないような常に使いたいやつですね
ペンの種類、大きさ、レイヤーはとりあえず常に出した方が楽でした。毎回開いて閉じるの数が多いやつらを固定しました。あと左に偏るのがイヤなので右にレイヤー系を固めました
筆と消しゴムは頻繁に切り替えるので上にもっていけるので、上にもっていきます
ちょっとした楽
実は指でスッと右端からなにやら出すことが可能です
T1~T8まで好きなコマンド割り当てられます(右上クリスタマーク→ショートカット設定)
私はそんなショートカット使わないんですが、反転をめっちゃ使うので反転をT1に仕込んでます