WeChatミニプログラムの開発方法と利用言語についてまとめてみた

f:id:show_motto:20190202145611p:plain 破竹の勢いで広まる「WeChat Mini Programs（ミニプログラム）」。

ミニプログラム領域においては、Alipayのアントフィナンシャル、バイドゥ、TikTokのバイトダンス、ニュースキュレーションアプリのToutiaoらも参入が始まっている。

WeChat のミニプログラムだけで、既に100万以上が作成されているというが、このミニプログラム、どうやって実装するのだろうか？

これだけ急速に広まるということは、簡単に作れるということなのか？

本記事では、そのような疑問に応えるべく、WeChat ミニプログラムの開発者用ドキュメントを元に、その開発手法について、プログラミング経験がないビジネスサイドの方でも分かるレベルで解説していこう。

↓ミニプログラムについて理解したい方は、まずこちらの記事からどうぞ。 www.dappsway.com

全体構成について
.wxml ファイルについて
- Data Binding
- List Rendering
.wxss ファイルについて
- Units of Measurement
- Style importation
.js ファイルについて
Alipayのミニプログラム開発はWeChatに酷似？
関連記事

全体構成について

WeChat ミニプログラムの各ページは以下の4つのファイルで構成されている。

***.js
***.wxml
***.wxss
***.json

*** 部分は、同じ英数字が入る。例えば、index ページであれば、以下のような形になる。

index.js
index.wxml
index.wxss
index.json

それぞれの役割としては、 .js ファイルはスクリプトファイルでロジック周りの記述、 .wxml ファイルはマークアップのためのファイル、 ..wxss ファイルはスタイルシートで見た目を整えるもの、 .json ファイルはページのPathやタイムアウトの設定等のコンフィギュレーションのためのファイルとなっている。

なお、 .json ファイルについては、アプリケーション全体で app.json というファイルを用意することになっており、各ページで個別な設定をしない場合には、 app.json が利用されるため、任意のファイルとなっている。

つまり、 .js 、 .wxml 、 .wxss があれば、1つのページを記述しているということになる。

一言でいうならば、HTML/CSS/Javascript で一般的なウェブサイトを構築したことがある人ならけっこうすぐに馴染めますよという内容となっている。

これ以降で、それぞれの詳細について解説していこう。

（若干コードも出てくるので、コードが苦手な方は最後の「まとめ」の章まで読み飛ばしでも大丈夫です）

.wxml ファイルについて

.wxml ファイルは、一般的なウェブサイトでいう HTML にあたる、いわゆるマークアップ言語だ。

「wxml = WeiXin HTML」というように、WeiXin（≒WeChat）版のHTMLということになる。

WeChat 版ということで、一般的なHTMLに加えて、WeChat ミニプログラムの作成を助けるいくつかの機能が付いている。

例えば、後述するロジックレイヤーの .js ファイルの記述と連携して、以下のような記述ができる。

Data Binding

page.js で記載した message: 'Hello MINA!' が {{message}} に代入され描画される。

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

List Rendering

page.js で記載した array: [1, 2, 3, 4, 5] が {{item}} に代入され描画される。

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

このように、ロジックレイヤーである .js ファイルとの連携が可能となっている。

Ruby on Rails 等のフレームワークの View ファイルに近しいともいえるだろう。

さらに詳細はこちら。

.wxss ファイルについて

.wxss ファイルは、一般的なウェブサイトでいう CSS にあたる、いわゆるスタイルを整えるためのコード。

「WXSS = WeiXin CSS」ということで、WeChat 用に拡張されたCSSである。

拡張されている点をいくつか紹介しよう。

Units of Measurement

wxss では、rpx（responsive pixel）という基準で大きさを記述することができる。

以下のように、デバイスサイズに応じて、最適な px サイズに変換をしてくれる。

Device	rpx converted into px (screen width/750)	px converted into rpx (750/screen width)
iPhone 5	1rpx = 0.42px	1px = 2.34rpx
iPhone 6	1rpx = 0.5px	1px = 2rpx
iPhone 6 Plus	1rpx = 0.552px	1px = 1.81rpx

Style importation

@import ステートメントを使うことで、別のスタイルシートを読み込むことができる。

例えば、以下のように、common.wxss から app.wxss を読み込むといったことができる。

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

さらに詳細はこちら。

.js ファイルについて

.js ファイルは、Javascript で記述をするロジックレイヤーとなる。

こちらのファイルでロジック周りの処理がされた後に、wxml 及び wxss に基づいてビューが描画されるという構成。

また、.js では、WeChat が用意している様々なAPIを用いて機能を提供することができる。

例えば、WeChat Pay のAPIを用いて決済を行ったり、QRコードを呼び出したりといったことが可能になっている。まさにミニプログラム独自の部分といえる。

こちらについては、膨大なAPIが用意されているので、詳細は以下を参照していただきたい。

open.wechat.com

Alipayのミニプログラム開発はWeChatに酷似？

本記事では、WeChat ミニプログラムの開発面について簡単にまとめてみた。

感想としては、以下のツイートでも書いたように、「独自の言語にちょるWeChat独自の機能性」を作りつつ、「HTML/CSS/Javascriptが分かればすぐに理解できるような学習コストの低さ」を兼ね備えているという点で、非常によく出来ていると感じた。

【WeChat ミニプログラムの開発言語】

・WXML（WeiXin 用のマークアップ言語）
・WXSS（WeiXin 用のstylesheet）
・Javascript

独自の言語を作ることで機能やデザイン性担保しつつ、 HTML/CSS/Javascript が分かればほぼ分かる程度に学習コストの低い作りで良い感じ。あとでちゃんとまとめる。
— 吉田基紀 / motoki yoshida (@motokiyoshida) 2019年2月1日