「Webサイトこれからどうなる」の感想・備忘録

Node.jsを提供しているレンタルサーバは少ない。

Web制作の現場でNode.jsをサーバサイドで使うことは少なく、フロントエンド開発時に触れることが圧倒的に多い。ツール群の多くがNode.jsで提供されている。Sassは元々Rubyだったが、ほかの言語でも利用できるLibSassが開発されたことでNode.jsで利用されるようになった。CSS変換ツールPostCSSやJavaScriptトランスコンパイルのAltJSなどもNode.jsで利用できる。

様々なツールはパッケージ管理システムnpmで管理されている。package.jsonを用意することで環境を統一することができる。後発のYarnというパッケージ管理システムも登場したが、現時点ではnpmが主流。

CSSプリプロセッサ

Sassが主流。必要な機能のみをプラグインとして取り込めるPostCSSが登場したが、今すぐSassに取って代わることはなさそう。

Babel

Babelは「JavaScriptの新機能を古いブラウザでも動作するコードに変換してくれる」JavaScriptトランスコンパイラ。
注意が必要なのは、外部モジュールを利用する仕様のECMAScript Modulesに関してで、これを非対応のブラウザで利用するには、該当の外部ファイルもまとめて最終的なJavaScriptにまとめる必要がある。その機能がBabelにはないため、webpackやBrowserifyといったモジュールハンドラと合わせて利用する必要がある。

TypeScript

TypeScriptはMicrosoftが開発したjavaScriptを拡張した言語で、トランスコンパイラと似た位置付けにある。静的型付けやクラスベースのオブジェクト指向といった仕様が特徴。Node.jsで動作するコンパイラも提供されているので、JavaScriptからの移行コストが少ないのも魅力。

JSON

JSONはJavaScriptオブジェクト定義の記法とまったく同じではない。

キーのクォートは省略しない
クォートはダブルクォート
最終要素の末尾カンマは利用不可

が主な違いである。
例えば{name: 'takahashi',}はJavaScriptオブジェクトとしては正しいが、JSONでは{"name": "takahashi"}となる。

JSON.parse()

JavaSctiptでのJSONの取り込みは、JSON.parse()を利用する。古くから使われていたeval()ではJSONの記述次第ではエラーになることがある。

AMP

Googleが推奨している「Webページの読み込み時間を短縮するための枠組みとHTMLの記述ルール」。以下のような仕組み担っている。

既存のモバイルページとは別にAMP対応ページを用意する
使用禁止のタグや、JS,外部CSSの制限などがある。
既存のモバイルページにmetaタグを追加し、AMP対応ページをクローラーに知らせる
クローラーはAMP対応ページをCDNとして機能するAMP Cacheにキャッシュする

SSLとTLS

SSL3.0がバージョンアップしたものがTLS1.0。現状では2008年に制定されたTLS1.2が最新バージョン。SSLという名称が広まっているため、現在でもSSL/TLSのように表記されている。

すべてのページをSSL化するべき

検索サイトがSSL化されたことで、SSL化していないページでは検索エンジンからのリファラ情報が取得できない。アクセス解析を行うためにも、すべてのページをSSL化するべき。

サーバレスアーキテクチャ

サーバレスアーキテクチャは、サーバー管理が不要なアプリケーション実行環境のこと。サーバーの管理はサービス提供側が行ってくれる。Faas(Function as a Service)とも呼ばれている。イベントドリブンで関数が実行される。

AWS Lambdaが注目されている。処理実行中のみ課金されるため、安価に利用できる。S3にアップされた画像をLambdaでリサイズ、定期的に何かを発言するSlack用ボット、などを実現できる。

API Blueprint

APIドキュメントの作成にはAPI BlueprintというWeb APIの仕様を作成する言語を利用してテキストファイルを作成し、Gitで管理する方法が一般的によく用いられている。API Blueprintをファイルを作成・管理するPawというGUIツールや、Aglioというgulpと連携してHTMLを生成するツールもある。api-mockツールやapiaryといったサービスを利用することでモックサーバを立ち上げることも可能。