Ryo | Web developer blog

Web開発者のブログです。

「イラスト図解式 この一冊で全部わかる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用に作成されているツールではないため、追加の設定が必要みたいです。

Amazon Simple Email Serviceを使ってメール送信する

最近、個人開発の勉強のためにWebサイトを作っています。そろそろWebサイトに会員登録の仕組みを追加して、何らかのサービスを提供できるようにしようと考えておりますが、長くなりそうなので、まずは会員登録の仕組みだけでも先に追加することにしました。

会員登録機能は開発環境でさくっと作り上げましたが、本番環境へのリリースをしようとした際にそういえばメール送信の部分をどうしようかと悩みました。メール送信のために自前でメールサーバーを構築する のは手間がかかりますし、個人で運用するには現実的ではないため、SMTPリレーを使ってメール送信を実現することにしました。

簡単にメール送信するだけであればGmailの機能を利用できますが、最近セキュリティが強化されておりイマイチ仕様が分かりにくいため、他のサービスを使うことにしました。有名なサービスではSendGridがありますが、メール送信のためだけに個人で利用するのは気が引けたため、Amazon Simple Email Service(Amazon SES)を利用することにしました。というのもWebサイトの構築では元々、「さくらのドメイン」と「さくらのVPS」を使っていましたが、豊富な機能と意外とそこまで高くない金額で利用できるawsに最近、切り替えたためです。また、awsのサービスに集約したほうが管理しやすいのも理由の一つです。

Amazon Simple Email Serviceの利用方法について解説されているサイトが少なくて心配でしたが、以下の記事を参考しながら手続きを進めたところ簡単にメール送信が出来ました。

note.com

記事の中で解説されておりますが、登録した時点では外部のメールアドレス宛にメールが送信できないため「送信制限緩和」の申請をフォーム画面で行う必要があります。申請してから1日程度で承認されますが、申請のやり取りが英語なので少し戸惑いました。しかし、無事に利用出来たので良しとしよう。

Vue.jsで簡単なテストを書いてみる

Vue.jsによって、生成されたDOMの結果を確認する。

<!-- src/components/Sample.vue -->
<template>
  <div class="sample">
    <p>sample</p>
  </div>
</template>

<script>
export default {
  name: "Sample"
}
</script>

<style scoped>
.sample {
  text-align: center;
}
</style>
// tests/unit/components/Sample.spec.js
import { shallowMount } from "@vue/test-utils"
import Sample from "@/components/Sample.vue"

describe("Sample.vue", () => {
  it("sampleの文字列が描画されること", () => {
    const wrapper = shallowMount(Sample)
    expect(wrapper.text()).toMatch("sample")
  })
})
$ npm run test:unit                 
> vue-cli-service test:unit

 PASS  tests/unit/components/Sample.spec.js
  Sample.vue
    ✓ sampleの文字列が描画されること (25ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.457s
Ran all test suites.