サイトアイコン 上尾市のWEBプログラマーによるブログ

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

管理者
Webサイト、これからどうなるの？
posted with ヨメレバ
こもりまさあき/栄前田勝太郎 エムディエヌコーポレーション 2017年09月
楽天ブックスで見る
Amazonで見る
Kindleで見る
ebookjapanで見る

書籍「Webサイトこれからどうなる」のまとめ。

点数

75点

感想

浅く広くといった内容。
移り変わりが早く、常に勉強していないといけない業界・時代だと改めて思った。

主な内容

CSS4の主な草案

セレクタが増える。グリッドレイアウト。変数。

より圧縮率の高い画像形式

CSSフレームワーク

BootstrapとFoundationが人気。
Bootstrapは_variables.scssにすべての変数が集約されており、この変数を編集するだけで全体的なデザインの更新が可能。

Node.js

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の記述ルール」。以下のような仕組み担っている。

  1. 既存のモバイルページとは別にAMP対応ページを用意する
    使用禁止のタグや、JS,外部CSSの制限などがある。
  2. 既存のモバイルページにmetaタグを追加し、AMP対応ページをクローラーに知らせる
  3. クローラーは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といったサービスを利用することでモックサーバを立ち上げることも可能。

Androidの開発環境

Android Studioが主流。

ネイティブアプリへの変換ツール

JavaScriptから変換=Monaca,Cordova、C#から変換=Xamarin、最近注目されているのはReactを使ったReactNative。

GitLab

GitLab Incはプライベートリポジトリも無償で利用できるサービスgitlab.comだけでなく、インストールタイプのGitlabというソフトウェアを提供している。コミュニティエディションは無償で利用可能であり、手元のサーバでGitHubと同じようなシステムを動かすことも可能。

モバイルバージョンを終了