RyoGIFT | Web developer blog

Web開発者のブログです。

Hash#transform_keysを利用する

目次

  1. Hash#transform_keysを利用する
  2. 変更前
  3. 変更後
  4. まとめ

1. Hash#transform_keysを利用する

f:id:ryogift:20210620234135j:plain
先日行った知床峠の写真です。本記事とは無関係です。

久しぶりにRuby on Rails APIモードのアプリを確認していたら、rubocop さんからの警告が表示されていました。 Class: RuboCop::Cop::Style::HashTransformKeys の警告でハッシュのキーを変換するだけで to_h などのメソッドは利用せずに transform_keys を利用することによって、単純で高速な呼び出しに変更できるそうです。

2. 変更前
def lower_camelize_keys(object)
  if object.is_a?(Array)
    object.map { |item| item.to_h { |k, v| [k.to_s.camelize(:lower).to_sym, v] } }
  else
    object.to_h { |k, v| [k.to_s.camelize(:lower).to_sym, v] }
  end
end

3 変更後
def lower_camelize_keys(object)
  if object.is_a?(Array)
    object.map { |item| item.transform_keys { |k| k.to_s.camelize(:lower).to_sym } }
  else
    object.transform_keys { |k| k.to_s.camelize(:lower).to_sym }
  end
end

4 まとめ

キーバリューのバリューを省略できて、可読性が高くなりましたね。習慣的に RubyRuby on Rails の動向を確認していないと便利なメソッドが追加されても気づかないままです。少しづつ確認し始めようかなと思いました。

佐藤可士和展の感想と都会の緑を楽しむ

f:id:ryogift:20210411191624j:plain
国立新美術館

目次

  1. 佐藤可士和展(国立新美術館)を楽しむ
  2. 初めての代々木公園
  3. 初めての新宿御苑
  4. まとめ

1. 佐藤可士和展(国立新美術館)を楽しむ

f:id:ryogift:20210411191722j:plain
佐藤可士和展(ユニクロ

f:id:ryogift:20210411191753j:plain
佐藤可士和展(セブンイレブン

私は、アートが幼少期から好きでクラスの中では絵が上手い方であったという程度の子供時代でした。 将来は芸術家かアニメーターか漫画家になりたいという時期もありましたが、いつの間にかプログラマーとして働いています。 アートを仕事にしているのが羨ましいなと思い、「佐藤可士和展」に行って見ましたが、正直これはアートではなくデザインの世界であると驚愕しました。 一見、単純なロゴではありますが、そのロゴは実は緻密に設計されていました。また、そのロゴを依頼者にプレゼンして採用してもらうというプロセスを考えると恐ろしく難易度が高く感じます。デザインの世界には詳しくありませんが、Webのシステムを開発している側としてはWebのフロントデザインのコンセプトや根拠を説明して採用してもらうというだけでも大変なため、どのようにロゴをプレゼンして採用してもらっているのかというプロセスがとても気になり、ワクワクしました。

2. 初めての代々木公園

代々木公園に行った記憶が無く、暇なので行ってみることにしました。渋谷は何度か行ってますが、狭い空間にビルが並んでいて土地の高さが予想できます。そんな空間に緑一面の公園が広がっているという感覚が不思議な気持ちになりました。さらに、明治神宮にも行ってみましたが、都会とは思えない空間ですね。(写真を撮り忘れました😞)

3. 初めての新宿御苑

f:id:ryogift:20210411191935j:plain
新宿御苑
f:id:ryogift:20210411191952j:plain
新宿御苑(さくら)

新宿御苑にも行った記憶がなく、折角、暇なので行ってみることにしました。新宿御苑は現在、事前予約制になっており、慌てて現地で予約してみましたが、次の時間帯しか予約できないため一時間待ってから入園しました。こちらも新宿とは思えないほどに緑が広がっており、心が癒されました。桜は少し散っていましたが、この場所でお花見が出来ると思うと、さぞかし楽しいのではないかと感じました。

4. まとめ

f:id:ryogift:20210411192049j:plain
ザッハトルテ

今回は国立新美術館、代々木公園、明治神宮新宿御苑を周ってみましたが、一日で周るには疲れますね。今までは、都内を散策する行動をしていなかったので、これからは積極的に色々な名所を周ってみたいと思います。 帰りにあまりにも疲れたので、チョコレートケーキを買いました。ザッハトルテという名前を聞いたことがありましたが、今まで食べたことがなかったのですが、食べてみると美味しいですね。

「イラスト図解式 この一冊で全部わかるweb技術の基本」の感想

目次

  1. 初めに
  2. HTTPについて
  3. Webで扱うデータ形式について
  4. Webアプリケーションについて
  5. 最後に

1. 初めに

私は、Webアプリケーション開発の仕事をしてきて8年目になりますが、この書籍のWeb技術の説明は分かりやすいです。何が分かりやすいのかをまとめました。

2. HTTPについて

HTTPの説明や歴史はウィキペディアからでも勉強できますが、やはり、イラストがあるおかげで用語や構成が頭にすんなりと入ってきます。 HTTPの情報はインターネットで探すと、簡単に手に入りますが、この書籍は綺麗に要約されており初心者にはピッタリです。 私は、この書籍で「HTTP/2」についての改良点を理解し、自分で管理しているWebサーバーを早速、「HTTP/2」に対応させました。

3. Webで扱うデータ形式について

Webで扱う代表的なデータのHTMLやCSSから画像形式、XMLJSONなど基本的な仕組みが学べました。 新たな学びとしては、JavaScriptは過去に二種類あり(JavaScriptJScript)、その後は一つに標準化されたことです。 過去に言語仕様の調査で「そっちのJavaScriptじゃない」と上司に言われたことがあり、その当時は理解できませんでしたが、 今更ながら、そういうことだったのかと理解しました。

4. Webアプリケーションについて

Web開発で使われる仕組みや、開発言語、フレームワークなど、Web開発者にとっては親しみのある内容ではありますが、 基礎から再度、学び直すことは大切ですね。 Webアプリケーションで使われている専門用語なども改めて理解できました。

5. 最後に

私は普段、業務に追われているとWeb開発の知識を忘れてしまいがちで、何度もインターネットを利用して調べ直すことが多いのですが、 適度に要約されていて説明が分かりやすい書籍があると、内容がイメージしやすいので頭に残りやすく、知識が蓄積出来そうですね。

「イラスト図解式 この一冊で全部わかるサーバーの基本」の感想

目次

  1. 初めに
  2. イラスト図解式 この一冊で全部わかるサーバーの基本

1. 初めに

久しぶりに技術書を大量に購入して、習慣的に読み進めるようにしています。 半年前までは定期的に技術書を読んでおりましたが、最近は読んでおりませんでした。技術書を読まなかった理由は、技術から離れて他のことに関心が移っていく中で体系的に本で学ぶメリットを感じることが出来なくなっていたためです。アプリケーションを開発するときには様々な方法論や開発言語がありますが、必ずしも実践できる機会に恵まれないこともあり、新しく知識を身につけることに抵抗を覚えていました。ですが、もう少し重要で不変的な低レイヤーの部分に着目すれば、何かしらに役立つだろうと感じて、今年の1月に応用情報技術者を取得したばかりではありますが、もう一度基礎から学び直そうと思います。手始めに本日、読み終えた以下の書籍を紹介します。

2. イラスト図解式 この一冊で全部わかるサーバーの基本

当然、私はサーバーとは何かという知識はあると認識しておりますが、何か新しい発見があるのではないかと購入しました。ついでに合わせて「イラスト図解式 この一冊で全部わかるWeb技術の基本」も購入しました。読み終えた感想としては、UNIX系サーバーに関してはある程度は知っている内容でしたが、Windows系サーバーの知識に関しては、全くの初見な情報ばかりでした。Windows系サーバーを触る機会がほとんどなく、おそらく今後も触る機会はないかと思いますが、UNIX系サーバーと並列する機能について知り得ただけでも読んだメリットは十分にあると感じました。さらに本のタイトルどおりに「イラスト図解式」だけあって、サーバー間の流れがとても分かりやすいため、ソフトウェアエンジニアの初学者にはオススメできると思います。続いては、「イラスト図解式 この一冊で全部わかるWeb技術の基本」の感想を書きたいと思いますが、冒頭で記載したとおりに他にも技術書を購入しており、何冊か平行して読み進めているため、読み終わった本から感想を書き留めておきたいと思います。

Next.js + Material-UIでリロードした時のエラーについて

目次

  1. 初めに
  2. 原因
  3. 対応方法
  4. 変更前
  5. 変更後
  6. 追記

1. 初めに

Next.js + Material-UI(styled-components)を使ってリロードしたときに、以下のエラーが発生してスタイルが崩れました。

Warning: Prop `className` did not match.

2. 原因

サーバーサイドで新しく生成されたCSSとクラス名が、クライアントサイドで指定しているCSSとクラス名とで異なっているため、スタイルが適用されずにエラーが発生します。

3. 対応方法

対応方法はMaterial-UIのサイトに記載されています。

material-ui.com

TypeScriptを利用しているときに遭遇した事象のため、参考までにtypescriptでの修正例を以下に記載します。

4. 変更前
// pages/_app.tsx
import '../styles/globals.css';
import { AppProps } from 'next/app';

const App = ({ Component, pageProps }: AppProps) => (
  <Component {...pageProps} />
);

export default App;

5. 変更後
// pages/_app.tsx
import React from 'react';
import '../styles/globals.css';
import { AppProps } from 'next/app';

const App = ({ Component, pageProps }: AppProps) => {
  // 以下を追加する
  React.useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement?.removeChild(jssStyles);
    }
  }, []);

  return (
    <Component {...pageProps} />
  )
};

export default App;

6. 追記

初回レンダリング後のリロードでは上記の対応のみでもエラーが解消されましたが、コードの修正を行って、ホットリロードした後にリロードすると再びエラーになります。解決するためには、以下のファイルを追加する必要があります。(_document.tsxは出力されるHTMLファイルの構成を変更できるそうです。)

// pages/_document.tsx
import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import {ServerStyleSheets} from "@material-ui/styles";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};

export default MyDocument;

以下のコードを参考にしています。 github.com

Material-UIはSSR用に作成されているツールではないため、追加の設定が必要みたいです。