GSAP day1

TypeScrriptを動くようにする

node.jsの確認とバージョン管理について調べる

さらっと調べたら、Volta（https://github.com/volta-cli/volta）が良さげなので、インストールする。選定した理由は、1番新しそうだから（笑）
あと、Win・Mac・Linuxで使用できるから。←これ重要

1. Voltaのインストール

2. node.jsのインストール(v16.15.0)

TypeScriptのインストール

の前に、sudoで毎回ちょこちょこパス入れるの面倒なので、指紋認証に切り替える。pam.d/sudoを編集して完了

1. npmでサクッとインストール（4.6.4）

様式美に従って、hello worldを表示。成功しました。

開発環境の構築

後々、覚えることになるから開発環境もここで作ってしまおう。ということでWebpackの導入。これで、TypeScriptの自動コンパイル、ソースコードの結合、自動リロードまでできるようになるみたい。なんか今どきな感じでワクワクする。

1. プロジェクトフォルダを作成

2. 初期化　npm init --y デフォルトで初期化

3. packege.jsonが出来上がる

4. ts-loaderのインストール の前に、PJフォルダにTypeScriptのインストールがいるんだね。npmでサクッとインストール。前後逆になったけど、まあいいか

5. webpackのインストール（モジュールバンドラーっていうものらしい）

やっぱやめた。Viteにする。理由：早いらしい。あと新しい笑
とりあえず、入れたもの消す。フォルダとファイルの削除でいいのかな？まあ気にせず削除。

1. Viteのインストール インタラクティブモードで

2. フレームワーク VueかReactかで悩む。初心者なのでVueにしよ

3. vueとvue-tsってなんぞ？vue+TypeScriptってことね。迷わず-tsを選択

4. cdして、npm installして、npm run devして、3000にアクセス

5. おー、表示した！（感動）

またまた様式美に従って、hello world

とりあえず、src/componentsフォルダのHelloWordをコピーして、中身を変更。App.vueでimportするファイルを変更。
おー、保存したと同時にブラウザが更新された！面白い。
これで、最低限の開発環境は整ったのかな。ルーティングだのなんだのが気になるけど、後回しにする。

GSAPを使えるようにする

npm i gsapでインストール。さっき作ったhello worldをフェードインさせながら上からスライドインさせる。
vue3の書き方でちょっと手間取ったけど、なんとか完成

なぜか動かなくなった！！

ちょっと他のことして、続きやろうと思ってnpm run devしたら動かなくなった泣　なんで・・・。
原因わかった。TypeScriptの型宣言がおかしかった。というか、buildしたときにエラーになったから、引数の型宣言して、buildは通ったけど、型宣言のやり方間違ってた。恥ずかし。。。

型宣言をちゃんとした形にしたら動いた。
今日はここまで。