サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


00.stencil:01.stencilアプリのファイル構造


差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
最新のリビジョン 両方とも次のリビジョン
00.stencil:01.stencilアプリのファイル構造 [2019/09/16]
adash333 [src/index.html]
00.stencil:01.stencilアプリのファイル構造 [2019/09/16]
adash333 [リンク]
行 1: 行 1:
-====== 01.stencilアプリのファイル構造 =====+====== 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]]で公開するところまで行いました。 前回の、[[00.stencil:index.html|Webコンポーネント作成ツールStencil]]では、https://github.com/ionic-team/stencil-app-starter を[[https://relaxed-euclid-7d8e25.netlify.com/|Netlify]]で公開するところまで行いました。
  
行 13: 行 14:
 DEMOサイト DEMOサイト
 https://relaxed-euclid-7d8e25.netlify.com/ https://relaxed-euclid-7d8e25.netlify.com/
 +
 +===== stencil-app-starterのおおまかなファイル構造 =====
 +https://github.com/adash333/stencil-starter-appのおおまかな構造は、以下のようになっています。(一部省略しています。)
 +
 +<code>
 +.stencil/
 +node_modules/
 +src/
 +www/
 +.editorconfig
 +.gitignore
 +LICENCE
 +package-lock.json
 +package.json
 +readme.md
 +stencil.config.ts
 +tsconfig.json
 +</code>
 +
 +さらに、このうち、src/ フォルダの中身の主なものは以下のようになっています。
 +
 +<code>
 +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
 +</code>
 +
 +
  
 ===== package.json ===== ===== package.json =====
行 40: 行 88:
 ===== src/components/app-root/app-root.tsx ===== ===== src/components/app-root/app-root.tsx =====
  
-src/index.htmlから読み込まれるapp-rootコンポーネントは、src/components/app-root/ フォルダにある、+src/index.htmlから読み込まれる<wrap hi>app-rootコンポーネント</wrap>は、src/components/app-root/ フォルダにある、
   -app-root.tsx   -app-root.tsx
   -app-root.css   -app-root.css
行 67: 行 115:
 ===== src/components/app-home/app-home.tsx ===== ===== src/components/app-home/app-home.tsx =====
  
-src/components/app-root/app-root.tsx から、URLが"/"のときに読み込まれるapp-homeコンポーネントは、src/components/app-home/ フォルダにある、+src/components/app-root/app-root.tsx から、URLが"/"のときに読み込まれる<wrap hi>app-homeコンポーネント</wrap>は、src/components/app-home/ フォルダにある、
   -app-home.tsx   -app-home.tsx
   -app-home.css   -app-home.css
行 94: 行 142:
 により、app-profile コンポーネントが呼び出されます。 により、app-profile コンポーネントが呼び出されます。
  
-このとき、URLのnameの部分が+このとき、URLの<code>:name</code>の部分を、app-profile.tsx  
 +<code> 
 +@Prop() match: MatchResults; 
 + 
 +this.match.params.name 
 +</code> 
 +で受け取り、 
 +<code> 
 +{this.match.params.name} 
 +</code> 
 +により、表示しているようです。 
 +{{:00.stencil:pasted:20190916-030200.png}} 
 + 
 +<wrap hi>@prop</wrap>については、詳しくは、以下の公式サイトを読んでおくのよさそうです。 
 + 
 +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では、テンプレートのところで、 
 +<code> 
 +<todo-list (todoCompleted)="someFunction()"> 
 +</code> 
 +と記載するところを、Stencilでは@Eventを用います。
  
 +https://www.joshmorony.com/building-a-pwa-with-stencil-project-structure-and-syntax/ の、"@Event and @Listen"の項がわかりやすいです。
  
 +公式ドキュメント
 +https://stenciljs.com/docs/events
  
  
行 116: 行 203:
 前:[[00.stencil:index.html|Webコンポーネント作成ツールStencil]] 前:[[00.stencil:index.html|Webコンポーネント作成ツールStencil]]
  
-次:+次:[[00.stencil:02.stemcilでlocalStorage利用のTODOアプリ|00.stencil:02.stemcilでlocalStorage利用のTODOアプリ]]


00.stencil/01.stencilアプリのファイル構造.txt · 最終更新: 2019/09/16 by adash333