AI開発者のためのフロントエンド開発

こんにちは!株式会社キスモ役員の寺澤です。

先日の社内会議で、役員の大越からWeb開発の勉強会を開いてほしいとの要望がありました。 UI開発に興味がある、やってみたいという要望は他の役員やインターン生からも寄せられましたので、 ゼロからしっかり開発手順を覚える勉強会を開くことになりました。

なので今回はその勉強会の内容を・・・と言いたかったところですが、執筆時点でとある事情で勉強会が延期に なりましたので、今回はフロントエンド開発入門ということで紹介していきたいと思います。

pythonrubyphpほどでは無いにしろ、webとの親和性が高いです。 特にpythonはAI開発に長けていますので、サーバーサイドでAIを動かして、 ネイティブアプリやwebアプリでAIを使う構築をすることも珍しくはありません。

今回は、タイトル通り私の得意とするフロントエンド(webアプリのUI部分)に関する技術紹介となります。 簡潔にまとめたつもりなので、記事を読んで気になったものから勉強する読み方をお勧めします。 ただし、入門者には難しい内容もありますので、学習サイトで基本を覚えてから読むといいでしょう。 今回はAIとはあまり関係の無い記事となり、単純にフロントエンド開発をしたいにもお勧めできる記事となります。

f:id:kodamayu:20180130144150j:plain

使っている技術から紹介

現在のフロントエンド開発は、使う言語やライブラリが多いので初心者にはとっつきにくい状態となっています。 前述の通り、入門者には難しい内容もありますので、まずはjQueryが使えるレベルになってから以下のもの一つずつ覚えるのをお勧めします。

今回は現在の開発に使っているものだけを列挙します。

本記事では、二つのレベル感に分けて上記のものを紹介します。

とりあえずかっこいいUIを書くときに

html5・css3

ほぼ誰もが知る言わずもがなホームページを構成する言語です。 html5とcss3はそれぞれ主流のバージョンです。 特にcssでコンテンツ(文や画像など)の配置やアニメーションが柔軟に行えるようになったので、

  • htmlでコンテンツを作成
  • cssでUIデザインをほぼ全般的に
  • javascriptでUIの挙動を定義

という住み分けをして書くイメージがあります。

基本中の基本の技術なので、学習サービスを使えばすぐに覚えられます。 応用としてもっとUIをかっこよくする場合にも、cssライブラリを使ったり、ぐぐったりすれば意外と何とかなります。

Vue.js

現在最もホットなUIのライブラリです。UI(html)とjavascript内のデータがリアルタイムで連動し、 そのデータの操作もUIで簡単にできるような書き方ができます。

そのような構造をとるライブラリは今となっては珍しくありませんが、 Vue.jsは速さと親しみやすさを前に出していて、主張通りわかりやすい構造のWebアプリが書けます。

Vue.jsを使う時は、UIと連動させるデータと、データやUIの更新時の挙動やUI操作で使いたいメソッドを定義します。 一方、htmlに直接、定義したデータの変数や、UIの操作時(クリック・キー入力など)に対して実行するメソッドを書き込んでやります。

この構造は他に似たライブラリのReact.jsやAngular.jsでも書けますが、Vue.jsは素早く簡単に書けるのでプロトタイピングの時にも重宝します。

公式のガイドに沿っていけば基本や感覚は掴めますが、用語が多いのでとっつきにくいイメージがあります。 入門記事を作っている方々もいますし、英語でよければ海外サイトでVue.jsの講座をやっているところもありますので、そちらと合わせて学んだ方がよいでしょう。

Font Awesome

デザイン特化のcssライブラリです。こちらはアイコン集みたいな感じですね。 webアプリで汎用的に使えるアイコン(矢印やリストアイコン、一般的な設備や道具、SNSアイコンなど)を多く取り揃えており、 とても役立ちます。しかもcssで簡単にアイコンの色や大きさを変更できたり、 特定のクラスを指定してやれば、大きさやアニメーションなども指定できます。 UI部分の内部だけでなく、外見の開発も行う場合にはとても重宝します。

勉強する、もしくはとりあえず使う際には以下のサイトがとてもよくまとまっていて、読みやすいです。

参考:【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

もっと柔軟にプログラミングしたいときに

ECMAScript7

そもそもECMAScript(以下ES)がjavascriptの標準であり、javascriptの仕様はESを元に決められていました。 ES7は最新の仕様で、新しいブラウザならこのルールで書いたプログラムが実行できます。

初期のjavascriptは普通のプログラミング言語と違ってかなり異質で非常に書きづらいものでしたが、 最近では、ESのバージョンアップのおかげですっかり親しみやすい言語になりました。 javascriptは書けるけど、ESを知らないorまだ勉強していないって方はES6の入門記事から 勉強することをお勧めします。ES7とES6の差分はあまりなく、ES6の方が入門記事が豊富です。

「ES6 入門」や「ES2015 入門」で色々出てきますので簡単に勉強できます。

ただし、古いブラウザ(IEとか)ではこの仕様に対応されていないので、 babelというコンパイラを使って昔の仕様にコンパイルしてやります。(本記事では省略)

npm

かつては公開されているjavascriptのライブラリはダウンロードしたりcdnのリンクを参照して、 htmlにライブラリを呼び出す記述をしていました。

npm(とかつて使い分けられていたbower)が出てからはこれでライブラリを管理するようになりました。 npmの役割としては、pythonでいうpipの役割です。ライブラリをインストールしたり依存関係をまとめてくれたりします。 特に今回紹介したjavascript関連のものはnpmを使う必要のあるものが多いですので、 入門講座を終えたレベルの人は覚えておくべきでしょう。

インストールに関しては、windowsOSXならばNode.jsをインストールすればすぐ使えます(OSXbrewでインストール)。 Linuxの場合はNode.jsとnpmが別れているみたいなので注意が必要です。

eslint

javascript文法チェッカーです。 他にも文法チェッカーはありますが、今はこれが主流です(だと思っている)。 前述のnpmでインストールすることができ、主流のエディタでもeslint対応化のパッケージがあります。

eslintは基本的には自分で設定します。他のライブラリ独自の文法にも対応できるようになります。 ただし、いきなり自分で設定するのは大変なので、まずはAirbnb JavaScript Style Guideといった 有名なコーディングスタイルに乗っ取ったルールでスタートしましょう。

使う際にはnpmが必要になりますが、 試しに使って感覚を掴む程度なら以下の参考記事に沿って使ってみるとよいでしょう。 AtomやSublimeTextへの導入の仕方もあります。

参考:ESLintでJavaScriptの構文チェックを始める | Tips Note by TAM

また、Airbnb JavaScript Style Guideに関しては導入するのは簡単で、ちょっと調べればすぐ導入できます。

参考:Airbnb JavaScript Style Guide

webpack

フロントエンドの現在主流のビルドツールです。 webpackは依存関係(ライブラリや分割して作成したファイル)を把握し、一つのファイルにまとめ上げる機能を持っています。 その機能はjavascriptcss(sass・less)、果ては画像も一つのファイルにまとめあげます。 また、前述のbabelをwebpack内で設定して古いブラウザでも使えるようにしたり、 eslintを使って自動で文法チェックをして修正・報告するようにもできます。

最近は設定不要でwebpackよりもビルドが速いと言われているParcelが話題になっていますが、 あちらとはケースバイケースで使い分けたり、今後の動向を見ながら乗り換えを検討するのが良いでしょう。

入門記事に関しては書いている方々がたくさんいますが、古いバージョンのものも多いので注意が必要です。 ざっと調べた感じですと、以下の参考記事がわかりやすく使い方の手順を踏めます。WindowsMac向けに書かれています。

参考:最新版で学ぶwebpack 3入門(図解付き) - JS開発で必須のモジュールバンドラー - ICS MEDIA

終わりに

いかがでしたでしょうか。

ちょっとかっこいいwebアプリを書きたいだけならば、Vue.jsとFont Awesomeが使えるようになればすぐできます。 特に紹介した中では、Vue.jsはかなり簡単に使え、実務にも使われているので是非修得するとよいでしょう。 他の技術、特にnpmとwebpack(parcel)を使えば、もっとかっこいいUIを書くためのライブラリを導入できるようにもなります。 紹介したものは現在の主流なので、今から覚えれば損はないです。

一方で、アプリ規模をスケールアップするという場合には紹介した技術だけでは必ず限界が来ます。 例えばcssの代わりにsassやlessを使う、FlowかTypeScriptを導入する、Vuexを使って構造化する、など応用を効かせる必要があります。 これらの技術にも興味があれば調べてみるといいと思います。

また、紹介したものを簡単に体験できるよう近々テンプレートを作成しようとも思っています。 公開する際にはこの記事で報告しますね。

おまけ:pythonとの連携を取るには?

フロントエンド開発は、webアプリ開発のUI担当ということで、pythonでサーバーアプリを書いて Web APIとして繋げてやれば連携が取れます。

サーバーアプリをどうやって書くかですが、規模が大きくない開発ならば、flaskを使うことをお勧めしています。 小規模ならば関数を書く要領で簡単に書けますし、htmlのページやjson形式でデータを渡すだけの機能もすぐに組めます。 機械学習モデルを組んだけど、かっこいいUIで使えるようにしたいと場合にはflaskと一緒に組み合わせてみてはいかがでしょうか。

他にも優れてサポートの強いライブラリ・フレームワークはありますが、flaskもその例には漏れず、 サポートが強いです。また、flaskの優位性として中規模ぐらいまでなら十分対応できます(大規模ならdjangoの方がいい)。