More than 1 year has passed since last update.

piyopiyo.exポータルチュートリアル０章～できるだけ楽して環境を準備する～

Last updated at 2023-03-29Posted at 2022-10-23

本記事はpiyopiyo.exポータルチュートリアルの０章となります。

本章の目的

本章では開発の準備として、統合開発環境(IDE)と実行可能なElixir+Phoenix実行環境を準備します。
また、失敗時のやりなおしや、途中経過の確認への備えとしてGitHubとの連携によるバージョン管理について学習します。

本チュートリアルでは、WebIDE環境 Replitを使用します。

WebIDEを使用することで、入門者が躓きがちなプログラムSDK、フレームワーク、多種のライブラリ導入など面倒な環境構築作業を可能な限り少ない時間で完了することができます。
全体として以下のようなメリットがあります。

本稿執筆時点では以下のElixir＋Phoenix実行環境を数ステップで構築可能です。

自身で構築した環境で演習したい方は上記バージョンでの動作が前提であることをご了承ください。

Replitでアカウントを作成し、最初の画面が表示されたら、左サイドのメニューより「+ Create」ボタンをクリックします。

検索フォームに elixir と入力し、表示されるTemplateからPhoenixを選択します。

Titleを入力し、「＋ Create Repl」ボタンをクリックします。

プロジェクトが作成され、IDE環境が表示されます。

この段階でデフォルトのPhoenixプロジェクトが作成されています。
上部のRunボタンをクリックすることでデフォルトで生成されているWebアプリケーションを起動することができます。

起動すると、ブラウザ内でWebviewが起動し、初期状態のPhoenixWebアプリケーションのトップページが表示されます。

失敗した場合のやり直しや、途中状態の記録の為、予めバージョン管理システムの導入、設定を行っておくことは重要です。
Replitでは標準で用意されたメニューから、開設済のGitHubアカウントとの連携を行うだけで、容易にバージョン管理を行うことができます。

左端のToolメニューから「Version control」を選択します。

「＋Create a Git repo」ボタンをクリックします。

ReplitでGitHub連携を行うのが初めての場合は、Connect to GitHubをクリックし表示されるダイアログに従いGitHubとReplitの連携を行います。

GitHubと連携済の場合、表示される「New repo」ボタンをクリックします。

表示されるダイアログの必要事項を入力し「＋ Create repository」ボタンをクリックしてGitHub上にリポジトリを作成します。

GitHubにアクセスすると、リポジトリが作成されたのが確認できます。

プロジェクト上のリソースに変更を検知した場合、「Version Control」メニューに
「Commit All & Push ->」ボタンが表示されます。

コメントを入力して、「Commit All & Push ->」ボタンを押すことで現在の状態を保存することができます。

保存した履歴がある場合、「Version Control」メニューに「Previous Commits」として過去の保存(Commit)履歴が表示されます。

コメントや保存日時から目的のCommit履歴を探し、「Revert to here」ボタンをクリックすることで、その時点の状態を読み込むことができます。