【フロントエンド】【Atomic Design入門】Todoアプリを作りながらAtomic Designを理解する | プロマリ | プログラミング教室 | リモートワーク | 港区

以下の記事はQiitaの@masa08さんが記述した「【Atomic Design入門】Todoアプリを作りながらAtomic Designを理解する」の紹介記事です。

はじめに

こんにちは、masa08です。普段はエンジニア限定シェアハウス「GAOGAO-TOKYO」で過ごしつつ、スタートアップで業務委託エンジニアをしつつ、大学生してます(早く卒業したい)。

今年は多くの新しい技術に触れた年でした。特にフロントエンドに関しては知見を得たことが多かったです。去年の今ごろはどうにかしてJavaScriptがかけるくらいの実力だったのですが、今年一年通じて、TypeScriptやReact、Atomic Designと様々な技術や考え方に出会い、実務を通じて自分の理解を深めることができました。
今回の記事ではアウトプットも兼ねて、Atomic Designに沿ったディレクトリ構成でReact×TypeScriptを用いてTodoアプリを作っていきたいと思います。自分自身わからないことも多いので、何かあればご指摘いただけると幸いです。

コンソールにサインインする。

コンソールにサインインするボタンからログインして下さい。
アカウントの作成方法はここでは割愛します。

対象者

• JavaScriptの基本的な知識を持っている
• Reactの基本的な知識を持っている
• Atomicデザインに触れたいと考えている
• TypeScriptに触れたいと考えている

この記事を通じて得られること

• Reactでアプリケーションを作る方法
• TypeScriptでコードを書く経験
• Atomic Designに関する知識

Atomic Designとは

画像引用元サイト: Atomic Design Methodology