Next.jsとFirebaseで質問箱のようなサービスを作るを読んだ

こんにちは。beaglesoftの真鍋です。

今年はお正月にこれを読んでいました。

zenn.dev

読もうと思った動機や目的

もともとReactとFirebaseでものを作ったことはあったのですが、Next.jsとFirebaseでは作ったことがありませんでした。そもそも、SSRなどをどこで行うのかなどちょっと疑問な点がいくつかありました。 そこで、この辺のことをクリアにするためにこの本をチョイスしました。

実際の感想

当初の目的は達成できました。Next.jsとFirebaseを利用するに当たりVercelを利用すればうまくいくことがわかりました。また、OGPについては全く知らなかったので、裏側のことを知ることができたのも収穫でした。

ただ、書籍の冒頭にも下記の通り記載があるとおりソースコードが公開されていません。そのため、何かファイルを編集するときに、ファイルのどこに記載するのかがわかりづらいことがありました。基本的には問題ないのですが、全体がわからないと動かないことから途中でやめてしまう人も多いのではないかと思いました。

利用するサービスとして、FirebaseやVercelがあるのですが、ざっくりとした説明はあります。ただ、ReactやFirebase、Node.jsについて細かな説明があるわけではないのでこれからReactを学ぼうという人にはちょっと難しいかもしれません。一通りReactについて知っている人が次のステップとして読むには最適だろうと思います。

その他

Zennで書籍を何冊か購入したのですが、とても良いサービスだと思いました。特に、MBP16インチで左にWebStormを開いて、右にZennの本を開くとちょうどいい感じに写経できます。この組み合わせは意外といい感じだなと思いました。

f:id:beaglesoft:20210104100305p:plain

次はAmpifyでNext.jsを利用するとどんな感じかを試してみたいと思います。

今年読んだ技術書

こんにちは。ビーグルソフトの真鍋です。

早いものでもう一年が終わろうとしています。今年はコロナでいろいろと生活が変わった一年でした。せっかくなので、技術書を中心にどういったことをしてきたかを振り返ってみようと思います。

ざっくりと

今年は昨年に続きReactを中心にキャッチアップしました。仕事ではRailsやPython、Typescript、JavaScriptが中心で、個人的にはJavaScriptとTypeScriptから不足していると感じたものを適宜拾っていった感じです。

React

Reactについては入門した書籍があってそれは良かったのだけれども、最終的にはこの書籍が一番しっくりきた。

booth.pm

いちばーん最初はりあくとを読んでいたのですが、Reduxを使わずにアプリケーションを作るという点ではこちらの方が良いかなと思いました。

JavaScript/TypeScript

Reactを始めてからJavaScriptについての知識が過去のままになっていることがわかったのでJavaScriptとTypeScriptについてこちらを参考に入門し直しました。

JavaScript Primer 迷わないための入門書

JavaScript Primer 迷わないための入門書

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

  • 作者:Boris Cherny
  • 発売日: 2020/03/16
  • メディア: 単行本(ソフトカバー)

リファレンス的にまだ読んでいるのですが、来年の最初にもう一度読み直そうと思っています。

HTML5 CSS3

Reactがちょっとかけるようになってきたときに不足しているなと感じたのがCSSに関する知識でした。Bootstrapを使えばいい的な感じでこれまでしのいできたのが、それではやりたいことができないと気づいたのでCSSに入門することにしました。

すると、HTMLも理解度が低いことがわかり、知らないキーワードが出てくるたびにこちらを参照するようにしています。

Firebase

いろいろと思うところあってFiresotreを利用しています。Firestoreは公式のガイドでもわかりやすいのですが、全体のデザイン的なものや勘所を知るためにはこちらがとても良かったです。

データストアとしての設計(ドキュメントの分け方など)やセキュリティーグループなどはこちらがとても参考になりました。

実践Firestore (技術の泉シリーズ(NextPublishing))

実践Firestore (技術の泉シリーズ(NextPublishing))

shiodaifukuさんの書籍やブログは参考になることが多いのでできるだけ読んでいます。

booth.pm

shiodaifuku.booth.pm

Nuxt.jsなのでReact(Next.js)と関係ない気がしますが、Firestoreを利用するときにどういうことを考慮したのかなどがわかるので参考になります。

Elasticsearch

Firestoreがちょっと使えるようになってきたところで、検索をどうするかという問題に直面しました。

未だに正解がわかっていないのですが、データストアで検索するのはちょっとおかしいということを耳にしたこともありElasitcSearchについて調べてみました。

FirebaseつながりでGCPについて理解を深めたいなと思い購入したのがこちらです。

ざっと目を通したのですが、知らない知識もあり良さそうでした。まだ活用するために読み込んではいません。

Node.js

Reactでアプリケーションを構築したりFiresotreを利用したりしていると、Node.jsってよくわかっていないなぁという感じになってきました。サーバーサイドのことは必要ない状態でしたが、それでもちょっとしたスクリプトを書くためにPythonに切り替えたりするのもなと思っていました。

そこでNode.jsに入門したのですが、そのときはたまたま見つけたこの書籍が良かったです。

レベルアップNode.jsでStreamについてはこの書籍がいいと書いてあったので読んでいるのがこちらになります。

Node.jsデザインパターン 第2版

Node.jsデザインパターン 第2版

まだ読んでいる途中ですが、Node.jsでアプリケーションを実際に作るときのパターンをサンプルプログラムを実装しながら説明しているのでわかりやすいです。

Canvas API

以前から興味があったHTMLのCanvasAPIでの2Dグラフィックスについて少しだけ時間をとって概要をつかみました。2Dグラフィックスについてはゲームに関する書籍が一番わかりやすくて楽しいと思います。

その他

そのほかにも読んでいる本がありました。

リファクタリングはいつ読んでも気づきがあっていい。新しいバージョンがJavaScriptで書かれているのもあってちょくちょく読んでいます。

そういえば、Zennで購入した書籍もいくつかありました。

zenn.dev

Next.jsを普段使いということで興味があり購入しました。Next.jsはすでにある環境ではいじったことはあるけれども、自分でゼロからアプリケーションを作ったことがなかったので参考になりました。

zenn.dev

Origin 解体新書 v1.5.2はとてもお世話になりました。CORSについてちょうど仕事で活用するタイミングということもあり、背景から具体的な挙動について説明されていて理解がとてもすすみました。それほどボリュームがある訳ではないので、CORSについて不安な方は読んでみると良いかもしれません。

zenn.dev

MacからWindowsに移住しようと思っていたときに、WSLについて調べるため購入しました。この本の良かったところは、WSLだとなんか遅くなるよなと思っていたことがなぜなのか、そしてどうすればいいのか説明しているところでした。

そうなんです。WSLを利用するとJetBrains製品でも普通に動かせるけどもっさりする。この辺がよくわからないまま行ったり来たりしていたのでとても助かりました。

まとめ

年初のもくろみ通りJavaScriptとTypeScriptを中心に1年を過ごしました。来年はJavaScriptとTypeScriptのもう少し深いところの理解を進めたいなと思います。

Material-UI Pickersの日本語化について

Material-UI Pickersの日本語化について

Material UIを使用することにしたので色々と試している。そんな中で、日付を扱うための設定が必要になりMaterial-UI Pickersを使用することにした。

使うことはできるけれども設定を変更したいと思い調べた内容についてメモする。

前提

ReactとMaterial UIを使用している。また、日付の扱いはdate-fnsを使用している。

日本語にしたい

Material-UI Pickersのローカライズについて、公式ドキュメントでは以下の説明がある。

Date-fns localization - @material-ui/pickers

date-fnsを使用している限りには上記の設定で50%程度日本語化はできる。

ただ、このままだとカレンダーをポップアップしたときになんかおかしな日本語になる。

f:id:beaglesoft:20200906105510p:plain

そこで、MuiPickersUtilsProviderへ設定しているDateFnsUtilsをオーバーライドして出力内容を変更する。

import format from 'date-fns/format';
import DateFnsUtils from '@date-io/date-fns';

export class ExtendDateFnsUtils extends DateFnsUtils {
  getCalendarHeaderText(date: Date) {
    return format(date, 'yyyy MMM', { locale: this.locale });
  }

  getDatePickerHeaderText(date: Date) {
    return format(date, 'MMMd日', { locale: this.locale });
  }
}

date-fnsformat関数では第3引数にlocaleを指定できるのでMuiPickersUtilsProviderで指定しているlocaleを使用したフォーマットへ変更する。

date-fns - modern JavaScript date utility library

これにより以下の通り表示される。

f:id:beaglesoft:20200906105527p:plain

決定ボタンとキャンセルボタン

決定ボタンとキャンセルボタンはModal Wrapperにそれぞれの変更用のpropsが公開されているので指定すれば良い。

<DatePicker
  ...
  okLabel="決定"
  cancelLabel="キャンセル"
  ...
/>

決定ボタンとキャンセルボタンの位置を左右逆転するほうがしっくり来る。ただ、これはちょっと難しそう。

github.com

そのうち何かいい方法が思いついたら考えることにする。

追記

上記で見ていたソースコードは4.x-alphaだったので3.2系はこちらが正しかった。

github.com

参考

この内容は下記のブログの内容を参考にしました。とても助かりました。ありがとうございます。

Material-UI Pickersで日本語化・フォーマット変更する | エンジニアブログ