RailsでToDoアプリを作るためのチュートリアルです。前編・後編を終えるとこのようなToDoアプリが完成する予定です。本記事はチュートリアルの【後編】です。試してみたいという人は先に【前編】を読んでください。ソースコード以下に公開しています。バックエンド側は前編で実装済みです。今回はフロントエンド側を実装します。最新版のNode.jsをインストールした状態からスタートします。いう名前のプロジェクトを作成します。以下のようにコマンドを実行し、選択していきます。App実行し終わったら早速起動してみましょう。アクセスすると初期画面が表示されます。今回、GraphQLのクライアントとしてapollo-moduleを使用します。以下コマンドでインストールできます。インストールされるvuetify-moduleのバージョンがかなり古いものであったため更新しておきます。@nuxtjs/vuetify@v1.3.3nuxt.config.jsを追記nuxt.config.jsを追記します。追記内容としては「apollo-moduleの設定」と「ホスト名の設定(ポート番号)」の2点です。ホスト名は前編の最後に行ったCORS設定に合わせています。QueryとMutationをファイルに記述していきます。layouts/default.vueを編集して、ヘッダー・フッターのデザインを整えます。}}</script>次にpages/index.vueを編集します。}}</script>ソースコードの内容を大まかに解説します。コードが少し長いですが複雑な処理はしていないので、コードと照らし合わせて理解してみてください。以上で実装は完了なので、動かしてみましょう!まず、バックエンド側を起動します。s次に別のTerminalでフロントエンド側を起動します。devhttp://localhost:8080へアクセスするとToDoアプリが表示されます。Rails、フロントエンド側にNuxt.jsを用いて、GraphQLによるデータの同期を実現することでToDoアプリを作成しました。これまでフロントエンドに詳しくない人でも、ToDoアプリを作ったことである程度仕組みを理解し、自信を得られたかと思います。バリデーションを追加したり、ドラッグ・アンド・ドロップで並び替えられるようにしたり、ユーザのログイン/ログアウト機能を付けたりとまだまだ実装の余地はありますのでぜひチャレンジしてみてください。Webエンジニアです。mockmockの開発・運用を担当しており、組込みエンジニア時代の経験を活かしてデバイスをプログラミングしたり、簡易的なIoTシステムを作ったりしています。主な開発言語はRuby、時々Go。Hiring!Fusicでは一緒に働く仲間を募集しています。詳しくは以下のページをご参照ください。Viewer」がとても便利(2020/02/07)【PHPerKaigi2020】PHPerトークンを探せ!(Fusic)(2020/02/05)Fusicプログラミングコンテストを開催しました!(2020/02/03)。