Phenyl-Hands-On

これは初めて Phenyl を触る方向けのハンズオン用リポジトリです。

必要なもの

まずはこのリポジトリを git clone してください。

このリポジトリは yarn の Plug'n'Play で作っており、最初から必要な依存関係は全て入っています。

つまり yarn あるいは yarn install をする必要はありません。

VSCode でこのリポジトリを開きます。

ZipFS を入れてない場合は、このリポジトリにお勧めの拡張機能をインストールしますか？ とダイアログが出てくると思うのでインストールしてください。ダイアログが出てこない場合は ZipFS という拡張機能を手動で入れてください。

ZipFS はなくてもコードは動きますが、依存ファイルの中身のコードを見たい場合は必須です。

何でもよいので src/ 配下の.ts ファイルを開いてください。

ワークスペースのTypeScriptを使用することの許可を求められるので許可してください。（初回の一度だけです。）

.ts ファイルを開いた状態でコマンドパレットをctrl+shift+p（あるいはcmd+shift+p）で開き、Select TypeScript Version を実行して Use Workspace Version を選択してください。

pnpify された TS を VSCode にインテグレーションするための準備です。

ハンズオンを通してパッケージを yarn add する必要はありません。必要なものはすべて最初から入っています。
yarn 3 がこのリポジトリに入っています。あなたのグローバル環境の yarn のバージョンに関わらず、このリポジトリ内で yarn --version をすると v3.0.0 系のバージョンが表示されるはずです。

src/ 配下にほぼ完成した状態のコードがあります。ですが、このハンズオンではイチから自分でコードを書いていくことを推奨します。 yarn clear すると src/ 配下のファイルに書かれたコードを全て空にできます。

準備は以上で完了です。以下からハンズオンを開始できます。