[１回目]RailsとTypescriptで地図アプリを作ってみる

はじめに

初心者エンジニアの日記です。
就活をしていく中で掲示板、記事を書いているかどうかを聞からたので初めて書いてみます（不純な動機ですみません...）。基本的に自分が開発していく中でのメモとして書いていきます。
フロントエンドはTypescript、バックエンドはRailsで開発していきます。
文章力・技術力ともに未熟なのでご了承をお願いします。

環境構築

React on Railsの環境構築をしていきます。こちらの動画を参考に構築していきます。
とてもわかりやすく初学者でもとっかかりやすいと思います。（主にRailsの動画がメインです）

 rails new cafe_app --webpack=typescript -T

現時点でrails sをすると初期railsページに行きます。

npm install react-router-dom axios styled-components react-icons react-toastify @types/react-router-dom react react-dom @types/styled-components

axios: 簡単にAPI通信ができます。
styled-components: スタイルをつけることができます、
react-toastify: かっこいいフラッシュメッセージを表示できます。
モデルは後々作っていきます。

コントローラー作成

どんなリクエストが来てもこのコントローラーにアクションするために作成。(site#index)

site_controller.rb

class SiteController < ApplicationController
  def index
  end
end

次にviewにsite/index.html.erbを作成します。

<div id="root"></div>

root.rbを書き換えていきます.これによりlocalhost:3000に飛ぶとmapにリダイレクトされることが確認できます。
またturbolinksの無効化を忘れずに行ってください.

ruby.rb

Rails.application.routes.draw do
  root to: redirect('/map')
  get 'map', to: 'site#index'
end

hello_react.tsをindex.tsxに変更します。application.erbに以下を記述します。

<%= javascript_pack_tag 'index' %>

トップページ作成

少しだけ見た目を変えます

packs
 ├─ component
 │  └─ map.tsx
 ├─ App.tsx
 ├─ tsconfig.json
 └─ index.tsx

書き換えていく中でエラーが出ました.tsconfig.jsonを加えました。

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "noImplicitAny": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

index.tsx,App.tsx,Map.tsxを変更します。

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    document.querySelector("#root")
  );
});

App.tsx

import React from "react";
import { Route, Switch } from "react-router-dom";
import Map from "./components/Map";
function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/map" component={Map} />
      </Switch>
    </div>
  );
}

export default App;

Map.tsx

import React from "react";

function Map() {
  return (
    <div>
      <p>Hello World!!</p>
    </div>
  );
}

export default Map;

これでエラーは出ずにHello worldが表示されました！

さいごに

今回でTypescript,Railsを繋げて開発できるようになりました。
最終的には現在地から近くのカフェを表示、ユーザーによるカフェ情報投稿機能などつけていくつもりです。