初心者による初心者のためのInternet Computerチュートリアル備忘録その１「Explore the default project」

プログラミング（C#）歴半年の私でりおてんちょが、Internet Computerチュートリアルを進めていく上で

分かりづらかったところ
めっちゃ調べたところ
などを、備忘録としてこちらにまとめていきます。

今回は、1つ目のチュートリアル「Explore the default project」についてです。

これからInternet Computerチュートリアルを始める方に、少しでも役立てていただけると幸いです。

また、この記事ではMacでの作業となりますこと、あらかじめご了承ください。

新しいプロジェクトを作成する

1. ターミナルシェルをまだ開いていない場合は、ローカルコンピューターで開きます。
まずはターミナルを開きます。

2. 別の作業フォルダーを使用している場合は、インターネットコンピュータープロジェクトに使用しているフォルダーに移動します。
クイックスタートで「ic-projects」というフォルダを作り、私はそこにまとめるようにしたので、『cd ic-projects』で移動します。

ちなみに『pwd』コマンドで、現在の場所が確認できますよ。（pwd：print working directoryの略）

3. 『dfx new explore_hello』のコマンドを実行して、新しいプロジェクトを作成します。
この呪文で∞マークっぽいのが表示されれば、プロジェクトの作成成功です。

4. 『ls -l explore_hello』のコマンドを実行して、デフォルトのディレクトリ構造を表示します。
『ls l』コマンドは、ファイルやディレクトリの詳細も同時に表示してくれる呪文みたいです。

デフォルト設定を確認する

1. ターミナルシェルをまだ開いていない場合は、ローカルコンピューターで開きます。
はい、開きました。

2. 『cd explore_hello』のコマンドを実行して、プロジェクトディレクトリに移動します。
『cd: no such file or directory: explore_hello』とエラーが出てしまった場合は、「explore_hello」ディレクトリの一つ上の階層にいるか位置を確認しましょう。

私の場合だと、rootの場所に「ic-projects」というフォルダを作ったので、ターミナルシェルを立ち上げたら最初に『cs ic-projects』を行う必要があります。

3. dfx.json構成ファイルをテキストエディターで開き、デフォルト設定を確認します。

Macの場合だと、右クリックして「このアプリケーションで開く」から選択肢が表示されます。

Xcode
Visual Studio (code)
テキストエディット
のどれかで開いて、チュートリアルの解説を見ながらふむふむと、15%ほど理解したと思ったら、そっと閉じましょう。

（進めていくうちに理解度が増していくのでご安心を）

デフォルトのプログラムコードを確認する

1. 『pwd』のコマンドを実行して、プロジェクトディレクトリにまだいることを確認します。
「explore_hello」にいればOK！
いなければ『cd』で移動します。

2. テキストエディタで「src/explore_hello/main.mo」のファイルを開き、テンプレートのコードを確認します。
チュートリアルの解説を見ながらふむふむと、15%ほど理解したと思ったら、そっと閉じましょう。

ローカルネットワークを開始します

最初の方のチュートリアルでは

ネットワーク用シェル
作業用シェル
の2つのターミナルを使うよう指示しています。

もちろんこれでも良いのですが、『dfx start』ではなく『dfx start --background』コマンドにすれば、1つのターミナルシェルで完結するので、僕はこっちを採用しています。

『dfx canister create --all』は、チュートリアルの通りに進めてみてください。

プログラムをビルドする

1. ローカルコンピュータのターミナルシェルで、explore_helloプロジェクトディレクトリに移動します。
起動したら
『cd ic-projects』
『cd explore_hello』
で移動ですね。

2. 『dfx build』のコマンドを実行して、実行可能キャニスターをビルドします。
指示の通りビルドしたら、自動で必要なものを作ってくれます。

ちなみに、「さっきからcanister（キャニスター）ってなんやねん」
という僕みたいな好奇心旺盛な方は、こちらを一読してみてください。

僕のやっているUnityでいうと、コンパイルされたアプリの固まりと同じようなものだそうです。

プロジェクトをローカルにデプロイする

2. 『dfx canister install --all』のコマンドを実行して、explore_helloプロジェクトをローカルネットワークに展開します。
インストールと書いていますが、これがデプロイです。

3. 『dfx canister call』コマンドを実行し、次のコマンドを実行して呼び出すプログラムと関数を指定します。
『dfx canister call』までは呼び出す呪文で、その後に

キャニスターまたはアプリケーションサービスの名
呼び出したい特定のメソッドまたは関数
関数に渡す引数
を打ち込んでいきます。

デフォルトのフロントエンドを表示する

『pwd』コマンドで確認できることもお忘れなく！

2. テキストエディタで「src/explore_hello_assets/src/index.js」ファイルを開き、テンプレートスクリプトのコードを確認します。
チュートリアルに従って確認します。

3. index.jsファイルを閉じて続行します。

4. 『ls -l .dfx/local/canisters/explore_hello_assets/』のコマンドを実行して、プロジェクト用に作成されたフロントエンドアセットを表示します。
『ls l』コマンドは、ファイルやディレクトリの詳細も同時に表示してくれる呪文でしたね。

5. ブラウザを開き、dfx.json構成ファイルで指定されているローカルネットワークアドレスとポート番号（127.0.0.1：8000 /）に移動します。
『echo "http://localhost:8000/?canisterId=$(dfx canister id explore_hello_assets)"』コマンドで、ターミナル上にWebサイトのURLを出せるみたいです。

出てきたら、それをブラウザのURL入力欄にコピー＆ペーストしましょう。

6. サンプルアプリケーションのHTMLページが表示されていることを確認します。

こんな感じのサイトが出てくれば成功です。

「Enter your name:」のところに名前を入れて「Click Me!」を押すと、「Hello, ○○」と表示されますよ。

ローカルネットワークを停止します

テストができたら、最後にローカルネットワークを止めておきましょう。

ターミナルが現在稼働中であれば「Control-C」を押して、「%」が表示される状態にします。

最後に『dfx stop』コマンドを入力すれば、1つ目のチュートリアルは終了です。お疲れ様でした。

思っていた以上に多くの反響をいただき、大変ありがたい次第です。よければHiÐΞやTwitterのフォローお願い致します！

需要がありそうであれば、他のチュートリアルも備忘録を残していきますので、何かしらアクションいただけると大変励みになりますし嬉しいです！

次はこちら（↓）をどうぞ
初心者による初心者のためのInternet Computerチュートリアル備忘録その２「Query using an actor」