サイトアイコン APPSWINGBY Developers Blog

モダンフロントエンド開発脳へ切り替えるには

hidekazu kawashima

５年前やそれ以前にウェブアプリーケーションを実装していた人がフロントエンドってそんなに難しくないよって話をされることがあるのですが、実際にはどうなんでしょうか？
フロントエンド界隈、特にHTML,CSS,Javascript界隈の観点でどんな変化があったのかを追って、実際はどうなのか考えてみたいと思います。

5年前と現代を比較する

5年前と現在を比較したときに上がるキーワードは、下記の通りかと思います。

Typescriptの出現がもたらしたもの　

近年では、Javascriptを利用した開発現場では、Typescriptを利用するのがあたり前になっています。Typesceriptは、Microsoftが開発した言語で、Javascriptのスーパーセットです。TypeScriptとJavaScriptは相互運用が可能です。Javascriptでは、書いたコードは、実際に動かしてみないとよくわからないと言われていましたが、Typescriptの導入により、動かす前に型チェックが実行され、コードを書いたタイミングでわかるようになったというのは、大きな進化だと思います。

EcmaScript2017の出現がもたらしたもの

昔のJavascriptでは、コールバック地獄という言葉よく流行りました。結果を受け取る場合には、callbackを利用して結果を処理するのが当たり前でした。このコールバックの実装をうまくやらないとか下記のようなコールバックがおおくなり制御できなくるということです。

const fs = require('fs');
fs.readFile(path = 'foo.txt', options = {
    encoding: 'utf8'
}, (err, data) => {
    console.log('foo.txtを読み込みました', data);
    fs.readFile(path = 'bar.txt', options = {
        encoding: 'utf8'
    }, (err, data) => {
        console.log('bar.txtを読み込みました', data);
        fs.readFile(path = 'buz.txt', options = {
            encoding: 'utf8'
        }, (err, data) => {
            console.log('buz.txtを読み込みました', data);
            ・・・以下略
        });
    });
});

ES5/ES2017が提供する非同期処理の機能(async/await)を使うと下記のようにコールバックではなくスッキリかけます。

const fs = require('fs');
// 非同期でファイルを読み込みPromiseを返す関数を定義
const readFileEx = (filePath) => {
    return new Promise((resolve, reject) => {
        fs.readFile(path = filePath, options = {
            encoding: 'utf8'
        }, (err, data) => {
            resolve(data);
        });
    });
}
// すべてのファイルを非同期に読み込むasync関数を定義
const readAll = async() => {
    const foo = await readFileEx('foo.txt');
    console.log('foo.txtを読み込みました', foo);
    const bar = await readFileEx('bar.txt');
    console.log('bar.txtを読み込みました', bar);
    const buz = await readFileEx('buz.txt');
    console.log('buz.txtを読み込みました', buz);
}
readAll();

Node.jsの出現

Node.jsの出現によって、コマンドラインベースでのツールがJavascript界隈にも導入されました。Node.js自体も優れていてサーバサイド開発も簡単に開発が可能です。フロントエンドエンジニアにでも、Typescriptという言語を起点にフロントエンド、サーバサイドどちらの開発も行えるようになりました。これは大きな進化だと思います。Node.jsでは、シンプルに保つということが重要視されています。この考えに基づき、UNIXの設計思想のような、シンプルなコマンド、ライブラリなどがパッケージとして提供されています。npm等のパッケージで簡単にインストールすることができ、バージョン管理が容易になったというのは、大きな進歩です。また、BaaS, mBaaSなどの機能がnode.jsベースのライブラリを提供してくれることも多く、簡単にシステムに取り込めるようになったのは大きな進歩です。

HTML/CSSでできること増えた

以前ですと、アコーディオンメニュなどの振る舞いを実装することやアニメーションなどの実装もHTML/CSSだけでは、実装が難しく、jQueryというUIライブラリをセットで使うのが当たり前でした。HTML5/CSS3等の出現により、このあたりも刷新されています。インタラクティブなUIを実装するための選択として、JQueryではなく、HTML5/CSS3がメインで使われるようになってきました。少し前のpadding,marginやanimation、グラデーションなどユーザに見せるための機能も多く提供されています。

Javascriptフレームワーク

node.jsが出てきたことにより、UI開発に利用する便利なフレームワークが増えました。
React.js, Vue.jsというコンポーネントをベースに開発するフレームワーク、angular.jsのような大規模なMVC フレームワークなど、従来のjQuery１択であった選択肢が増えました。また、SPA(シングルページアプリーケーション)による開発が主流になったのも最近の変化です。

おわりに

簡単ではありますが、5年前と現在でもとめられるフロントエンドの開発スキルが大きく変わった点などをいくつかピックアップして紹介しました。特にJavascript、HTML5/CSS3などが出現したことで、古い知識をそのまま現代の環境に持ち込んでもうまくいかない状況になってきています。定期的にアンラーンする必要がありますね。

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