Reactを触ってみた。
React+TypeScriptでゴリゴリ開発していけるように、Reactを改めて学習しだした。
前にReactを学習したときは、Vueを案件で使っておらず、Vueの学習を深くしていた訳でもなかった為、純粋にReactと向き合えたのだが、
今回は案件でガッツリVueを使用した後のReactの再学習ということで、
Vueと比較しながらの学習になっている。
今の所思うことは、Reactつらい。
Vueはeasy、Reactはsimpleとはよく言ったものだと思った。
Reactことはじめ
まずは、create-react-appでreact環境を作っていく。
create-react-appは、vueでいうvue-cliのようなもの。
「create-react-app ディレクトリ名」でプロジェクトの作成可。
落としていないときは、「npm i -g create-react-app」
↓create-react-appで作成した時のディレクトリ構成
初期状態では、ディレクトリ構成とかは一切ないので、
コンポーネントの区切り方は考えないといけない。
reduxを導入する場合は、特にそう。
vue-cliとcreate-react-appは目的が違うのだろうけど、
ここは圧倒的に、vue-cliのほうが使いやすい。
ターミナル上で、作成したプロジェクトに移動し、
yarn start または、npm run startのコマンドを実行すると、
下記のような画面が表示されます。
最近、バージョンが変わったのか、以前と比べ、初期の画面表示も変わった感じ。
Hello World
無事に環境が構築できたということで、定番のHello Worldを表示する。
環境を構築したばかりだと不必要なファイルが多い為、
srcディレクトリ内を下記のように整理してみる。
test用のファイル、logo.svg、ServiceWorker等のファイルを削除。
componentsディレクトリを作成し、その中にコンポーネントのHelloWolrd.jsを置く。
Reactの起点となるsrc/index.jsは、この様な感じ。
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';
ReactDOM.render(<HelloWorld />, document.getElementById('root'));
importでreact, react-domをそれぞれ読み込み、必要に応じて、cssやコンポーネントを読み込む。
ReactDOM.renderで表示するコンポーネントと、public/index.htmlの置き換えるdomを指定する。
src/components/HelloWorld.jsは、この様な感じ
import React, { Component } from 'react';
class HelloWorld extends Component {
render() {
return (
<div>HelloWorld</div>
);
}
}
export default HelloWorld;
importでreactを読み込み、JSXを記述するために、React、
Class Componentを利用するため、Componentのメンバーを指定する。
これで、同様にプロジェクト直下でyarn startすれば、表示された。
コンポーネントについて
Reactのコンポーネントには、Class ComponentとFunctional Componentがある。
Class Componentは上記のHelloWorldの時の記述になる。
Functional Componentは、関数で書かれたコンポーネントのこと。
先程のHelloWorldのコンポーネントをFunctional Componentで書くと
import React from 'react';
const HelloWorld = () => (
<div>HelloWorld</div>
);
export default HelloWorld;
これだけになり、非常にシンプル。
複雑なロジックを含まないコンポーネントは、基本Functionalの書き方でok。
ただ、こちらにも大きなデメリットがあり、、、
Vueでは当たり前のように持てていたstateがFunctional Componentでは持てない。
それを解決するためにReact Hooks（旧Recompose）があるのだけれど、
まあ、stateを持ちたいなら、Class Component
複雑なロジックを持たず、デザインのみのコンポーネントならFunctional Componentとなる。
疲れたからこれくらい。
stateやprops等は次くらいにブログにまとめていこうと思う。
現在、Reduxの学習中なのだけど、Vuexと比べて学習コストが高いように思う。
Reactと比較した時に、色々な場面でVueの親切さを垣間見る。
まだまだ、Reactの本質にはたどり着けていないので、引き続き触っていこうと思う。
TypeScriptを書いてみた。
どうでもいい話
ブログを始めたことで、毎日微々たる量でも勉強しようとする癖がついてきた。
ただ、ブログとしてアウトプットするには、まとまった量と明確なお題が必要な為、
ブログを書く頻度が毎日とはならず、週１程度に落ち着いている。
まあ、その辺、自分用にやるなら適当でいいとは思うのだけれども。
本題
さて、最近はプロジェクトや趣味でVue.jsを使う様にはなってきた。
いい進歩。
ただ、勉強会やカンファレンス等に行くと、
Reactの方が議題として取り上げられている様に個人的に感じる。
やはり、JSを極めるならVueよりもReactなのか？
そろそろReact+TypeScriptを試さなければと感じ始めたこの頃。
一応、Reactは以前勉強し、TSの記述ではないが、
最低限の単一ファイルコンポーネントの様な組み方は抑えていたはず。はず…。
とりあえず、TSで同じ様なことをする為に、
まずは、最低限の環境を作成し、TSの基本文法を抑えていかねばと思う。
環境構築
webpackを利用してもいいのだけれど、TSの基本文法さえ書ければokのため
ミニマムな環境をlight-serverで作ろうと思う。
npm i -D lite-server typescript concurrently
concurrentlyは、ウォッチしながらサーバも立ち上げるみたいな、
コマンドを二重で流したい時にちょっと便利なnodeモジュール。
light-serverを動かすための設定ファイルとして、bs-config.jsonというものを作成する。
中身はこんな感じ。
npm-scriptsはこんな感じ。基本npm run startだけでおｋ。
"scripts": {
},
フォルダ構成も非常にシンプルで、こんな感じ。
srcディレクトリにビルド前のtsファイルがあるのみ。
だって基本文法が書ければいいのだから。
基本文法
boolean, number, string, any
// primitive
const a: boolean = true
const b: number = 1
const c: string = 'hello'
const d: any = null
array
// array
const x: number = [1, 2, 3]
const y: string = ['a', 'b', 'c']
const z: any[] = [null, 1 , 'b']
enum（列挙型）
通常の関数
戻り値の型を宣言の横に書き、引数の方もそれぞれの右に書くだけ。
function f1(): void {
console.log('message')
}
function f2(x: number): string {
return x.toLocaleString() + '円'
}
function f3(x: number, y:string = '円'): string {
return x.toLocaleString() + y
}
allow function
ほぼ通常の関数と同じ。1行で書くときは、少し、あれ？となるが慣れ。
const add = (x: number): number => x+1;
const add2 = (x: number): number => {
return x+1;
}
Class
class A {
private x: number = 1
public y: string = 'a'
}
const classA: A = new A()
と、基本は型を宣言するだけ。
ずっとPHPやJSで生きてきたので、
静的型付け言語には抵抗があるのだが、
最近Go言語の基本文法をやったおかげか、それほど取っ付きにくさはなし。
ジェネリックや共有型などはまだ書いていないし、
簡単なシステムを組んだわけではないだけれど、いける感！
さっそくReactと一緒に使っていこうと思う。
Firebaseをノリで使ってみた。
仕事終わりで、自宅でPCで触っている現在。
今日、会社であった技術共有会で、
この前あったKyoto.jsの共有をしていたことをふと思い出した。
自分はこんなことを言っていた。
「AWS Amplifyというプロジェクト作成からデプロイまでを
Firebaseよりもシンプルにやってくれるものがあるそうです。
まあ、Firebase使ったこと無いんですけどね。」
・・・。
そうだ！Firebaseを使ってみよう！
早速ノリで登録してみました！
プロジェクト名を入力し、リージョンを選択。
指示通り、管理画面でホスティングを選択し、
指示通り、PCのコンソールに「npm install -g firebase-tools」を入力し、
指示通り、コンソール画面でHostingを選択し、
流れにそって、コマンドをいい感じにコンソールに打ち込むだけで・・・
frontend-tani-project.firebaseapp.com
デプロイ完了！
なんということでしょう。
ペライチのサイトならバックエンドエンジニアがいらないではないですか。。。
便利な時代になったものですね・・・。
まだ使いこなしたわけではないし、氷山の一角しか知らない状態ですが、
恐怖心は消えました。
時間があったらAWS Amplifyも使ってみよう！
Kyoto.js 15に行ってきた。
1月12日（土）に@amagitakayoshiさん主催のKyoto.js 15に参加してきました。
会場は、nota inc。
アットホームな雰囲気で、お酒やお菓子も振る舞われ、さらにアットホーム感が加速。
ただ、そんなアットホームな雰囲気とは裏腹、
セッション自体はひとつひとつがかなりレベルが高いものでした。
↓セッション内容
・dpi awareなimg CustomElementをつくる @daiiz
・Vueでネイティブアプリを作り倒す @chan_kakuz
・npm-safety-updaterのご紹介 @pastak
・GAS周りを使って楽チン 導入 (仮) @jiyuujin
・off-the-main-thread with WorkerDOM @shisama
・How to hack VSCode: evil ways @amagi
・2018 年は Firebase で仕事したけど、2019年は AWS Amplify を使おうと思う @potato4d
・LT: CSS in JSでメディアクエリをパッとやる @1natsu
・LT Introduction to dart/flutter @tomoz
・LT: JavaScriptでもディープラーニングってやつでなんとかして @spring_raining
connpassの方に発表資料は全てアップされているようなので、改めてチェックしようと思います。
業務で応用できそうなものは、Vueでネイティブアプリ作成、WorkerDOM、AWS Amplify、CSS in JSのメディアクエリ辺りかなと思いました。
ただ、daiizさんの論理px・実pxの計算を行うimg CustomElementや
amagiさんのVedaをVSCodeで使える様にする為の過程は、流石だなと思ったり、
皆さん資料の作り方、プレゼンの仕方が上手いなーと思ったり、普通に技術以外の部分でも感心させられる部分がありました。
さっそくWorker周りは学習していこうと思いました。
個人サイトをVue.jsで置き換えた。
１ページごとに個別のhtmlファイルに区切ったダサい作りだった個人サイトを
Vue.js + Vue-Routerで置き換えました。
スッキリ！
three.jsやp5.jsをnpm install、importで利用できたことは満足。
リークを防ぐようにライフサイクルのdestroyedのタイミングでリセット処理している為、
ページを切り替えまくっても重くはならないようにしているが、
しかし、１ページにまとめた為、ページ切替時にやはり重くなる瞬間がある。
もう少し快適なページ遷移をする為に、この部分は課題。
あとSSRも課題。
ブログはじめました。
学習記録は昔からEvernoteで日記として残していたが、
１ページに日付と内容を書いているだけのノートの為、
いつ頃に何をしていたかを検索したりするのが辛く、
また、断捨離癖がある自分は、蓄積したメモ書きをすぐに消してしまう癖がある為、
自己管理で安定してログを残すということが出来ていなかった。
もう少し検索性に優れていて、その当時何をしていたかがすぐに分かり、
また、単純に学習量を数字としてログに残す為にはどうすればいいのかと考えた結果、
検索性、時系列整理等を網羅するには、単純にブログを利用すれば良いという結論に至る。
今年はしっかり学習記録をログとして残して、
2019年終わりには、まとめ的なものができればいいと思う。
