StencilOne

2019年6月8日2019年6月9日

2019年6月、Stencil Version 1.0が発表された。なぜか、名前がStencilからStencilOneという名前になっていて、ロゴも変わっていました。

Contents

StencilOneアプリの始め方

npm version 6以上が入っていれば、以下のコマンド入力で始めることができます。

npm init stencil
// ionic-pwa を選択
// project name を入力 "my-app"とします。
cd my-app
npm start

最初のプロジェクト作成は1秒くらいかかり、npm startからブラウザに右上のような画面が表示されるのに約20秒くらいかかりました。

Ionic4-Angularよりはだいぶ軽そうです。（当たり前っちゃ当たり前ですが。）

ファイル構造とpackage.json

まだ＠stencil/core は、 1.0.0-beta.8 　でした。

src/　フォルダの中にソースコードを記載します。
index.html　は以下のようになっています。触らなさそうです。

中身はすごくややこしそうですが、中のコメント文を読むと、stencil compilerによって自動生成されるファイルとのことなので、気にしないでよさそうです。

ルーティングの役割を果たしているファイルのようです。新しくcomponentを追加したら、ここにルーティングを記載する必要がありそうです。

このアプリは、homeページとprofileページがあるのですが、homeページに対して、以下の4つのファイルが必要なようです。

中でも、app-home.tsxは以下のようになっており、React(Javascriptフレームワーク)のJSXのtypescriptバージョンである、tsxファイルとなっています。（app-root.tsxもtsxファイルとなっています。）

上記コードの、以下の３つのファイルを見つつ、公式ドキュメントを読みながら、アプリを作成していく形になりそうです。