2020年の技術
技術サイドのことを書く。生活みたいなのは日報に
tl;dr
様々な理由により去年より明らかにバイタリティが低く、新しいことをやっていくことがあまりなかったが、使い慣れているものについて思考を深めていくことはできたはずなので一応プラスではあったと信じたい
言語
TypeScript
ほぼ全てこれ
日に日に強力になっていく型によってだいたいのことは表現できる
ブラウザ or ReactNativeで、Node.js周辺をやらなかった。薄い…
去年よりも型っぽいことをやらなかった
async-awaitを利用してモナドをいい感じにするを書こうとしたけど詰まっている
F#
F#で競技プログラミング
プラットフォーム
React
ほぼ全てこれ
JSXの体験に勝るものがない
GraphQLとの関係性を考えていたらReactの世界観の理解の解像度が広がり、さらに好きになった
仕事でも使っていたので、テストのことなどを考えてデータの流れを意識したコンポーネント設計を心がけるようになった
素React(React Concurrent Modeで遊んだ)からNext.js、ReactNativeまで、使った環境はいろいろ
Vue.jsやAngularに触れる機会はなかった
Next.js
MIS.Wのサークル管理ポータルサイトで使った
メンバーにwebpack筋ビルダーがいなくても効率的なwebpack configを用意でき、SSRやSSGにも対応できる
サークルで使うもので採用している理由はこれで、モダンフロントエンドを使いつつメンテナンスのコストを下げるため
ビルドパイプラインの最適化のためにライブラリではなくフレームワークの体裁を取ってるという感じがする。薄い
特に新しいことをしたい場合でもなければこれでいいんじゃないかと思う
ReactNative
アプリを作りたい気分のときに使った
OSネイティブなUIコンポーネントを配置できるのが強みなので、なるべくそのOSのルック&フィールに沿ったようなUIを書くようにしている
ReactNative iOS 擬態みたいな
結局iOSとAndroidの実装が分かれるので、よく言われるX-Platの特長みたいなものはほとんど活かせていない気がする
状態管理
Redux
Redux Toolkitをメインに使った
必要十分な機能を持っていて、よくできているが、使い始める前にガイドラインを熟読するべき
swr
データがそこまで複雑でなく、ある程度一貫性が壊れても許せる場合に使うとよさそう
スタイリング
CSS in JS
styled-jsxやemotionなどを使った
体験として悪いわけではないが、CSSをJSの中に書けるようにするだけな割には大仰だし、パフォーマンスなどもあまり良くない
この上にデザイントークンとか乗せていくとなるとかなり重くない?って気持ちになる
linariaを試してみたい
Chakra UI
ブログを作ろうとしたときに使ってみた
Styled Systemベースの仕組みは後述するtailwindcssにも通じるものがあって、体験がいい
Reactにロックインされるのが辛い気もする
tailwindcss
今年後半から、とりあえず何か作るぞという時に第一の選択肢として使うようになった
CSSに閉じている(PostCSSのプラグインとして実装されている)のが強みで、特定のフレームワークにロックインされない
tailwindcssレベルでcomponentを定義すれば任意のフレームワークで使える
ただのCSSなのでビルドタイムに全てが完結し、purgecssによる最適化も狙える
最近活用法を模索していて、CSS in JSにも負けない柔軟性を持つコンポーネントを書けることがわかってきた
tailwindでclassNameを使わずに値を受け取る
tailwindをCSS Modulesと組み合わせる
tailwindの色指定をCSS変数でやる
tailwindでvariantをまとめて付ける