差分

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

--- stencil:index.html [2019/06/08] – [Windows10でStencilアプリの開始] adash333
+++ stencil:index.html [2019/09/16] (現在) – [Stencil 目次] adash333
@@ 行 1: / 行 1: @@
 ====== Stencil.js ======
+---//2019/09/16 更新//
+[[00.stencil:index.html|Webコンポーネント作成ツールStencil]]に移動しました。
-https://stenciljs.com
+===== Stencil 目次 =====
-{{:stencil:pasted:20190202-162514.png}}
-Stencilとは、Webコンポーネントを作成するためのツール（コンパイラ）だそうです。
+[[00.stencil:index.html|Webコンポーネント作成ツールStencil]]
-？
+[[00.stencil:01.stencilアプリのファイル構造|01.stencilアプリのファイル構造]]
-何を言っているのかさっぱり分かりませんね。私もよく分かりませんが、特定のフレームワークに依存せずに、フォームやナビゲーションバーなどの、『再利用可能なWebページ作成用の部品』を作成するためのツールみたいなもの、と、私は認識しています。
+[[00.stencil:02.stencilでlocalstorage利用のtodoアプリ|02.StencilでlocalStorage利用のTODOアプリ]]
-将来性があるのかさっぱり分かりませんが、なんか面白そうなので、Stencilを用いた簡単なアプリを写経していきたいと思います。
-参考：[[https://medium.com/@takeshiamano/stencilって何-ionicにどういう影響があるの-fcf061dceec1]]
-===== Stencil 目次 =====
-[[stencil:01.stencilでtodoアプリ|01.StencilでTodoアプリ]]
 [[stencil:reduxに関するリンク|Reduxに関するリンク]]
-===== 開発環境 =====
-年1月現在、残念ながら、CodeSandboxでは簡単にStencilを利用することはできません。
-Angular、ReactやVue.jsと異なり、自分のパソコンで環境構築をする必要があります。
-当サイトではWindows10パソコンを利用します。Windows10パソコン購入後の環境構築については、<wrap hi>[[z_blog:2018:181219_windows10_config|Windows10購入時の設定]]</wrap>に記載させていただきました。
-<code>
-Panasonic CF-RZ6
-Windows10 Pro (1803)
-VisualStudioCode
-Windows Subsystem for Linux (WSL)
-Ubuntu18.04
-VisualStudioCodeのターミナル画面をWSLのBashに設定
-git 2.17.1
-anyenv
-nodenv 1.1.2-69-gced0e70
-node 10.14.2
-</code>
-私の場合、以下のようにフォルダ共有しています。
-<code>
-Windowsの C:/Users/a/a/
-Ubuntuの  /mnt/c/Users/a/a/
-</code>
-また、Windows10のVisualStudioCodeでC:/Users/a/a/フォルダを開き、<wrap hi>[[http://i-doctor.sakura.ne.jp/web/doku.php?id=z_blog:2018:181219_windows10_config#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%85%B1%E6%9C%89%E3%81%AE%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A|こちらの設定]]</wrap>にて、VisualStudioCodeのターミナル画面をWSLのUbuntuのBash画面に設定しています。
-==== UbuntuのBashを利用するときの注意点 ====
-何かをnpm installなどした直後は、必ず、<wrap hi>exec $SHELL -l</wrap>を入力します。これをやらないと、インストール直後のBash画面では、ionic CLIなどを利用することができません。
-<code>
-exec $SHELL -l
-</code>
-===== Windows10でStencilアプリの開始 =====
-以下は、2019年2月時点のものとなります。Stencil One（Version1.0.0が2019/6/6に公開されました）でのStencilアプリ作成については[[stencil:01.StencilOneでアプリ作成|stencil:01.StencilOneでアプリ作成]]に記載させていただきました。
-https://github.com/ionic-team/stencil-app-starter
-に記載してあるように、やってみます。
-途中からは、https://qiita.com/xiaca/items/2a7d0a731ec6df6873b7を写経していきます。
-  *Windowsの C:/Users/a/a/stencil/ (Ubuntuの  /mnt/c/Users/a/a/stencil/)を、VisualStudioCodeで開き、Ctrl+@でターミナルを開く。
-  *以下のコードを入力
-<code>
-npm init stencil app
-</code>
-{{:stencil:pasted:20190202-170435.png}}
-{{:stencil:pasted:20190202-170454.png}}
-  *名前は、myAppとして、次に、yと入力。次に、以下を入力します。
-<code>
-cd myApp
-npm start
-</code>
-{{:stencil:pasted:20190202-170852.png}}
-{{:stencil:pasted:20190202-171012.png}}
-  *Ctrl+Cでサーバを停止します。
-{{:stencil:pasted:20190202-171416.png}}
-===== GitHubにpushする =====
-Netlifyで公開するために、リポジトリをGitHubへpushします。
-（BitBucketでもかまいません。BitBucketの方が、フリープランでSecretリポジトリを2つ以上作成することができます。）
-  *GitHubにログインして、新規リポジトリを作成(stencil-starterという名前にしました)
-{{:stencil:pasted:20190202-173706.png}}
-{{:stencil:pasted:20190202-173744.png}}
-  *上記のページに従い、VisualStudioCodeのターミナル画面に以下を入力
-<code>
-git init
-git add .
-git commit -m "first commit"
-git remote add origin https://github.com/adash333/stencil-starter.git
-git push -u origin master
-</code>
-{{:stencil:pasted:20190202-174109.png}}
-{{:stencil:pasted:20190202-174152.png}}
-  *GitHubへのログインメールアドレスとパスワードを聞かれるので、入力します
-{{:stencil:pasted:20190202-174500.png}}
-  *GitHubのリポジトリのページをリロードすると、ファイル群がpush(アップロード)されていることが確認できます。
-https://github.com/adash333/stencil-starter
-{{:stencil:pasted:20190202-174703.png}}
-===== Netlifyで公開する =====
-  *https://www.netlify.com/ へログイン
-  *New Site from Git をクリック
-{{:stencil:pasted:20190202-175021.png}}
-  *GitHub　をクリック
-{{:stencil:pasted:20190202-175052.png}}
-  *上記で作成したリポジトリ名（今回は、stencil-starter）をクリック
-{{:stencil:pasted:20190202-175150.png}}
-  *下図のように、"npm run build"と"www"と入力して、Deploy siteのボタンをクリック。
-{{:stencil:pasted:20190202-182449.png}}
-  *site deployはfailedになってしまった。。。
-{{:stencil:pasted:20190202-175512.png}}
-  *ログを見てみる。
-{{:stencil:pasted:20190202-175627.png}}
-  *ググってみると、@stencil/core 0.16.2のバグらしい。。。（爆）
-https://github.com/ionic-team/stencil-app-starter/issues/64
-{{:stencil:pasted:20190202-175842.png}}
-https://github.com/ionic-team/stencil/issues/1313
-{{:stencil:pasted:20190202-182308.png}}
-==== @stencil/coreのバージョンを0.16.1にする ====
-/2/3時点では、とりあえず、以下の方法でnpm run buildのエラーを回避しましたが、しばらくすれば、このバグは訂正されて、以下の方法は不要になると思われます。
-バグ回避のために、@stencil/coreのバージョンを0.16.2から0.16.1に変更する。
-  *ローカルのパソコン（VisualStudioCodeで編集）のpackage.jsonを以下のように変更
-（変更前）
-{{:stencil:pasted:20190202-180854.png}}
-（変更後）
-{{:stencil:pasted:20190202-180938.png}}
-  *以下のコードを入力
-<code>
-npm update
-git add .
-git commit -m "@stencil/core v0.16.2 to v0.16.1"
-git push -u origin master
-</code>
-{{:stencil:pasted:20190202-181637.png}}
-{{:stencil:pasted:20190202-181810.png}}
-毎回、メールアドレスとパスワードを入力するのが面倒、、、
-  *再度、Netlifyのページに行くと、自動的にbuildし直してくれていて、サイトも以下のようにちゃんと動いていました。
-{{:stencil:pasted:20190202-182114.png}}
-https://keen-thompson-af7ca5.netlify.com/
-{{:stencil:pasted:20190202-182140.png}}
-これで、StencilアプリをNetlifyで公開することができました。
-ソースコード
-https://github.com/adash333/stencil-starter
-(https://github.com/ionic-team/stencil-app-starter のコードほぼそのままですが。)
-==== stencil-app-starterの中身を見てみる ====
-今回デプロイしたファイル群の中身を見てみます。
-src/index.html
-{{:stencil:pasted:20190202-183154.png}}
-src/components.d.ts
-{{:stencil:pasted:20190202-183358.png}}
-なんかstencil特有のファイルのようです。ルーティングとか定義しているように見えます。
-src/components/app-root/app-root.tsx
-{{:stencil:pasted:20190202-183740.png}}
-こちらのファイルの方が、ルーティングの定義なのでしょうか？よくわかりません。
-tsxってなんかかっこつけている感じがします。Reactのjsxのtsバージョンのようです。
-typescript+XMLといって、typescriptとHTMLが混ざったようなファイルらしいです。
-src/components/app-home/app-home.tsx
-{{:stencil:pasted:20190202-183832.png}}
-ホームページのコンポーネントのようです。
-Angular(Ionic)と異なり、やはり、HTMLとTypescript(Javascript)のコードがごっちゃになっているファイルで記載していくようです。
-個人的には、AngularやVue.jsの、『HTML(template)とJavascriptとCSSを別の場所に記載する』というのが好きで、Reactの、『HTMLとJavascriptを混ぜて記載』は大嫌いなのですが、Stencilを触るためには、この、『ごちゃまぜ』に慣れるしかなさそうです。
-===== Stencilを用いたアプリ作成のリンク =====
-https://qiita.com/xiaca/items/2a7d0a731ec6df6873b7
-@xiaca
-年10月15日に更新
-Ionic4(stencil)で爆速でLighthouse100点のサイトを立ち上げる
-https://www.joshmorony.com/building-a-pwa-with-stencil-an-introduction-to-stencil/
-{{:stencil:pasted:20190202-185048.png}}
-→Stencilとはいったい何者なのか？また実際のコーディング方法など、丁寧に記載されています。
-こちらのサイトもいずれ写経してみたいです。
-https://www.javascripttuts.com/creating-a-todo-application-using-stencil/
-https://www.javascripttuts.com/coupling-a-stencil-todo-app-with-redux/
-https://qiita.com/wf9a5m75/items/b7cf3123cd5d7beaa3e0
-===== メニュー =====
-[[stencil:Reduxに関するリンク|stencil:Reduxに関するリンク]]
@@ 行 226: / 行 21: @@
-===== リンク =====
-目次：[[stencil:index.html|Stencil.js目次]]
-次：[[stencil:01.stencilでtodoアプリ|01.StencilでTodoアプリ]]