blog2019/06/13create-react-appを使ったReactアプリの作り方とNext.jsへの期待ReactプログラミングReactでアプリケーションを作る場合「create-react-app」を利用することで、簡単に環境を用意することができるのでオススメです。今回は「create-react-app」に関する説明と使い方、さらにこれから使ってみようと考えている「Next.js」についての情報を書きます。Reactを使ってSPAを作ってみたいという人にぜひ読んでほしいです。create-react-appを使って得た経験から、簡単にできること、逆に出来ないことを紹介します。その上でこれから時間を見つけてNext.jsを使ってみようと考えています。そのことへの期待も書いておきます。実際に使ってみた感想はまた今度書く予定です。create-react-apphttps://github.com/facebook/create-react-appReactを開発しているFacebookが公式に用意している、コマンドツールです。ReactやJSXを利用するためにはいくつかの依存するツールが必要なのですが、それらを1コマンドで用意してくれるものです。簡単なので勉強とかに利用するのであればオススメです。create-react-app以下のコマンドを実行することで、「my-app」という名前でディレクトリ構成が作成されます。my-appReactを動かすのに必要なものが一式揃っており、babelとかWebpackとかを自前で用意しなくても良いです。package.jsonの用意や運用管理はややこしくなりがちですので、任せることができるとスムーズに出来て良いです。開発時にローカルで動作を確認することも簡単に出来ます。必要な設定は自動で作成されます。start静的ファイルとしてのビルドも出来ます。こちらも必要最低限の設定は自動でされているので、すぐに試すことが出来ます。build/buildディレクトリに出力されたファイルをサーバにデプロイすれば公開です。Netlifyとかならホスティングサービス側でビルドすることもできるので、とても便利です。SPAを構築するなら十分とりあえずSPAを作る上で最低限のものは入っています。簡単なSPAやReactの勉強に使うのであれば十分な内容になってます。依存関係なんかも用意してくれるので、とても便利。避けたほうがいい場合バックエンドのフレームワークと合わせて利用したい場合はもっと柔軟なものを利用したほうがいいそうです。RailsやDjangoとかでサーバサイドを実装する場合ですね。SPAで作る必要がない場合も、特に利用する必要はなさそうです。SSRを実装したい場合はNext.jsなどの利用が推薦されています。create-react-appはあくまでも静的なJS・HTML・CSSを用意するだけになっており、そのことでバックエンドの心配をなくしました。ブログなどのコンテンツであれば、Gatsbyの利用を進められています。このブログもGatsbyで生成しています。動的に要素が変わるとかユーザーが投稿するとかであれば無理ですが、管理人が更新するだけのブログなのでGatsbyで大丈夫ということです。カスタマイズしたい場合は「Neutrino」を参考に上げています。これについてはよくわかってません。時間があったら使ってみます。SEOのことを考えるとSSRしたいSPAの弱点だと思うので仕方無いとも思いますが、できるならSSRを実装したいです。OGPやSEO関連の懸念が払拭できればとても便利なのですが。create-react-appではSSRについてのフォローはありません。公式Githubに書いてあるとおりNext.jsなどのフレームワークを利用するのがオススメらしいので、ちょっと調べてみました。Next.jshttps://nextjs.org/Next.jsとはReactを使ったフレームワークです。純粋なReactだけでは実装が難しかったことについて、いくつか簡単に実装できるようになります。上記にも書きましたがSSRを実装したいという場合に、Next.jsの使用を推奨されています。SSRに対してどのくらい便利なのかという期待をもっています。ちなみにVue.jsのフレームワークはNuxt.jsです。名前が似ているのはNext.jsを参考に作られたからだそうです。ややこしいのでやめてほしいですが仕方ないですね。できることNext.jsを使うことで以下のことが簡単にできるそうです。ファイルのディレクトリ構造によるルーティングルーティングのルールをディレクトリ構造で指定できるということです。ややこしいですが、pagesディレクトリ以下に設置したファイル構造がそのままURLの定義として反映されるみたいなことです。宣言したimport文が解釈され、必要なページに配信されるようになるようです。不要なimportとかが解決されるので便利だとは思います。RenderingSSRも簡単に実装できるようです。サーバ側でnode.jsを動かす必要があがます。なるとNetlifyやFirebaseでは実現できなさそうです。Exporting静的なコンテンツとしてエクスポート出来ます。これを使ってエクスポートしたページを設置すれば、SSRを実現できるという考え方がある?様子です。それはSSRなのか?とは思いましたが、SEOとかOGPとかは確かに意図したものにできそうなので、良しとしましょう。考えればGatsbyはこれに該当するものですね。SSRについてというわけで、Next.jsでSSRを実装する場合、サーバ側にNode.jsを立ち上げて動かす・または静的なHTMLとしてサイトをエクスポートして設置するの2パターンあるようです。FirebaseやNetlifyではサーバ上でnode.jsを動かしてリクエストに答えるのは難しいので、後者の手段になります。サーバーレスをイメージしたサービスかと思いますので、SSRを実現しようとすることはそもそも矛盾しているのかもしれません。静的コンテンツをCDNで配信するくらいで実現できる要件に抑えることのが大切に思います。Node.js動かすサーバがあるなら、最初からrailsとかLaravelとかでサイトを実装しそうですがどうなんでしょうか。SPAとかサーバレスな環境では、SEOなどの問題は大きく残っている印象です。サーバが必要!というような流れになる気がします。それなら最初からサーバサイドをPHPやRubyで作るところから始めるよな。思い切ってSSRを諦めるという決断が必要なのかもしれません。おわりにcreate-react-appはとても簡単で便利です。SPAなこともありOGPやSEO関連の要素については実装が難しいです。それが許容できる簡単なWebサービスを作る、サーバレスなアプケーションを作るということであれば十分です。SSRを実装しようとした場合はNext.jsなどを利用する必要があります。結局rubyやphpをサーバに入れてバックエンドを作った方がいいような気もします。いう場合に選択されるのかイマイチわからないままです。静的要素としてExportするなどSSRの実装方法はいくつか方法がありました。静的なコンテンツとしてSSRを実現することができるので、その点で差異はあるとも思います。何より全部jsで作るというのが嬉しいことなのかもしれません。動的なサイトか静的なサイトかの要件が変わってしまった場合でも柔軟に対応できる、と公式にも書いてありました。そんなことあるのか?と思いますけど。editerマークダウン特化エディタアプリマークダウンのプレビュー・よく使う記号を入力するボタンが利用できます。野々市市コミュニティバスのっティ時刻表アプリルートとバス停を選択して時刻表が確認できます石川県野々市市に住むフリーランスエンジニア。応用情報とDBスペシャリストの資格を保有。Webシステムの構築、スマホアプリ、プログラミングメンターなどの依頼に対応できます。