Upgrade to Pro — share decks privately, control downloads, hide ads and more …

piyopiyo.ex #1 Phoenix install 〜Hello,world! (Windows)

3b33d1759639714546151db9c5cb29ad?s=47 ymn
November 08, 2021

piyopiyo.ex #1 Phoenix install 〜Hello,world! (Windows)

piyopiyo.ex #1 Phoenix環境構築〜Hello,world!のスライドです。

3b33d1759639714546151db9c5cb29ad?s=128

ymn

November 08, 2021
Tweet

Transcript

  1. Elixir インストール Windows

  2. Elixir をダウンロードします https://elixir-lang.org/install.html

  3. None
  4. インストーラーを実行 「Next」をクリック

  5. 「Next」をクリック

  6. 「Next」をクリック

  7. ダウンロードが完了するまでしばらくお待ちください

  8. 「Next」をクリック

  9. 「Next」をクリック

  10. 「Install」をクリック

  11. None
  12. チェックをし「Install」をクリック 

  13. 「Close」をクリック

  14. None
  15. None
  16. 「Close」をクリック

  17. 「Next」をクリック

  18. 「Next」をクリック

  19. 「Next」をクリック

  20. 「Install」をクリック

  21. 「Finish」をクリック

  22. VSCodeをダウンロード https://code.visualstudio.com/Download

  23. None
  24. 「同意する」、「次へ」をクリック

  25. 「次へ」をクリック

  26. 「次へ」をクリック

  27. 「次へ」をクリック

  28. None
  29. 「完了」をクリック

  30. VSCode起動後 「インストールして再起動」をクリック

  31. 再起動後日本語表記になります

  32. 「拡張機能」をクリック

  33. 「elixir」と入力

  34. 「ElixirLS Elixir…」→「インストール」をクリック

  35. 以上で、ElixirとVSCodeのインストールは完了です

  36. Phoenixインストール コンソールを開いてください。 mix archive.install hex phx_new 1.6.0

  37. Phoenixのプロジェクトを作ってみよう! mix phx.new sample --no-ecto etch and install dependencies? [Yn]と聞かれるのでY

  38. Phoenixを起動しよう! cd sample mix phx.server 起動後ブラウザで http://localhost:4000/ にアクセス

  39. 改造してみよう! sample/lib/sample_web/templates/page/index.html.heex 改造例 <h1><%= gettext "Welcome to %{name}!", name: "Phoenix"

    %></h1> ↓ <h1><%= gettext "Welcome to %{name}!", name: "PiyoPiyo" %></h1>