00.stencil:01.stencilアプリのファイル構造
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
00.stencil:01.stencilアプリのファイル構造 [2019/09/16] – [src/components/app-profile/app-profile.tsx] adash333 | 00.stencil:01.stencilアプリのファイル構造 [2019/09/16] – [@Event and @Listen] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== 01.stencilアプリのファイル構造 ===== | + | ====== 01.Stencil.jsアプリのファイル構造 ===== |
+ | | ||
前回の、[[00.stencil: | 前回の、[[00.stencil: | ||
行 13: | 行 14: | ||
DEMOサイト | DEMOサイト | ||
https:// | https:// | ||
+ | |||
+ | ===== stencil-app-starterのおおまかなファイル構造 ===== | ||
+ | https:// | ||
+ | |||
+ | < | ||
+ | .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 ===== | ||
行 40: | 行 88: | ||
===== src/ | ===== src/ | ||
- | src/ | + | src/ |
-app-root.tsx | -app-root.tsx | ||
-app-root.css | -app-root.css | ||
行 67: | 行 115: | ||
===== src/ | ===== src/ | ||
- | src/ | + | src/ |
-app-home.tsx | -app-home.tsx | ||
-app-home.css | -app-home.css | ||
行 94: | 行 142: | ||
により、app-profile コンポーネントが呼び出されます。 | により、app-profile コンポーネントが呼び出されます。 | ||
- | このとき、URLの< | + | このとき、URLの< |
+ | < | ||
+ | @Prop() match: MatchResults; | ||
+ | |||
+ | this.match.params.name | ||
+ | </ | ||
+ | で受け取り、 | ||
+ | < | ||
+ | {this.match.params.name} | ||
+ | </ | ||
+ | により、表示しているようです。 | ||
+ | {{: | ||
+ | |||
+ | <wrap hi> | ||
+ | |||
+ | https:// | ||
+ | {{: | ||
+ | |||
+ | ===== @Propと@State ===== | ||
+ | @Propは、コンポーネントに何かを入力するときに用います。 | ||
+ | @Stateも、同様に、コンポーネントに何かを入力するときに用いますが、変化する可能性があるものを@Stateで定義するそうです。 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | 公式ドキュメント | ||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | ===== @Event and @Listen ===== | ||
+ | @Eventは、EventEmitterと共に、イベントをtriggerするときに用います。??? | ||
+ | Angularでは、テンプレートのところで、 | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | と記載するところを、Stencilでは@Eventを用います。 | ||
+ | https:// | ||
+ | 公式ドキュメント | ||
+ | https:// | ||
00.stencil/01.stencilアプリのファイル構造.txt · 最終更新: 2019/09/16 by adash333