[Elm] ナビゲーションしてみる

概要

elmでのナビゲーションを説明していきます。

elm/urlをインストールしてください。

elm install elm/url

main

ナビゲーションをするためにはBrowser.applicationを使う必要があります。

 main =
      Browser.application
          { init = init
          , update = update
          , view = view
          , subscriptions = subscriptions
          , onUrlChange = UrlChanged
          , onUrlRequest = LinkClicked
          }

onUrlRequest : UrlRequest -> msgはページ遷移する前に呼ばれる関数です。
ここで任意の処理を挟み、Browser.Navigaitonモジュールで画面遷移を行います。
また、UrlRequestという型は

type UrlRequest
    = Internal Url
    | External String

となっており、/profileなどの内部のリンクにはpushUrl、https://google.comなどの外部リンクにはloadで遷移させてあげます。

onUrlChange : Url -> msgは繊維した直後に呼ばれます。
ここで、変わったURLでHTTPリクエストするなどの処理を行います。

全体的なコード

以下、全体的なコードを貼っておきます。

  1 module Main exposing (main)
  2
  3 import Browser
  4 import Browser.Navigation as Nav
  5 import Html exposing (..)
  6 import Html.Attributes exposing (..)
  7 import Url
  8
  9
 10
 11 -- main
 12
 13
 14 main : Program () Model Msg
 15 main =
 16     Browser.application
 17         { init = init
 18         , update = update
 19         , view = view
 20         , subscriptions = subscriptions
 21         , onUrlChange = UrlChanged
 22         , onUrlRequest = LinkClicked
 23         }
 24
 25
 26
 27 -- model
 28
 29
 30 type alias Model =
 31     { key : Nav.Key
 32     , url : Url.Url
 33     }
 34
 35
 36 init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
 37 init flags url key =
 38     ( Model key url, Cmd.none )
 39
 40
 41
 42 -- update
 43
 44
 45 type Msg
 46     = UrlChanged Url.Url
 47     | LinkClicked Browser.UrlRequest
 48
 49
 50 update : Msg -> Model -> ( Model, Cmd Msg )
 51 update msg model =
 52     case msg of
 53         LinkClicked urlRequest ->
 54             case urlRequest of
 55                 Browser.Internal url ->
 56                     ( model, Nav.pushUrl model.key (Url.toString url) )
 57
 58                 Browser.External href ->
 59                     ( model, Nav.load href )
 60
 61         UrlChanged url ->
 62             ( { model | url = url }
 63             , Cmd.none
 64             )
 65
 66
 67
 68 -- subscriptions
 69
 70
 71 subscriptions : Model -> Sub Msg
 72 subscriptions _ =
 73     Sub.none
 74
 75
 76
 77 -- view
 78
 79
 80 view : Model -> Browser.Document Msg
 81 view model =
 82     { title = "url"
 83     , body =
 84         [ text "the current url is : "
 85         , b [] [ text (Url.toString model.url) ]
 86         , ul []
 87             [ li [] [ a [ href "/profile" ] [ text "/profile" ] ]
 88             , li [] [ a [ href "/fugafuga" ] [ text "/fugafuga" ] ]
 89             , li [] [ a [ href "/hogehoge" ] [ text "/hogehoge" ] ]
 90             ]
 91         ]
 92     }

まとめ

elmでの基本的なナビゲーションを学びました。
早く理解できるようになりたいです。