本チュートリアルの目的
本チュートリアルはElixirにより実装されたWebアプリケーションサーバーPhoenixにおける、サーバーサイドレンダリング技術であるLiveViewを用いてWebアプリケーションの実装、および関連技術を学ぶ事を目的とします。
このチュートリアルではElixir/Phoenixの入門者向けコミュニティーpiyopiyo.exの中で作成された感想投稿サイトpiyopiyo.exポータルを題材に、基本的なLivewViewの実装の流れを体験し、開発の全体像をつかんでいただくことを目的としております。
当時の経緯の振り返りについては主催者の @nako_sleep_9h さんのまとめ記事 piyopiyo.exで作ったLiveView感想投稿サイトの話 をご覧ください。
本チュートリアル実施の前提
本チュートリアルでは、コピー＆ペーストで実行可能なコマンド、コード断片、リソースを用意してあります。
本チュートリアルどおりの操作を実施いただくことで、ElixirやWebアプリケーション開発に関する知識のない方でも開発の流れを体験いただけることを目標としております。
- 基本的なブラウザ操作ができること
- Replit、GitHubなど一般的なWebサービスのアカウント開設ができること
チュートリアルメニュー
| タイトル | 所要時間 | できるようになること |
|---|---|---|
| ０章～できるだけ楽して環境を準備する～ | 約5~10分 | WebIDE環境Replitを使ったLivewView開発環境の準備と簡単な使い方がわかる |
| １章～コマンド一発でWebアプリケーションを作ってみる～ | 約5分 | Phoenixの基本機能をつかってデザインの入っていないWebアプリケーションを作成できる。Phoenixのモデル実装を修正して機能を変更できる |
| ２章～ライブラリを使って簡単にtailwindcssを導入する～ | 約5分 | 用意されたElixirのライブラリを使用してCSSフレームワーク、UIライブラリを導入できる |
| ３章～トップページをイイカンジにする～ | 約4分 | tailwindcssを使ってデザインを変更できる、Phoenixのルーティンを変更できる |
| ４章～トップページから画面遷移する機能を追加する～ | 約4分 | liveviewのイベントハンドラーを修正して画面間の遷移を修正できる |
| ５章～faviconとページタイトルを設定する～ | 約4分 | Phoenixで作成されたサイトのfaviconとページタイトルを変更できる |
関連情報
- 本チュートリアルのGitHubリポジトリ
- 元となったpiyopiyo.exポータルのGitHubリポジトリ