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

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

ユーザ用ツール

サイト用ツール


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


差分

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

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

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.stencil:01.stencilアプリのファイル構造 [2019/09/16]
adash333 [src/components/app-profile/app-profile.tsx]
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
行 107: 行 155:
 {{:00.stencil:pasted:20190916-030200.png}} {{: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
  
  
行 129: 行 203:
 前:[[00.stencil:index.html|Webコンポーネント作成ツールStencil]] 前:[[00.stencil:index.html|Webコンポーネント作成ツールStencil]]
  
-次:+次:[[00.stencil:02.stencilでlocalStorage利用のTODOアプリ|00.stencil:02.stencilでlocalStorage利用のTODOアプリ]]


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