Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

Nginxのincludeディレクティブはいちいちフルパスを書かなくてもいい

ずっとNginxのincludeディレクティブは絶対パスをちゃんと書かないといけないと思っていましたが、どうやら--prefixで指定したディレクトリからの相対パスでも書けるようです。

$ nginx -V
nginx version: nginx/1.15.10
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-36) (GCC)
built with OpenSSL 1.0.2k-fips  26 Jan 2017
TLS SNI support enabled
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx

configure arguments内の--prefix=/etc/nginxから見た相対パスを書くことが出来ます。たとえば以下の2つは同じです。

include /etc/nginx/conf.d/default.conf;
include conf.d/default.conf;

というか、すでにPHPを使っている場合はこの記法を使っているはずです。

include fastcgi_params;
include /etc/nginx/fastcgi_params; # こう書いてもいい

超!体系的に学ぶWebアプリケーション開発

この記事はWebサーバーを建てるところからWebアプリケーションを開発できるようになることを目標としています。

目次

  • 目次
  • この記事の目標
  • [超!基本]
    • Webページが表示されるまで
    • HTMLとは?
    • JavaScriptとは?
  • [超!Webサーバー]
    • Webサーバーとは?
    • ファイアウォールによるコントロール
  • [超!Webアプリケーション]
    • React+TypeScriptを始めてみる
      • 1. Node.jsをインストールする
      • 2. 作業用ディレクトリを作る
      • 3. npmのセットアップを行う
      • 4. ReactやTypeScript、Webpackをインストールする
    • React+TypeScriptでHello World
  • [超!通信]
    • HTTPSとHTTPの違い
    • HTTP通信の流れ
    • HTTP/2とは?
    • WebSocketとは?

この記事の目標

この記事では、Webフレームワークに頼らずにWebサーバーを建て、Webアプリケーション開発の環境構築まで行って、Web開発の基礎を固めることを目的とします。

  • Webサーバーの動作を理解する
  • Webアプリケーションの開発の始め方を理解する
  • LaravelやRuby on RailsなどWebアプリケーションフレームワークに通じる基礎を理解する
  • WebSocketやHTTP/2など最新技術がどこで動くのか理解する
続きを読む

バンドラなんていらない時代になりつつあるぞ

Webpackだとかbabelだとか、ダサくないですか?設定してnpm run buildして…そんなことしないで済む時代が来ているんですよ!

バンドラがなぜ必要だったのか

バンドラはたくさんあるファイルを1つにまとめ、依存関係を解消することが目的でした。

しかし、ES Modulesの普及に伴い、<script type="modules">が現実的に使えるようになりつつあります。

また、HTTP/2においてサーバープッシュという、リクエストされていないファイルを送信できる機能が登場しました。これを使うと、importするファイルをあらかじめ送ることができます。

@pika/web + サーバープッシュという選択肢

@pika/webという依存パッケージをES Modulesで読み込めるように変換するツールがあります。変換したパッケージはimport {createElement, render} from './web_modules/preact.js';のようにして読み込むことができます。

@pika/webなら$ npx @pika/webを実行するだけで、ES Modulesを使った開発ができるようになります。

依存ファイルをあらかじめ送信する

ES Modulesでは依存ファイルを以下のようにしてダウンロードします。

  1. JSファイルを読み込む
  2. 解析する
  3. ファイル内にあるimportを見つける
  4. 依存ファイルをリクエストする
  5. ダウンロード完了してから処理を再開する

サーバープッシュを使えば、依存ファイルはすでにダウンロード済みなので4の段階をスキップできます。

Nginxでサーバープッシュする

Nginxなら、つぎの設定でサーバープッシュを使用できます(参考: NginxがHTTP2サーバプッシュに対応したので試す - ASnoKaze blog)

server {
    listen 443 http2;
    # HTTPSの設定は省略します。
    server_name example.com;

    http2_push_preload on;
    location / {
        root   html;
        add_header "Link" "</main.js>;rel=preload;as=module, </web_modules/preact.js>;rel=preload;as=module";
        index  index.html;
        try_files $uri $uri.html $uri/index.html = 404;
    }
}

実際に読み込んでみる

デモを用意しました。

f:id:panda_noir:20190311155423p:plain
サーバープッシュあり

f:id:panda_noir:20190311155427p:plain
サーバープッシュなし

f:id:panda_noir:20190311162407p:plain
バンドルあり

サーバープッシュありのほうが若干速くなっています。ただし、バンドルありにはまだ勝てません。

Elixirの内包表記、内包してなくない問題

1から10まで、各数字を2乗して足すプログラムを考えます。

1..10
|> Enum.map(&(&1*&1))
|> Enum.reduce(&(&1+&2))
|> IO.inspect

こうなります。分かりやすいですね。

それが「内包表記」だと以下のように書けます

for i <- 1..10 do
  i*i
end
|> Enum.reduce(&(&1+&2))
|> IO.inspect

(for i <- 1..10, do: i*i)
|> Enum.reduce(&(&1+&2))
|> IO.inspect

どこが「内包」なんじゃい!!

カッコで囲ってないくせに内包ってなんじゃいな!!!

そもそも内包とは?

と、ココまで書いてから「そもそも内包ってなんなんだ?」と思い調べてみました。内包というのは、[]で包まれていることではなく、数学の用語の一つだそうです。

                                  終
                         --------------------
                           制作・著作 NHK

…もうちょっとだけ説明しますね。

数学で集合を定義するとき、「集合に含まれる要素をすべて列挙するやり方」と「集合に含まれる要素が満たすべき条件を定めることで定義するやり方」があります。後者を内包というそうです。

例えば、1から10それぞれの二乗という集合は、Elixirの内包表記ではつぎのようになります。

for i <- 1..10, do: i*i

数学で内包で書くとこのような集合になります。

\{x|i \in \{1,2,\cdots,10\},x=i^2\}

Elixirの内包表記は数式そのまんまだったことがわかりました。まさに「内包」表記です。