RealWorldその１（フロントエンド）Vue / Nuxt / React / Next

その１では、主にフロントエンドについての記事やリンクを集めたものです

以下のような方への情報です

• フロントエンドを詳細に調べてる暇、余裕はない
• 早く見えるもの（ブラウザ上で動くもの）を作らなければならない
• ちょっとした管理画面やこんな感じのものが欲しい、to BのようなデザインやUIUXに凝ったものは必要ない
• ★★★ がオススメ（ページの記載量が多いため、読み飛ばしたい方向け）
• Vueに関する情報が多いです（Reactを使うことが多くなっているため徐々に追記していく予定です）

よくあること

• サンプルアプリケーション、アプリケーションのサンプル、フレームワークのサンプル、フレームワークのチュートリアルを調べても本当に欲しいものは違う
• Django AdminやLaravel のようなフルスタックのフレームワークくらいに使えるものが欲しい
• 実際にどう適用する・使うんだ？、全体像が知りたい、雛形をコピーして必要な部分だけ変更したい ### 対象者は異なる
• 始めてさわるフレームワーク、何らかのフレームワークを使ったのか、使っていないのか
• プログラミングを始めてやる
• フロントエンドを始めてやる
  • Vanilla JavaScriptを知らない（用語の意味がわからない）
  • SSR（サーバーサイドレンダリング）しか知らない、SPAがわからない
  • SSR＋jQueryしか知らない
  • バックエンド、インフラ構築、bashやCfnくらいしか知らない

フレームワークのドキュメント

• フレームワーク提供側の考えの１つは、雛形・デモはあまり作りたくない、固定概念にとらわれてしまう、型にはめてしまう
• サンプル、使い方の提供にとどめておきたい

ひな形・デモ

• 日本ではあまり馴染みのない「RealWorld」という用語で、デモ相当をGitHubで公開されている
• デモなので、実際に１つのアプリケーションを再現している
• よくある、１画面だけのサンプルだけではない、ハンズオンのような実践に向かないものではない
• 画面間の繋がりがわかる、画面遷移がわかる、ログインやプロフィールがある

Githubに公開されているrealworld

• 「 https://github.com/gothinkster/realworld 」や 「 https://gothinkster.github.io/realworld/ 」を見ても、なんのこっちゃとなりかねないので「 https://codebase.show/projects/realworld 」を見ることをお勧めします
• gtihubでのタグ https://github.com/topics/realworld でも絞り込みできます
• ライセンス
  • MIT か Apache2 が多いと思うので、コードの改変や配布ができる

フロントエンド（frontend）

https://codebase.show/projects/realworld?category=frontend にて探す

• frontend + typescript で絞り込む
• javascriptでなくtypescriptを推奨、javascriptは最初は楽ですが、後からtypescriptを導入しようとすると非常に大変なおもいをすることになります）

Vue （Vue + TypeScript 、Nuxt.js + typescript　等）★

• https://github.com/devJang/nuxt-realworld
  • https://nuxt-realworld.vercel.app demoはvercelでホストされている
  • TypeScript/ nuxt /
  • tsconfig.json, nuxt.config.ts
  • examples (CRUD操作, auth認証, 画面のルーティング、ページング)

Vue（Vue3 + TypeScript ）

• https://github.com/mutoe/vue3-realworld-example-app
  • https://vue3-realworld-example-app-mutoe.vercel.app/#/ デモ
  • Cypressのテスト
  • tsconfig.json
  • ルーティング、ログイン、CRUD、プロフィール、設定 の画面あり
  • GitHubのAcntionsがある

Vue + JavaScript

• https://github.com/gothinkster/vue-realworld-example-app
  • https://vue-vuex-realworld.netlify.app/#/
  • こちらよりも、TypeScriptの Vue3 を使う方が良い
  • Vue 2.6.10

Vue + TypeScript

• https://github.com/AlexBrohshtut/vue-ts-realworld-app
  • https://vue-ts-realworld-app.netlify.app/

Vue admin template ★★★

• https://github.com/PanJiaChen/vue-admin-template
  • 管理画面のようなもの、サイドメニューあり、ダッシュボードもあり
  • https://github.com/PanJiaChen/vue-element-admin/
  • TypeScriptでなく JavaScript
  • デモ、https://panjiachen.github.io/vue-element-admin/#/login?redirect=%2Fdashboard
• https://github.com/Armour/vue-typescript-admin-template
  • 管理画面＋ダッシュボード
  • 上記のTypeScript版相当なので、これが良さそう

Nuxt Community

• https://github.com/nuxt-community
  • Nuxt用のモジュールがそろっている
  • axios,auth,module-template,タイル用のcss,i18n（多言語）,vuetify ,

Nuxt のプロジェクトをゼロからつくる (create-nuxt-app)

• https://github.com/nuxt/create-nuxt-app

何らかのECサイト（Vue storefront）

• https://github.com/vuestorefront/vue-storefront
  • Shopify 等に対応( https://github.com/vuestorefront/shopify )
• https://github.com/sdras/sample-vue-shop
  • Vue Vue Sample Shop

express

• https://github.com/nuxt-community/express-template
  • codesandboxが用意されているのは良い, https://codesandbox.io/s/github/nuxt-community/express-template ここで自由に変更して確かめられるので、手軽に試せる
  • express の使い所がわかっていないのですが、
  • Nuxt

Vue3の admin-temaplate

• admin template（管理者向けテンプレート、ダッシュボード等もあり）
  https://vuejsexamples.com/tag/admin-template/

• 5 Best Vue 3 Admin Templates In 2021

  • https://vuejsexamples.com/5-best-vue-3-admin-templates-in-2021/
  • MITライセンスではなく、有償＋MITライセンスという傾向がある

• 先に紹介した https://github.com/PanJiaChen/vue-element-admin/ のVue3 のものです

  • https://vuejsexamples.com/a-vue3-version-of-vue-element-admin/
  • codesandboxが用意されているのは良い, https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox

---

フロントエンド React

• Next https://github.com/reck1ess/next-realworld-example-app

---

時間に余裕、暇がある人向けの情報

フレームワークの前に、素のjsを学べ

• You SHOULD Learn Vanilla JavaScript Before JS Frameworks
  上記サイトを意訳しながら、順次紐解いていく

• not バニラの位置には様々なフレームワーク（およびライブラリ）がある

  I put all of the Angular, Vue, React, Next.js, Nuxt.js, 
  Knockout, Ext, jQuery, Meteor, Express, Koa, Total, Socket.io, 
  and so on, in the same box.
  

• React やvueの開発者ではなく、開発者である

  As I once read somewhere: 
  "You're not a React nor a Vue developer. You're a developer."
  

What is Vanilla JS?（バニラ JSとは）

• ジョークなんて言われてもいる
• バニラ JS = フレームワークを使わないjs
• https://www.youtube.com/watch?v=-OqZzV__hts
• http://vanilla-js.com/