モダンJavaScriptの練習に:『Electronではじめるアプリ開発』

Electronは、Webの技術(HTML+CSS+JavaScript)を使用してデスクトップアプリケーションを構築するためのフレームワークです。Atom、Visual Studio Codeといったモダンなエディタや、Slackのデスクトップ版などに利用されています。ChromiumというChromeのベースとなっているブラウザを使用することで、Windows/macOS/Linuxといった様々なOS上で動作する、クロスプラットフォームなデスクトップアプリケーションを構築することができます。

本書では、ES2015 + Reactという組み合わせでアプリケーションを構築していきます。ES2015やReactについての詳しい解説は無いので、あらかじめES2015のクラス構文やアロー関数式、Reactの基本的な使い方を身に着けておいたほうが読みやすいでしょう。

ES2015については『改訂新版JavaScript本格入門』がおすすめです。Reactについては、公式チュートリアルをやっておけば大丈夫でしょう。
以下のようなソースを見て、だいたい何をやっているかわかればOKです。

// Previewer.jsx
import React from "react";
import marked from "marked";
import style from "./Previewer.css";
import emojione from "emojione";

marked.setOptions({sanitize: true});

const renderer = new marked.Renderer();
renderer.text = (text) => {
    return emojione.shortnameToImage(text);
};

export default function Previewer(props) {
    return (
        <div
            id="previewer"
            className={`${props.className} ${style.previewer}`}
        >
            <span
                dangerouslySetInnerHTML={{__html: marked(props.value, {renderer})}}
            />
        </div>
    );
}

本書には、様々なライブラリを活用して、手早く高機能なアプリケーションを構築する方法が記載されています。また、各章はチュートリアル形式になっているので、実際に手を動かしながら学ぶことができます。Electronに興味がある人だけでなく、モダンなJavaScriptアプリケーションの組み方について理解を深めたい人にもおすすめできる内容です。

コメントをどうぞ

コメントを残す