1 of 41

WebAssemblyに足りないもの

東京Node学園祭2016

2016/11/13�Yoshiki Shibukawa (@shibu_jp)

English Version: http://bit.ly/nodefest2016_shibu

2 of 41

お前誰よ

<MARQUEE>誕生日は明日(11/14)です!!</MARQUEE>
3人目の子供が生まれました
社内SE的な仕事
よく使う言語はGo、C++、Python、JavaScript
たまに物を書いたりします

ASCII.jpでGo言語によるシステムプログラミングを連載中
他にも仕込み中です

最近のお気に入りのガジェットは�SOLOWHEELです

English Version: http://bit.ly/nodefest2016_shibu

3 of 41

君たちに最新情報を公開しよう

昨年Mithrilのebookを世界最速で出しました

というか世界唯一？
0.2ベースでした

Mithrilは現在1.0rc3です�https://github.com/lhorie/mithril.js/tree/rewrite

コードサイズがさらに減って高速になるとか
API数はほぼ変わらず(m.component等、一部減る)
ストイックな人におすすめ！

書籍は1.0化したい

コンテンツもちょっと足したい！

English Version: http://bit.ly/nodefest2016_shibu

4 of 41

WebAssemblyに足りないもの

English Version: http://bit.ly/nodefest2016_shibu

5 of 41

背景

JavaScriptにasm.jsがきた

C/C++からコンパイルしてブラウザで動かせる(emscripten)
高速化(ネイティブより10倍遅いJSが2倍遅い程度になる)
JSよりも機能は低く、文字列すらない。DOMもアクセスできない。

WebAssemblyがきた

バイナリフォーマットでロードが早くなる
実行速度が早くはならない (それはasm.js対応側の機能)

English Version: http://bit.ly/nodefest2016_shibu

6 of 41

WebAssemblyを書くには？

C/C++(emscripten)
LLVM系の言語

今のところ積極的なのはRustぐらい？

オールインワンのゲームエンジン

Unreal Engine 4
Unity 3D 5.x

English Version: http://bit.ly/nodefest2016_shibu

7 of 41

C/C++

English Version: http://bit.ly/nodefest2016_shibu

8 of 41

WELCOME TO HELL!!!!

English Version: http://bit.ly/nodefest2016_shibu

9 of 41

C/C++

C++11、14、17と、言語そのものはとても良くなっています

lambdaと型推論(auto)、rangeアクセスあたりだけでも大分すっきり

もう(昔ほど)怖い言語じゃないよ

むかし膝にC++を受けた(IUnknownとかで)人もぜひもう一度再入門を！

問題は言語よりも下のレイヤー

English Version: http://bit.ly/nodefest2016_shibu

10 of 41

WebAssemblyには関係ないツライところ (1)

コンパイル(ランタイムライブラリ)のモードとか実行モードとか

/MD, /MT, /ML, /MDd, /MTd, /MLd, /LD, /LDd
-mmacosx-version-min=10.8

.dll, .so, .a, .lib, .dylib

__declspec(dllimport)とか
静的リンクライブラリと動的リンクライブラリで書き方が変わるとか
WebAssemblyも動的リンクとか言ってるので無関係でもない？
動的リンクの方式が規格にない→JavaScriptと同じだ！

名前マングリング(含むABI)が規格にない

クロスコンパイルできてもVC++用ライブラリは他のOSから使えない
Haiku OSとか、未だにGCC 2系を引きずっている・・・

English Version: http://bit.ly/nodefest2016_shibu

11 of 41

WebAssemblyには関係ないツライところ (2)

共有ライブラリもヘッダーがないとダメ

macOS添付のlibssl.dylibのヘッダーがないから再利用できない問題
pyOpenSSL とか cryptgraphy みたいなモジュールが OpenSSL にリンクするんだけど、そいつらを別の OpenSSL でビルドしたときに問題が起こる (@moriyoshit情報)

SxSとかなんですかそれ
クロスコンパイラ用意するのがめんどう・・・

English Version: http://bit.ly/nodefest2016_shibu

12 of 41

WebAssemblyも関係するところ (1)

環境から独立の枯れたパッケージマネージャがない

OS提供のツールに相乗りしてるのが多い

yum/apt/port/homebrew…
ビルド済みツールの利用者でしかなければ問題はないが・・・

開発版とOSで使いたいバージョンが違う場合どうするの？

Qt4を要求する開発補助ツールを使いつつ開発はQt5を使いたい場合
MacPortsだとQt4/Qt5はコンフリクトする

そもそも開発環境とターゲット(web)が違う場合に使えない

ターゲットがLinuxならコンテナでいいのかもしれないが・・・

English Version: http://bit.ly/nodefest2016_shibu

13 of 41

C/C++のパッケージマネージャ

biicode.com

死んだ
github pagesだけ残ってて切ない

clib

C言語用

CMakeベース

CPM、Hunterとかいろいろ

conan.io

今年リリース
まだ詳しくは触ってないけど・・・まあ悪くない？

QTPM

わしがつくった

English Version: http://bit.ly/nodefest2016_shibu

14 of 41

定番がない

クロスコンパイルとか可能なのか？

そもそも静的ライブラリが作れないやつはどうするのか？

欲しいライブラリはあるのか？
セキュリティアップデートはあるのか？

English Version: http://bit.ly/nodefest2016_shibu

15 of 41

WebAssemblyにも関係するところ (2)

ビルドに必要なツールの選択肢がたくさん

上位レイヤー

autotools (configure)
CMake / qmake

下位レイヤーのみ？

ninja/make

下位レイヤーまでやる系

waf/SCons/Visual Studio/XCode

OSによって使い分け・複数サポートが必要だったり

同じWindowsでも、VC++、mingw、cygwinでは違う手法やオプションが必要だったり

gulpとgruntとnpm scriptsで悩むぐらいどうってことないですよね！

English Version: http://bit.ly/nodefest2016_shibu

16 of 41

CMake

現時点でのレジェンド・オブ・ビルドツール(デファクトスタンダード)になりつつある

Qt5は自前のビルドツールにプラスしてCMakeもサポートした
JetBrains社のC++ IDEはプロジェクトファイル形式としてCMakeのみをサポート

中に各環境のコンパイラ情報とかライブラリの情報とかすべて持っている

C++の闇はすべてCMakeの腹の中に・・・

qmakeやMakeなどが宣言的(grunt的)なのに対して、手続き型構造化言語になっている

English Version: http://bit.ly/nodefest2016_shibu

17 of 41

CMakeの欠点

設定ファイルがとにかく長くなる
デバッガとかが欲しくなる
環境の違いを吸収するのは簡単ではない
なんでもできてしまうがゆえに、他の人が書いたファイルが読みづらい・・・

English Version: http://bit.ly/nodefest2016_shibu

18 of 41

CMakeでfizzbuzz

foreach(i RANGE 1 100)� math(EXPR notFizz "${i} % 3")� math(EXPR notBuzz "${i} % 5")� if(NOT notFizz AND notBuzz) � message("fizz")� elseif(notFizz AND NOT notBuzz)� message("buzz")� elseif(NOT notFizz AND NOT notBuzz)� message("fizzbuzz")� else()� message("${i}")� endif()�endforeach()

English Version: http://bit.ly/nodefest2016_shibu

19 of 41

CMakeでズンドコキ・ヨ・シ！

set(kiyoshied false)�set(zun 0)�while(NOT kiyoshied)� string(RANDOM LENGTH 1 ALPHABET 01 number)� if(${number})� message("ズン")� math(EXPR zun "${zun}+1")� else()� message("ドコ")� if(${zun} EQUAL 4)� message("キ・ヨ・シ！")� set(kiyoshied true)� endif()� set(zun 0)� endif()�endwhile()

English Version: http://bit.ly/nodefest2016_shibu

20 of 41

実用的な CMakeLists.txt

cmake_minimum_required(VERSION 3.1.0)��# project global setting��project(workbench7)��set(WORKBENCH7_MAJOR_VERSION 0)�set(WORKBENCH7_MINOR_VERSION 1)�set(WORKBENCH7_PATCH_VERSION 0)�set(WORKBENCH7_VERSION 0.1.0)��# qtpm setting��set(VENDOR_PATH ${CMAKE_CURRENT_SOURCE_DIR}/vendor)��# compiler setting��set(CMAKE_CXX_STANDARD 11)�if(MSVC)� set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} /W4")�else()� set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -Wall")�endif()��# enable Qt��set(CMAKE_AUTOMOC ON)�set(CMAKE_AUTOUIC ON)�set(CMAKE_AUTORCC ON)�set(CMAKE_INCLUDE_CURRENT_DIR ON)�include_directories(${CMAKE_CURRENT_BINARY_DIR})�if(DEFINED ENV{QTDIR})� set(CMAKE_PREFIX_PATH "$ENV{QTDIR}")�endif()��find_package(Qt5Core REQUIRED)�find_package(Qt5Gui REQUIRED)�find_package(Qt5Widgets REQUIRED)�# include extra settings��include("${CMAKE_CURRENT_SOURCE_DIR}/CMakeExtra.txt" OPTIONAL)

English Version: http://bit.ly/nodefest2016_shibu

21 of 41

# dependencies��set(QTPM_IS_ROOT_PROJECT FALSE)�add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/vendor/github.com___shibukawa___package1 ${CMAKE_CURRENT_BINARY_DIR}/package1)�include("${CMAKE_CURRENT_SOURCE_DIR}/vendor/github.com___shibukawa___package1/CMakeExtra.txt" OPTIONAL)�include_directories(${VENDOR_PATH}/github.com___shibukawa___package1/src)�add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/vendor/github.com___shibukawa___package2 ${CMAKE_CURRENT_BINARY_DIR}/package2)�include("${CMAKE_CURRENT_SOURCE_DIR}/vendor/github.com___shibukawa___package2/CMakeExtra.txt" OPTIONAL)�include_directories(${VENDOR_PATH}/github.com___shibukawa___package2/src)��# build setting��include_directories(src)��if(APPLE)� set(MACOSX_BUNDLE_BUNDLE_NAME Workbench7)� set(MACOSX_BUNDLE_GUI_IDENTIFIER "Workbench7")� set(MACOSX_BUNDLE_ICON_FILE MacOSXAppIcon.icns)� set_source_files_properties(Resources/MacOSXAppIcon.icns PROPERTIES MACOSX_PACKAGE_LOCATION "Resources")� set(MACOSX_BUNDLE_INFO_STRING "Workbench7-0.1.0, Copyright 2016 shibukawa.yoshiki")� set(MACOSX_BUNDLE_SHORT_VERSION_STRING "${WORKBENCH7_MAJOR_VERSION}.${WORKBENCH7_MINOR_VERSION}" )� set(MACOSX_BUNDLE_LONG_VERSION_STRING "${WORKBENCH7_VERSION}")� set(MACOSX_BUNDLE_BUNDLE_VERSION "${WORKBENCH7_VERSION}")� set(MACOSX_BUNDLE_COPYRIGHT "(C) 2016 shibukawa.yoshiki")� add_executable(workbench7 MACOSX_BUNDLE src/main.cpp Resources/MacOSXAppIcon.icns)�

English Version: http://bit.ly/nodefest2016_shibu

22 of 41

elseif(WIN32)� set(winres "${CMAKE_CURRENT_SOURCE_DIR}/windows.rc")� if(MINGW)� if(NOT CMAKE_RC_COMPILER)� set(CMAKE_RC_COMPILER windres.exe)� endif()� set(winresobj "${CMAKE_CURRENT_SOURCE_DIR}/windows.rc.obj")� add_custom_command(OUTPUT "${winresobj}"� COMMAND ${CMAKE_RC_COMPILER}� -D GCC_WINDRES� -I ${CMAKE_CURRENT_SOURCE_DIR}� -I ${CMAKE_CURRENT_BINARY_DIR}� -o ${winresobj}� -i ${winres})� set(${sources} "${winresobj}")� else()� set(${sources} ${winres})� endif()� add_executable(workbench7 WIN32 src/main.cpp ${sources})�else()� add_executable(workbench7 src/main.cpp)�endif()�qt5_use_modules(workbench7 Core Gui Widgets)�target_link_libraries(workbench7 package1 package2)

English Version: http://bit.ly/nodefest2016_shibu

23 of 41

# installer setting��if(WIN32)� install(TARGETS workbench7 ${dlls} RUNTIME DESTINATION bin COMPONENT applications)� file(GLOB dlls ${CMAKE_CURRENT_BINARY_DIR}/*.dll)� install(PROGRAMS ${dlls} DESTINATION bin COMPONENT applications)� install(DIRECTORY� ${CMAKE_CURRENT_BINARY_DIR}/iconengines� ${CMAKE_CURRENT_BINARY_DIR}/imageformats� ${CMAKE_CURRENT_BINARY_DIR}/platforms� ${CMAKE_CURRENT_BINARY_DIR}/translations DESTINATION bin COMPONENT applications)� set(CMAKE_INSTALL_SYSTEM_RUNTIME_LIBS_SKIP TRUE)� include(InstallRequiredSystemLibraries)� install(PROGRAMS ${CMAKE_INSTALL_SYSTEM_RUNTIME_LIBS}� DESTINATION programs� COMPONENT applications)� set(CPACK_PACKAGE_NAME "Workbench7")� set(CPACK_PACKAGE_VENDOR "shibukawa.yoshiki")� set(CPACK_PACKAGE_DESCRIPTION_SUMMARY "Write your project description here")� set(CPACK_PACKAGE_VERSION_MAJOR "${WORKBENCH7_MAJOR_VERSION}")� set(CPACK_PACKAGE_VERSION_MINOR "${WORKBENCH7_MINOR_VERSION}")� set(CPACK_PACKAGE_VERSION_PATCH "${WORKBENCH7_PATCH_VERSION}")� set(CPACK_PACKAGE_VERSION "${WORKBENCH7_VERSION}")� set(CPACK_RESOURCE_FILE_LICENSE "${CMAKE_CURRENT_SOURCE_DIR}/LICENSE.rst")� set(CPACK_PACKAGE_INSTALL_DIRECTORY "installer")� set(CPACK_COMPONENT_APPLICATIONS_DISPLAY_NAME "applications (Workbench7)")� set(CPACK_NSIS_MUI_ICON "${CMAKE_CURRENT_BINARY_DIR}/WindowsAppIcon.ico")� set(CPACK_NSIS_MUI_UNIICON "${CMAKE_CURRENT_BINARY_DIR}/WindowsAppIcon.ico")� set(CPACK_NSIS_MENU_LINKS "programs/workbench7" "Workbench7")� include(CPack)�endif()