ElixirでリアルタイムWeb（SPA）開発に入門する
【このページは、3分で読めて、1～2時間くらいでお試しいただけます】
ElixirでWeb開発を行うには、クラシックなSSR（Server Side Rendering）か、リアルタイムWeb（SPA）開発をElixirで叶える「LiveView」があり、ここではLiveView開発を解説します
LiveViewは、JavaScript無しで、ReactやVue.jsのようなフロント開発が可能です
※本解説ページは、開発環境や、Elixirのインストールは不要です
①ElixirでリアルタイムWebフロントが作れる「LiveView」の概要
|
【この動画は、10分で見れます】 ElixirでリアルタイムWebフロントが書けるフレームワーク「LiveView」の概要です 動画中のスライドは、下記でもご覧になれます https://speakerdeck.com/nako_sleep_9h/liveviewtopiyopiyo-dot-exnosusume |
②Web上でElixir開発ができる「Replit」上でLiveViewアプリを開発
|
【この動画は、53分で見れて、1～2時間程度でお試しいただけます】 Web上でElixir開発ができる「Replit」上でLiveViewアプリを開発します まず、DB操作を行うページ群をコマンドで生成し、それを改造します その後、CSSフレームワークである「Tailwind」を導入し、ページを簡単にデザインします それから、LiveViewでのページ遷移を実装します 本動画の元となっているコラムは下記になります（0～5章のシリーズです） https://qiita.com/tuchiro/items/19c69865d6206135bb71 |
③ローカル環境上でLiveView環境を構築（その後は上記②がローカルで可能となる）
【この手順は、30分程度でお試しいただけます】
ローカル環境にPhoenixとPostgreSQLをインストールすれば、上記LiveView開発をローカル環境で行えるようになります
各OSのターミナルや端末（Terminal）で以下コマンドを実行してください
mix archive.install hex phx_new
mix phx.new basic_nodb --no-ecto
cd basic_nodb
iex -S mix phx.serverブラウザで「localhost:4000」を開くと、下記画面が表示されたら成功です
あとは、PostgreSQLをインストールすれば、上記②のDB利用アプリをローカル環境でも開発できるようになります
PostgreSQLのインストールは、各OSごとの手順がありますので、お使いのOSに合わせて実行してください
なお、postgresユーザのパスワードは「postgres」で設定してください
- Windows／Mac：こちらのリンクをクリックし、各OSボタンを押下後、「Download the installer」からインストーラをダウンロードして実行します
-
Ubuntu：端末（Terminal）で下記コマンドを実行します
sudo apt update -y sudo apt install postgresql -y sudo service postgresql start sudo su - postgres -c psql postgres=# alter role postgres with password 'postgres'; postgres=# \q
PhoenixプロジェクトとDBは、下記で作成し、ブラウザで「localhost:4000」を確認してください
mix phx.new basic
cd basic
mix ecto.create
iex -S mix phx.server