MIS.W 公式ブログ

早稲田大学公認、情報系創作サークル「早稲田大学経営情報学会」(MIS.W)の公式ブログです!

昨今のWebとその周辺技術について 【新歓ブログリレー2018 17日目】

こんにちは。基幹理工学部情報通信学科3年のしくがわといいます。MIS.WではWeb班長としてインフラの管理をしたりしています。最近CG研に入会したのですが、今までデジタルで絵を描いたことがなかったので大変です。線が綺麗に引けません.......

それは置いといて、今回はWeb班長として「Webプログラミングに興味あるけど色々あってよくわからない...」って方に向けて複雑化しているWeb周辺技術について広く浅く解説していきたいと思います。

そもそもWebプログラミングって何?

Webプログラミングって用語は各所で使われていますが、その守備範囲はかなり幅広いです。皆さんはクライアント・サーバーシステムという言葉を聞いたことがあるでしょうか。コンピューターをサーバー側とクライアント側に分けてアプリケーションを構築するアーキテクチャーを指すのですが、これがWebプログラミングの根幹を成す概念です。Webプログラミングには大きく分けて3つの領域があります。

・クライアントサイド

・ サーバーサイド

・インフラ

これらの三領域の中でも色々と区分が存在するのですが、基本はこの3つです。サーバーサイドとインフラは一緒に扱われることもあります。本記事ではこれらの三領域で使われている技術要素を浅く広く紹介していきたいと思います。

f:id:shikugawa:20180412234814p:plain

クライアントサイド

クライアント・サーバーシステムにおけるクライアントに当たる領域になります。皆さんが普段アプリケーションを使う上で目にすることになるのはこのクライアントサイドにあたります。スマートフォンアプリ、Webページ等全てこのクライアントサイドに当たります。本記事ではクライアントサイド(以下フロントエンドと呼びます)で使われている技術要素をかる~くまとめていきたいと思います。

HTML/CSS

これは結構聞いたことがある人が多いのではないでしょうか。HTMLはマークアップ言語の一つでWebページの概観を定義する言語で、CSSはHTMLで作成されたWebページの概観を装飾するための言語です。静的なページを作成する際には普通のHTML/CSSでページのスタイルを記述することが多いのですが、複雑なWebアプリケーションになってくると、テンプレートエンジンというものを用いてWebページを記述したり、XMLで記述したものをXSLTを用いてHTMLに変換したりすることもあります。また、CSSはSCSSやLESSといったCSSと比較してよりプログラミングっぽい感じで記述出来る言語を用いて記述し、変換して生成することもあります。昨今では大規模なページになってくると生でCSSを書くよりもSCSSを用いてCSSに変換している事が多い気がします。 一からHTML/CSSを書いてページを作るのは結構大変です。しかし、BootstrapやMaterializeといったフロントエンドWebページ用フレームワークを使うと簡単にそれなりにいい感じのデザインのページを作成することが出来ます。また、これらはデフォルトでレスポンシブに対応しているのでいちいちページのサイズに合わせてスタイルを切り替える必要はありません。レスポンシブが基本となっている昨今では多くのページでこれらのフレームワークが用いられています。

Javascript

これもノンプログラマな方でも聞いたことがある言語かと思います。主にWebページに動きを付けたり、クライアントサイドから非同期的にサーバーにアクセスしたりする際に用いられます。皆さんがJavascriptと呼ぶものはECMAScriptと呼ばれる標準規格に則って設計されたプログラミング言語です。ここからは結構複雑な話になってくるのですが、現在多くのブラウザでサポートされているのはECMAScript 5th Edition(ES5)に則って設計されたJavaScriptです。 しかし、ES5は多くのプログラマに取って扱いづらい言語です。なぜ扱いづらいのかは非常に長くなってしまうのでここでは説明しません。そこで、「JavaScript(ES5)よりも扱いやすい言語を作って、JavaScriptに変換してやればいいんだ!」という動きが起こりました。ここで、AltJSと呼ばれるJavaScriptに変換できるJavaScriptより扱いやすい言語が多く登場します。代表的なものに、CoffeeScriptやTypeScriptといったものがあります。

CoffeeScript

2010年くらいに登場しました。インデントを一つのブロックとして扱えるために可読性が高かったり、アロー演算子が使えたりとES5より使いやすい上に記述量が減らせる設計であるのは確かなのですが、ES5の悩ましい点であったプロトタイプベースのオブジェクト指向言語であるという問題が解消されていなかったりといった様々な理由で使用者は減りました。しかし、後述するRuby on Railsの最新版ではCoffeeScriptが標準でサポートされています。何故かは私も知りません。

・ TypeScript

Microsoftが開発したAltJSです。ES5と違ってクラスベースオブジェクト指向なので、多くのプログラマにとって扱いやすい言語となっています。この言語の目玉機能は型があるという所です。型定義ファイルというものをスクリプト内で読み込むようにすれば、C#Javaといった言語と同じく型を持つ変数を定義することが出来ます。また、プロパティが搭載されていたり、ラムダ式が使えたり、let/constで変数宣言出来たりと、Microsoft開発であるためか、C#に非常に近い言語仕様になっており、とても扱いやすいです。

しかし2015年になってECMAScript 6th Edition(ES6)が登場しました。ES6は非常にTypeScriptに近い言語仕様になり(もちろん型は使えませんが)、扱いやすい言語になりました。しかし、多くのブラウザが2018年現在ES6に対応していないため、AltJSと同様にBabelというツールを用いてES5に変換(トランスパイル)しなければなりません。 また、以前はCDNやライブラリのディレクトリを直接scriptタグを用いてHTMLファイルに記述してライブラリを読み込むのが主流でしたが、現在はnpmというパッケージマネージャーを用いてライブラリを管理し、browserifyやwebpackといったツールを用いてライブラリやソースコードを一つのファイルに統合し、統合ファイルのみをHTML側で読み込むという事が多いです。この方がHTMLとJavaScript疎結合性が担保され、管理が煩雑になりにくいです。

このように、モダンなフロントエンド技術ではコードを書いて実際に動く形に変換するという形式が普通になっているのですが、これらの工程をコードを書く毎に一々行うのは結構大変です。そこで、Gulp/Gruntというツールが登場します。Gulpはタスクランナーと呼ばれるツールの一つなのですが、Gulpの定義ファイルに行いたいタスク(ここではAltJS/ES6をES5に変換し、browserify/webpackでファイルを統合する)を記述しておけば、コマンド一発でこれらのタスクを自動的に行うことができます。

JavaScriptには様々なライブラリが存在しますが、最もよく使われていたライブラリとしてはjQueryが挙げられるでしょう。jQueryを用いれば、CSSスクリプトで変更したり、Ajax(Webページ上における非同期処理)といったものが簡易的に記述出来ます。ただ、現在は昔と比べると出てくることが少なくなりました。何故なら、jQueryに頼らなくてもリッチなUIを作る技術が続々と登場したからです。ReactだったりVue.jsだったりAngularといったものがそれにあたります。

また、Electronというフレームワークを使えば、デスクトップアプリが作れてしまったり、ReactNativeやCordovaなんかを使ってスマホアプリも作る事ができます。特にElectronはAtomVisual Studio CodeといったエディタやSlackの公式デスクトップアプリなんかを作るのにも使われていたりします。

サーバーサイド

クライアント・サーバシステムのサーバーサイドに当たる領域です。ユーザーから見えない部分の処理を担当します。代表的なものにデータベースを経由させたビジネスロジックといったものが挙げられます。この辺りの領域は、基本的にRuby on Rails等のフレームワークを用いてプログラミングすることが一般的です。今ではこれらのフレームワークのルールに従ってプログラミングすることで簡単にWebシステムを構築することが可能になりました。のでこの項では代表的なWebフレームワークの紹介をしていきたいと思います。

Ruby on Rails

国産言語Rubyを用いて作られているWebフレームワークです。機能が他のフレームワークと比較して体系化されており、非常に扱いやすいです。また、Webシステムの基本的な機能を自動で生成することが出来る機能を持っているために、初心者でも簡単なWebアプリケーションを作成することが出来ます。

・Laravel/Cake PHP

PHPを用いて作られているWebフレームワークです。私はほとんど使ったことがないのでなんとも言えないのですが、多くのプロジェクトで使われているらしいです。

Django

Python製のWebフレームワークです。Python自体はデータ分析や機械学習といった用途に使われる事が多く、昔はあまり日本では使われていなかったのですが、昨今では非常によく使われています。本屋の技術書コーナーなんてうんざりするくらいPython機械学習の本が並んでいます。機械学習システムをAPIとして提供したりする際に用いられるのがDjangoなんですが、このフレームワークは上述のRuby on Railsと比べるとあまり整理されておらず、使いづらいという印象を受けます。それでも最近は日本語の資料もかなり増えてきているのでこれから更に普及していくかと思います。

有名なフレームワークをざっと紹介しましたが、サーバーサイドで使われてる技術はRDBMS(MySQL, PostgreSQL etc....)やKVS(Redis, Cassandra etc...)やElasticSearchとか....とにかく沢山あるのです。Webの世界にいると次々と新しい技術に晒される事になるので動向を追うだけで精一杯です。

インフラ

ほんの少し前まで企業は自社のデータセンターを持ってたり、個人でもオンプレミスサーバーでWebシステムを運用するという事が普通でした。しかし、昨今ではクラウドコンピューティング(IaaS, SaaS, PaaS等)を用いてサービスという形で計算資源を利用してサーバーを構築する事が増えています。代表的なクラウドコンピューティングサービスにはAWS(Amazon Web Services)やGCP(Google Cloud Platform)といったものがあります。このようなクラウドコンピューティングサービスを駆使した様々なサーバーアーキテクチャーも考案されています。マイクロサービスアーキテクチャというものが新たなアーキテクチャにおいては主流なのですが、詳しく知りたい方は https://microservices.io なんかを読んでみるといいかもしれません。

f:id:shikugawa:20180412235008p:plain

ツール面もここ10年で大きく変遷しており、Dockerといったコンテナベースの仮想化ツールや、Ansibleといったサーバープロビジョニングツールのような便利なツールが沢山登場しています。モダンなインフラにおいては「Infrastructure as Code」という理念がベースになっており、コードで構成を管理する事が基本になっています。何故コードで構成を管理できると嬉しいのかというと、構成をバージョン管理出来たり、サーバーサイドエンジニアがインフラに手を加える事が容易になります。 インフラにおいて用いられるツールは星の数ほどあるのでここで全てを紹介するのは無理なので、MIS.W内で用いられているツールの方の一部を紹介をしていきたいと思います。

Apache

有名なWebサーバーソフトウェアです。ですが最近ではより高速に動作するNginxという競合ソフトウェアに取って代わられようとしています、MIS.Wで動いているApacheもNginxの方に置き換えていけたらいいなと思っています。

Postfix

メールサーバーソフトウェアです。UNIX環境においては大体このソフトが用いられている印象です。

終わりに

Web周辺の技術は日進月歩です。5年もすればパラダイムシフトが起こっているような世界です。ですので、Webエンジニアは絶えず技術動向にアンテナを張っていくことが何よりも大事です。頑張って覚えた技術がほんの数年もすれば全く使えなくなっているなんてことも普通です。ですが、「技術の学び方」を習得出来ればどんなに技術の変遷が起こったとしてもすんなり対応できるようになるかと思います。Web技術に興味があればぜひMIS.W入会後Web班に入ってみてください。

f:id:shikugawa:20180412235058p:plain

Twitterは@_iy4です。フォローしてね