はじめに 以下の設定を適応したプロジェクトセットアップを行います。 Next.js TypeScript Tailwind Storybook ESLint Prettier husky セットアップ済みのプロジェクトはこちらのリポジトリから「Use this template」をクリックすると以下の手順をベースとしたリポジトリを新規作成することが出来ます。 動作環境 node, yarn はインストール済みとします。
![Next.js + TypeScript + Tailwind + Storybook プロジェクトセットアップ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a8083322291a33d04a83a10263efb4ca2927e35/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--IeO7ir2s--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ANext.js%252520%25252B%252520TypeScript%252520%25252B%252520Tailwind%252520%25252B%252520Storybook%252520%2525E3%252583%252597%2525E3%252583%2525AD%2525E3%252582%2525B8%2525E3%252582%2525A7%2525E3%252582%2525AF%2525E3%252583%252588%2525E3%252582%2525BB%2525E3%252583%252583%2525E3%252583%252588%2525E3%252582%2525A2%2525E3%252583%252583%2525E3%252583%252597%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AKT%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzQ1Y2FjOTU2ODguanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャを紹介します この記事は弁護士ドットコム Advent Calendar 2020、2日目の記事です。2020年12月に執筆された記事です。 私は弁護士ドットコムライブラリーというサービスを開発しています。これは法律書籍をネットで読める弁護士向けのサブスクリプションサービスです。 フロントエンドの採用技術はNext.js + TypeScriptで、要件定義から設計、実装は私が担当し、現在も運用しています。 この記事では、2020年5月にリリースしてから半年間、Next.jsで上記サービスを運用した知見の中から、フロントエンドでのアーキテクチャについてご紹介します。 弁護士ドットコムライブラリーの特徴は以下の通りです。 画面数は10画面ほどの中規模アプリケーション(OOUIの考え方を取り入れたら画面数が減りました) 基本的にバック
TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker 目次 テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを使って見た目を含めてテストする。 ブラックボックステスト - 機能の実際の振る舞いをベースにテストする手法 ホワイトボックステスト - 機能のロジックや入出力をベースにテストする手法 これに加えて、フロントエンドのテストではブラウザ環境かNode環境かという違いも
この記事は TypeScript Advent Calendar 2018 の13日目です。 2019/07/31追記 (ずっと前に)Nuxtが公式にTypeScriptをサポートしました。以下の煩わしい設定は一切不要で、以下の簡単な手順でプロジェクトにTypeScriptを導入できるようになりました。 2018/12/15追記 次のバージョンでTypeScriptのビルドオプションが追加されるようです。 feat: TypeScript support via build option Nuxt × TypeScript はじめまして。Advent Calendar初参戦の @simochee (しもちぃ)と申します。 Nuxt、最近流行っていますね。 そんなNuxtをTypeScriptで使おうと公式コミュニティのテンプレートを見に行ったら、もう半年以上更新されておらず若干不安になりま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く