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](https://snipcart.com/blog/learn-vanilla-javascript-before-using-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/