====== 01.Stencil.jsアプリのファイル構造 ===== ---//2019/09/16 更新// 前回の、[[00.stencil:index.html|Webコンポーネント作成ツールStencil]]では、https://github.com/ionic-team/stencil-app-starter を[[https://relaxed-euclid-7d8e25.netlify.com/|Netlify]]で公開するところまで行いました。今回は、以下のサイトを参考に、このアプリのファイル構造と、中身のコードの一部を見ていきたいと思います。 https://www.joshmorony.com/building-a-pwa-with-stencil-project-structure-and-syntax/ {{:00.stencil:pasted:20190916-003749.png}} ===== ソースコードとDEMOサイト ===== ソースコード https://github.com/adash333/stencil-starter-app DEMOサイト https://relaxed-euclid-7d8e25.netlify.com/ ===== stencil-app-starterのおおまかなファイル構造 ===== https://github.com/adash333/stencil-starter-appのおおまかな構造は、以下のようになっています。（一部省略しています。）


.stencil/
node_modules/
src/
www/
.editorconfig
.gitignore
LICENCE
package-lock.json
package.json
readme.md
stencil.config.ts
tsconfig.json

さらに、このうち、src/ フォルダの中身の主なものは以下のようになっています。


assets/
components/
|-app-home/
  |-app-home.css
  |-app-home.e2e.ts
  |-app-home.spec.ts
  |-app-home.tsx
|-app-profile/
  |-app-profile.css
  |-app-profile.e2e.ts
  |-app-profile.spec.ts
  |-app-profile.tsx
|-app-root/
  |-app-root.css
  |-app-root.e2e.ts
  |-app-root.spec.ts
  |-app-root.tsx
global/
components.d.ts
index.html
index.ts
manifest.json

===== package.json ===== まず、''%%package.json%%''を見て、現在の@stencil/coreのバージョンを確認します。 {{:00.stencil:pasted:20190916-004451.png}}


"@stencil/core": "^1.3.3",
"@stencil/router": "^1.0.1"

の2つが使われているようです。また、''%%tsconfig.json%%''と''%%stencil.config.ts%%''というファイルも存在していますが、あまり気にしなくてよさそうです。 ===== npm run buildするとwww/フォルダにビルドされる ===== @vue/cliでは、''%%npm run build%%''すると、dist/フォルダにビルドされますが、Stencilの場合は、www/フォルダにビルドされるようです。（Netlifyにデプロイするときは、Publish directoryを、''%%www%%''にする必要があります。） {{:00.stencil:pasted:20190916-010504.png}} 以下、src/　フォルダの中身を見ていきます。 ===== src/index.html ===== src/index.html　の''%%%%''タブの中身を見てみると、''%%%%''のみが記載されており、最初に、''%%app-rootコンポーネント%%'が読み込まれることがわかります。 {{:00.stencil:pasted:20190916-011441.png}} ===== src/components/app-root/app-root.tsx ===== src/index.htmlから読み込まれるapp-rootコンポーネントは、src/components/app-root/ フォルダにある、 -app-root.tsx -app-root.css によって構成されています。 src/components/app-root/app-root.tsx　と、開発サーバで表示されるトップページを並べて比較してみます。左の赤で囲った部分が、右側の赤で囲った部分になっているようです。 {{:00.stencil:pasted:20190916-012701.png}} なんか青い色がついているなと思いましたが、今回は、app-root.css　にheaderとh1のスタイルが定義されているようです。 {{:00.stencil:pasted:20190916-013100.png}} Welcome to the Stencil App Starter... の部分は、以下のコードにより、app-homeコンポーネントを指定して表示しているようです。

{{:00.stencil:pasted:20190916-012424.png}} ===== src/components/app-home/app-home.tsx ===== src/components/app-root/app-root.tsx から、URLが"/"のときに読み込まれるapp-homeコンポーネントは、src/components/app-home/ フォルダにある、 -app-home.tsx -app-home.css によって構成されています。 src/components/app-home/app-home.tsx　と、開発サーバで表示されるトップページを並べて比較してみます。左の赤で囲った部分が、右側の赤で囲った部分になっているようです。 {{:00.stencil:pasted:20190916-022059.png}} ===== src/components/app-profile/app-profile.tsx ===== src/components/app-root/app-root.tsx から、URLが"/profile/:name"のときに読み込まれるapp-profileコンポーネントは、src/components/app-profile/ フォルダにある、 -app-profile.tsx -app-profile.css によって構成されています。 src/components/app-home/app-profile.tsx　と、開発サーバで表示されるトップページを並べて比較してみます。左の赤で囲った部分が、右側の赤で囲った部分になっているようです。 {{:00.stencil:pasted:20190916-023240.png}} URLが"/profile/:name"のときに、app-root.tsx　の、

により、app-profile　コンポーネントが呼び出されます。このとき、URLの:nameの部分を、app-profile.tsx


@Prop() match: MatchResults;

this.match.params.name

で受け取り、


{this.match.params.name}

により、表示しているようです。 {{:00.stencil:pasted:20190916-030200.png}} @propについては、詳しくは、以下の公式サイトを読んでおくのがよさそうです。 https://stenciljs.com/docs/properties {{:00.stencil:pasted:20190916-030558.png}} ===== @Propと@State ===== @Propは、コンポーネントに何かを入力するときに用います。 @Stateも、同様に、コンポーネントに何かを入力するときに用いますが、変化する可能性があるものを@Stateで定義するそうです。 https://www.joshmorony.com/building-a-pwa-with-stencil-project-structure-and-syntax/　の、"@Prop and @State"の項が非常にわかりやすいです。公式ドキュメント https://stenciljs.com/docs/properties https://stenciljs.com/docs/state ===== @Event and @Listen ===== @Eventは、EventEmitterと共に、イベントをtriggerするときに用います。？？？ Angularでは、テンプレートのところで、

と記載するところを、Stencilでは@Eventを用います。 https://www.joshmorony.com/building-a-pwa-with-stencil-project-structure-and-syntax/　の、"@Event and @Listen"の項がわかりやすいです。公式ドキュメント https://stenciljs.com/docs/events ===== 参考サイト ===== https://www.joshmorony.com/building-a-pwa-with-stencil-project-structure-and-syntax/ Building a PWA with Stencil: Project Structure and Syntax BY JOSH MORONY | LAST UPDATED: SEPTEMBER 03, 2019 ===== リンク ===== 目次：[[00.stencil:index.html|Webコンポーネント作成ツールStencil]] 前：[[00.stencil:index.html|Webコンポーネント作成ツールStencil]] 次：[[00.stencil:02.stencilでlocalStorage利用のTODOアプリ|00.stencil:02.stencilでlocalStorage利用のTODOアプリ]]