stencil:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
stencil:index.html [2019/02/03] – [Stencilを用いたアプリ作成のリンク] adash333 | stencil:index.html [2019/09/16] – [メニュー] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== Stencil.js ====== | ====== Stencil.js ====== | ||
+ | ---// | ||
+ | [[00.stencil: | ||
- | https:// | + | ===== Stencil 目次 ===== |
- | {{: | + | |
- | Stencilとは、Webコンポーネントを作成するためのツール(コンパイラ)だそうです。 | + | [[00.stencil: |
- | ? | + | [[00.stencil:01.stencilアプリのファイル構造|01.stencilアプリのファイル構造]] |
- | + | ||
- | 何を言っているのかさっぱり分かりませんね。私もよく分かりませんが、特定のフレームワークに依存せずに、フォームやナビゲーションバーなどの、『再利用可能なWebページ作成用の部品』を作成するためのツールみたいなもの、と、私は認識しています。 | + | |
- | + | ||
- | 将来性があるのかさっぱり分かりませんが、なんか面白そうなので、Stencilを用いた簡単なアプリを写経していきたいと思います。 | + | |
- | + | ||
- | 参考:https:// | + | |
- | + | ||
- | ===== 開発環境 ===== | + | |
- | 2019年1月現在、残念ながら、CodeSandboxでは簡単にStencilを利用することはできません。 | + | |
- | Angular、ReactやVue.jsと異なり、自分のパソコンで環境構築をする必要があります。 | + | |
- | 当サイトではWindows10パソコンを利用します。Windows10パソコン購入後の環境構築については、< | + | |
- | < | + | |
- | 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 | + | |
- | </ | + | |
- | 私の場合、以下のようにフォルダ共有しています。 | + | |
- | < | + | |
- | Windowsの C:/ | + | |
- | Ubuntuの | + | |
- | </ | + | |
- | また、Windows10のVisualStudioCodeでC:/ | + | |
- | + | ||
- | ==== UbuntuのBashを利用するときの注意点 ==== | + | |
- | + | ||
- | 何かをnpm installなどした直後は、必ず、< | + | |
- | < | + | |
- | exec $SHELL -l | + | |
- | </ | + | |
- | + | ||
- | ===== Windows10でStencilアプリの開始 ===== | + | |
- | + | ||
- | https:// | + | |
- | に記載してあるように、やってみます。 | + | |
- | + | ||
- | 途中からは、https://qiita.com/ | + | |
- | + | ||
- | *Windowsの C:/ | + | |
- | *以下のコードを入力 | + | |
- | < | + | |
- | npm init stencil app | + | |
- | </ | + | |
- | {{: | + | |
- | {{: | + | |
- | *名前は、myAppとして、次に、yと入力。次に、以下を入力します。 | + | |
- | < | + | |
- | cd myApp | + | |
- | npm start | + | |
- | </ | + | |
- | {{: | + | |
- | {{: | + | |
- | *Ctrl+Cでサーバを停止します。 | + | |
- | {{: | + | |
- | + | ||
- | ===== GitHubにpushする ===== | + | |
- | Netlifyで公開するために、リポジトリをGitHubへpushします。 | + | |
- | (BitBucketでもかまいません。BitBucketの方が、フリープランでSecretリポジトリを2つ以上作成することができます。) | + | |
- | *GitHubにログインして、新規リポジトリを作成(stencil-starterという名前にしました) | + | |
- | {{: | + | |
- | {{: | + | |
- | *上記のページに従い、VisualStudioCodeのターミナル画面に以下を入力 | + | |
- | < | + | |
- | git init | + | |
- | git add . | + | |
- | git commit -m "first commit" | + | |
- | git remote add origin https:// | + | |
- | git push -u origin master | + | |
- | </ | + | |
- | {{: | + | |
- | {{: | + | |
- | *GitHubへのログインメールアドレスとパスワードを聞かれるので、入力します | + | |
- | {{: | + | |
- | *GitHubのリポジトリのページをリロードすると、ファイル群がpush(アップロード)されていることが確認できます。 | + | |
- | https:// | + | |
- | {{: | + | |
- | + | ||
- | ===== Netlifyで公開する ===== | + | |
- | *https:// | + | |
- | *New Site from Git をクリック | + | |
- | {{: | + | |
- | *GitHub をクリック | + | |
- | {{: | + | |
- | *上記で作成したリポジトリ名(今回は、stencil-starter)をクリック | + | |
- | {{: | + | |
- | *下図のように、" | + | |
- | {{: | + | |
- | *site deployはfailedになってしまった。。。 | + | |
- | {{: | + | |
- | *ログを見てみる。 | + | |
- | {{: | + | |
- | *ググってみると、@stencil/ | + | |
- | https:// | + | |
- | {{: | + | |
- | https:// | + | |
- | {{: | + | |
- | + | ||
- | ==== @stencil/ | + | |
- | 2018/ | + | |
- | + | ||
- | バグ回避のために、@stencil/ | + | |
- | *ローカルのパソコン(VisualStudioCodeで編集)のpackage.jsonを以下のように変更 | + | |
- | (変更前) | + | |
- | {{: | + | |
- | (変更後) | + | |
- | {{: | + | |
- | *以下のコードを入力 | + | |
- | < | + | |
- | npm update | + | |
- | git add . | + | |
- | git commit -m " | + | |
- | git push -u origin master | + | |
- | </ | + | |
- | {{: | + | |
- | {{: | + | |
- | 毎回、メールアドレスとパスワードを入力するのが面倒、、、 | + | |
- | + | ||
- | *再度、Netlifyのページに行くと、自動的にbuildし直してくれていて、サイトも以下のようにちゃんと動いていました。 | + | |
- | {{: | + | |
- | + | ||
- | https:// | + | |
- | {{: | + | |
- | + | ||
- | これで、StencilアプリをNetlifyで公開することができました。 | + | |
- | + | ||
- | ソースコード | + | |
- | https:// | + | |
- | (https:// | + | |
- | + | ||
- | ==== stencil-app-starterの中身を見てみる ==== | + | |
- | 今回デプロイしたファイル群の中身を見てみます。 | + | |
- | + | ||
- | src/ | + | |
- | {{: | + | |
- | + | ||
- | src/ | + | |
- | {{: | + | |
- | なんかstencil特有のファイルのようです。ルーティングとか定義しているように見えます。 | + | |
- | + | ||
- | src/ | + | |
- | {{: | + | |
- | こちらのファイルの方が、ルーティングの定義なのでしょうか?よくわかりません。 | + | |
- | tsxってなんかかっこつけている感じがします。Reactのjsxのtsバージョンのようです。 | + | |
- | typescript+XMLといって、typescriptとHTMLが混ざったようなファイルらしいです。 | + | |
- | + | ||
- | src/ | + | |
- | {{: | + | |
- | ホームページのコンポーネントのようです。 | + | |
- | Angular(Ionic)と異なり、やはり、HTMLとTypescript(Javascript)のコードがごっちゃになっているファイルで記載していくようです。 | + | |
- | + | ||
- | 個人的には、AngularやVue.jsの、『HTML(template)とJavascriptとCSSを別の場所に記載する』というのが好きで、Reactの、『HTMLとJavascriptを混ぜて記載』は大嫌いなのですが、Stencilを触るためには、この、『ごちゃまぜ』に慣れるしかなさそうです。 | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | ===== Stencilを用いたアプリ作成のリンク ===== | + | |
- | + | ||
- | https:// | + | |
- | @xiaca | + | |
- | 2018年10月15日に更新 | + | |
- | Ionic4(stencil)で爆速でLighthouse100点のサイトを立ち上げる | + | |
- | + | ||
- | https:// | + | |
- | {{: | + | |
- | →Stencilとはいったい何者なのか?また実際のコーディング方法など、丁寧に記載されています。 | + | |
- | こちらのサイトもいずれ写経してみたいです。 | + | |
- | + | ||
- | https:// | + | |
- | + | ||
- | https:// | + | |
- | + | ||
- | + | ||
- | https:// | + | |
- | + | ||
- | ===== メニュー ===== | + | |
- | + | ||
- | [[stencil: | + | |
+ | [[stencil: | ||
行 214: | 行 20: | ||
===== リンク ===== | ===== リンク ===== | ||
+ | 目次:[[stencil: | ||
+ | 次:[[stencil: | ||
stencil/index.html.txt · 最終更新: 2019/09/16 by adash333