$shibayu36->blog;

株式会社はてなでエンジニアをしています。プログラミングや読書のことなどについて書いています。

Next.jsチュートリアルやった

SPAをやるにあたって、Server Side Renderingの仕組みも知っておいたほうが良いと感じ、Next.jsについて学んでみた。チュートリアルがよく出来ていたので、これをベースに学んだ。

チュートリアルをやった感じ、Next.jsは以下のようなものがメインの機能のフレームワークだなと思った。使い方はシンプルだけど、面倒なことは結構やってくれて便利。

  • ファイルベースのルーティングをしてくれて
  • Server Side Renderingをしてくれて
  • いい感じにjsをchunkで分けてくれる
    • しかもページに存在するLinkを見て、関係するsourceをprefetchしてくれたりする

これまでGraphQL/React/Next.jsと勉強してきたけど、ここまで手軽にSPA & Server Side Renderingが出来るなら、SEOとか関係するサイトでも全てSPAでいいなという気持ちになった。

チュートリアルメモ

特に重要なポイントとしては、

  • ファイルベースのルーティングの使い方
  • Linkの使い方
  • getInitialProps

あたりだろうか。



[id].js的なファイルの場合、なんかこういう書き方でLinkしたほうがよい。

<Link href=“/p/[id]” as={`/p/${props.id}`}>

以下のようにするとサーバに直接アクセスしたことになってしまい(クライアントサイドでルーティングが存在しないとみなされる)、リダイレクトしているのと同じ挙動となり、全体がSSRされるので遅い。

<Link href={`/p/${props.id}`}>


https://nextjs.org/learn/basics/fetching-data-for-pages/finally

getInitialPropsを定義することで、サーバサイドレンダリング時はサーバで、クライアントサイドレンダリング時はクライアントでそれぞれ実行される。

const Post = props => (
  <Layout>
    <h1>{props.show.name}</h1>
    <p>{props.show.summary.replace(/<[/]?[pb]>/g, '')}</p>
    <img src={props.show.image.medium} />
  </Layout>
);

Post.getInitialProps = async function(context) {
  const { id } = context.query;
  const res = await fetch(`https://api.tvmaze.com/shows/${id}`);
  const show = await res.json();

  console.log(`Fetched show: ${show.name}`);

  return { show };
};

export default Post;


https://nextjs.org/learn/basics/styling-components/styling-our-home-page

<style jsx>{`
   …
`}</style>

のような書き方をすることで、そのコンポーネント内でスタイルを適用できる。テンプレート文字列でCSSを渡すこと

https://nextjs.org/learn/basics/styling-components/no-effect-for-nested-components

ネストされたコンポーネントにはstyleは適用されないので、適用するstyleはそのコンポーネントで定義すること。https://github.com/zeit/styled-jsx#one-off-global-selectors global selectorというのもある。

https://nextjs.org/learn/basics/styling-components/global-styles

<style jsx global>を使うことで、globalにstyle適用することが出来る。外部からインストールしたコンポーネントにスタイルを当てたい時に便利(例えばreact-markdown)。

styled-jsxについて他いろいろは https://github.com/zeit/styled-jsx を見よう。


https://nextjs.org/learn/basics/deploying-a-nextjs-app/build-and-start next buildしてnext startすればサーバを立ち上げられる。本番ではこれを使う。

「エンタープライズアプリケーションアーキテクチャパターン」を読んだ

ソフトウェア設計に関する知識が昔のままで止まっていて、最近の設計のためのワードはぼんやりと理解できるものの、はっきりと分かっていないなと感じていた。そこでまだ読んでいなかった設計に関する本を読もうと思い、まずは「エンタープライズアプリケーションアーキテクチャパターン」を読んだ。

エンタープライズ アプリケーションアーキテクチャパターン (Object Oriented SELECTION)

エンタープライズ アプリケーションアーキテクチャパターン (Object Oriented SELECTION)

これまでプログラムを書いていた経験からか、全く知らないパターンというのは少なかったのだけど、これまでの経験知に名前付けを出来たのは良かった。特にシングルテーブル継承、具象テーブル継承、クラステーブル継承の話は面白く、どれも見たことあるしメリット・デメリット分かる!という気持ちになった。

次は エリック・エヴァンスのドメイン駆動設計 (IT Architects’Archive ソフトウェア開発の実践) を読もうかなと思う。

読書ノート

* 行データゲートウェイはO/Rマッパー感が強い 1630
    * 実際には行データゲートウェイ、テーブルデータゲートウェイ、アクティブレコード、データマッパーなどのどの思想でもORMを実装できるので、どういう思想のORMかを知っておくと良い選択をできそう
* テーブルデータゲートウェイはperlで書いているときに良く自分が使っている手法?データマッパーのほうかな? 1647
* レコードオブジェクト自体にDB操作も持つアクティブレコード、DB操作とドメインモデルを分離するデータマッパー 1695
* 構造的なマッピングに関するパターンについては、Apollo Clientのキャッシュの処理とイメージが似ている気がする。一意フィールドとか 1842
* シングルテーブル継承、具象テーブル継承、クラステーブル継承はたしかに全部見たことある 1937 ※
    * それぞれの特性はめっちゃ納得できること書いてある 1956
* アプリケーションコントローラーは、プレゼンテーション層内でさらに再利用したい時に使うって感じかな? 2222
* トランザクションスクリプトというのは、引数がプリミティブなものだけで、手続きを記述していくものなのかな 3721
* ドメインモデルは普通のオブジェクト指向って感じ 4000
* テーブルモジュールはよくあるテーブル操作と対応するクラスっぽい 4091
* サービスレイヤーはユースケース層といえるのか? 4451
* テーブルデータゲートウェイがテーブル操作と紐づくのか? 4452
* 行データゲートウェイは、行オブジェクトにinsertとかdeleteとかがあるやつ 4727
    * さらにロジックが追加されていくとアクティブレコードへ 4924
* データマッパーはいつもよく使ってる行データにdbアクセスがないやつな気がする 5062
* ユニットオブワークはデータの実際の更新処理を遅延させ、一括で行うものっぽい。つまりアプリケーションコード内でトランザクションを実装しているイメージ 5688
* 一意マッピングはapollo clientのキャッシュみたいなやつっぽい 5804

0になるくらいなら0.1でもいいから学ぶ

以前は、学習するときはきちんと頭に入ることを重視しようという考え方をしていて、パソコンに向かえる時に集中して勉強するようにしていた。最近はその考えを変えようとしていて、0になるくらいなら0.1でもいいから学ぶと思うようにしている。

この考えに変えたい理由は、今は子供が小さく、2人目も産まれたため、育児によって自分の自由な時間が減ってしまったからだ。2人目が産まれて驚くほど自由な時間が減った。大体1日で自由になる時間は、2〜3時間くらい(朝1時間、夜2時間くらい)。この時間で学習も趣味も休息もプライベートのTODOも全て賄う必要がある。ちなみに子供が体調を崩したり、何かイベントがあったりすると時間は全て吹っ飛ぶ。

こんな中、きちんと頭に入ることを重視しすぎると、もう全く何もできなくなってしまうなと思った。そのため、効率が悪くてほとんど学習になっていなくても、0.1でもいいからやるようになった。具体的には、赤子を抱っこしながらスマホでコードを読んだり、ライブラリのチュートリアルのコードを触れなくても文章だけ読んだり、深夜に赤子にミルクをあげるときに寝ぼけまなこで本を読んだり、流し読みでもいいから本を読んだりしている。

めちゃくちゃ効率悪いのは実感するけど、学んだことが仕事をしている時に急に役立ったりすることがあり、多少は学習になっているようだ。少しでもいいからやっておくのは大事だなあと感じた。