クリーンアーキテクチャって難しいですね。DDDとの違いもまだ良くわかってませんが、 その構成や思想に触れ、ええやん!と思ったので何とかフロントでも採用できないかなぁと思い、 色々調べてまとめましたので、晒してみようと思います。 参考サイト ▼ 実装クリーンアーキテクチャ https://qiita.com/nrslib/items/a5f902c4defc83bd46b8 ▼ フロントエンドでClean Architectureを適用してみる(+サンプルコード) https://qiita.com/ttiger55/items/50d88e9dbf3039d7ab66 ▼ Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する https://blog.uhy.ooo/entry/2020-05-16/recoil-first-impression/ ファイル構成 SWR を使ってデータをfetchする場合は、こんなまどろっこしいことしなくても、 APIサーバーにClean Architectureを採用すれば問題ないと思いますが、 フロントが直接AWSやFirebaseなどからデータを読み書きするサーバーレスのような構成の場合は、 各ドメイン層は独立したinterfaceを持ち、疎結合になっていると便利かなと思いました。 また、Presentation層はReact Custom HookでUIに反映させてます。 呼び出すときに UseCase を引数に渡すことで、関係のない UseCase を実行しないようにしてます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 domain/ ├── driver │ └── userDriver.ts ├── entity │ └── user.ts ├── interface │ ├── driver │ │ └── UserDriver.

続きを読む

Next.js, Gatsby.js, Nuxt.jsなどのStatic Site Generatorを使ったLPや、JAMStack構成でビルドされたファイルをS3にアップロードしてCloudFrontでキャッシュすることで、サーバーダウンなどを気にしないでページを運用したいなどあると思います。ただの1枚ページのHTMLだけならいいのですが、サブディレクトリにもHTMLファイルがある場合、どうすればいいのか。 https://example.cycloud.io/subdir/ このようなURLにアクセスすると、CloudFrontから Access Denied 403 のレスポンスが返ってきます。 https://example.cycloud.io/subdir/index.html こうすればアクセスできるのですが、ちょっとかっこ悪いですよね。 Lambda@Edge を使うとこの問題を解決できるので、その方法を紹介します。詳しいセキュリティの説明や、S3のバケット作成手順、CloudFrontのディストリビューションの作成手順は割愛させていただきます。 手順 リージョンを us-east-1 にする Lambda関数の新規作成 コードソースを書き換えてDeployする 新しいバージョンを発行 CloudFrontのトリガーを追加して設定する サブディレクトリのURLにアクセスして表示確認する 参考 リージョンをus-east-1にする 2021年5月時点では、後述する トリガーの選択でCloudFrontを選択できるのがus-east-1リージョンのみ となっているため、リージョンは 米国東部 (バージニア北部)us-east-1 を選択してください。 Lambda@Edge 関数を作成 AWS Lambdaのページから 関数の作成 ボタンを押して、Lambda関数の新規作成を一から作成します。関数名を記入して、ランタイムを Node.js にします。今回は新規から作る紹介なので、デフォルトの実行ロールの変更 は AWSポリシーテンプレートから新しいロールを作成 を選びます。ロール名を任意で入力し、 ポリシーテンプレートは「cloudfront」と検索 して、 基本的なLambda@Edgeのアクセス権限(CloudFrontトリガーの場合) を選択します。内容を確認して 関数の作成ボタンを押します。 コードソースを書き換えてDeployする コードソース?ソースコード?どっちかわかりませんが、ここではコードソースと書いてあるのでコードソースと書きます。 index.js を選択して、下記の内容に書き換えます。次に、 新しいバージョンを発行 をクリックします。 index.js 1 2 3 4 5

続きを読む

Invariant failed: You should not use <Link> outside a <Router>というエラー <Link to={path}> を含んでいるコンポーネントをStorybookに追加すると以下のようなエラーが出ます。 Invariant failed: You should not use <Link> outside a <Router> Error: Invariant failed: You should not use <Link> outside a <Router> at invariant (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:133623:11) at http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:124464:86 at updateContextConsumer (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:115964:19) at beginWork$1 (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:116347:14) at HTMLUnknownElement.callCallback (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96456:14) at Object.invokeGuardedCallbackDev (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96505:16) at invokeGuardedCallback (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96560:31) at beginWork$$1 (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:121900:7) at performUnitOfWork (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:120815:12) at workLoopSync (http://localhost:9009/vendors~main.1df07f438181f そこで役に立つのが、 storybook-react-router というモジュールです。 StorybookのDecoratorに追加するだけで、上記のエラーが解消されます。 https://www.npmjs.com/package/storybook-react-router

続きを読む

.jsxと.stories.jsを同じディレクトリに置くと怒られる airbnbのeslintを使うと、React Componentは拡張子 .jsx を強制します。 Storybookを使う時、 .jsx と同じディレクトリに .stories.js 置きたい場合があると思いますが、 拡張子が .js なので、story内でReact Componentを使うと怒られます。 ESLint: JSX not allowed in files with extension '.js'(react/jsx-filename-extension) .eslintrc の rules にreact/jsx-filename-extension の設定を追加することで回避することができます。 .eslintrc 1 2 3 4 5 6 7 8 "rules": { "react/jsx-filename-extension": [ "error", { "extensions": [".jsx", ".stories.js"] } ] }

続きを読む

Nuxt.js v2.9.0のリリースノートにあるように、 v2.9.0 からTypeScriptが外部からのサポートになりました。以前からNuxtでTypeScriptを使うときは色々設定したり、 Lintまわりが複雑だったり、コーディングをはじめるまで時間がかかったものの、しばらくすると最新が変わってたり・・・。 今回は2019年11月時点で、Nuxt.js + TypeScriptと IntelliJ IDEA で使えるまでを紹介します。 Nuxtのプロジェクトを作る $ npx create-nuxt-app example よくこのコマンドを見ますが、最新の create-nuxt-app を使うためには、 yarn create nuxt-app を使ったほうががいいかもしれません。 $ yarn create nuxt-app example yarn create v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... info @google-cloud/functions-emulator@1.0.0-beta.5: The engine "node" is incompatible with this module. Expected version "~6". Got "10.13.0" info "@google-cloud/functions-emulator@1.0.0-beta.5" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] 🔗 Linking dependencies.

続きを読む

Hugoはオープンソースの静的サイトジェネレーターです。とても速く柔軟性があることから人気です。 今回はHugoの導入から使い方、Netlifyでリリースするまでの方法を紹介します。 Hugoのインストール 公式サイトのQuick Startそのままですが、 brew を使ってインストールします。 $ brew install hugo インストールされたかを確認するには、 $ brew version 新しくサイトを作る $ hugo new site website このコマンドを実行すると、 website というディレクトリができます。 テーマを選びます Hugo Themesにたくさんのテーマがあります。どれがいいか迷ってしまいますよね。 今回は blog のタグが付いてるなかから、このブログに使ってるTranquilpeak というテーマを使ってみます。 $ cd website $ git init $ cd themes/ $ git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git 他のテーマも導入する方法は一緒なので、他のテーマを使う場合はgithubのURLを変更してください。 themes ディレクトリの中に、 hugo-tranquilpeak-theme というフォルダができてると思います。 公式ドキュメントでは、themes/ananke とコマンドの最後にしてフォルダ名を指定する方法をとってます。 $ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke ルートディレクトリに config.toml というファイルがあると思います。 これが設定ファイルで色々設定していくんですが、submoduleで持ってきたテーマの中にテーマにそった config.toml があると思います。 hugo-tranquilpeak-theme の場合は、 exampleSite の中にあります。

続きを読む

WordPressからHugoに乗り換えました 2009年からWordPressではじめた当ブログですが、Hugoで作り直し、 サブドメインも creator.cotapon.org から blog.cotapon.org に変更しました。 Hugoにした理由 静的ページなので表示がめちゃ速い ホスティングサーバーをNetlifyの 無料 枠で使用 Markdownで投稿できる。Markdown好き! 管理画面なしで git push で投稿完了 テーマがそこそこある 前のWordPressでのブログは、なんしか表示が遅かった・・・。それだけでもSEO的には不利。 Hugoにして表示速度は圧倒的に速くなりました。 ただ、Hugoは静的ページなので、 ブログ検索(全文検索) と コメント 機能はありません。 全文検索 は Algolia や Bonsai + Elasticsearchを使うことで代用でき、 コメント 機能は、Disqusなどのウェブサービスを使うことで導入することができます。 テーマによっては、これらのウェブサービスのアカウントIDやAPI KEYを設定ファイルに書くだけでよいものもあります。 ブログの引越でやったこと サブドメインとはいえドメインを変えたのと、日本語URLにしている記事があったので書き換えました。 2009年から書いてるブログですが、130ぐらいしか記事がないので、1つ1つ中身を見てURLを変えて、 はてぶされてるページは301リダイレクトの設定をしていきました。 そこそこ大変でしたが、1日10個ずつ地道にやっていきましたw NetlifyでDNSの設定をして、blog.cotapon.org が見れるようにするのと同時に、ルートドメインの cotapon.org にリダイレクト設定だけをデプロイしました。 Amazon Route 53なんかを使うと、もっとスマートにできそうですね。勉強せな。 Adsense, Search Console, Analyticsの設定を諸々やってようやく完成。 ブログが速くなったのと、git push でデプロイでき、Markdownでちゃちゃっと書けるだけでもブログを書くモチベーションが上がってきましたw 記事を書くペースあげていきたいと思いますので、今後ともよろしくお願いいたします!

続きを読む

プロフィール画像

こたぽん

ビールと生ハムが好き

フロントエンドエンジニア

Tokyo