作成日 2021/07/20 22:40

更新日 2021/09/19 15:39

フロントエンドにおいて基礎を捉えるために必要なものや役に立つものを書く。

Nuxt.js

Vue.jsのフレームワーク。ちなみに僕は数あるフロントエンドライブラリでReactが一強だと思っているが、基礎をおさえるという意味ではNuxt.jsをおすすめしたい。JavaScriptで頻出する項目が分かりやすくシンプルに記述することが出来る。

data, computed, methodsの３つを基本としてコードを書いていけばよいので直感的で理解しやすい。また、それぞれ学んだ知識はReactでも無駄にならず、JavaScriptを理解することが出来たので個人的には初級でVue,Nuxtをやることをおすすめしたい。

フロントエンドの基本は状態管理、ライフサイクル、DOM。これらをシンプルに書くことが出来るのがVue/Nuxt.js

Material UI

やや中級者向け。だがこれも学習すればするほど必要なライブラリである。 Material UIを導入することで起こるメリット

• ・レスポンシブ対応がかなり容易。自分で何か用意する必要がなくなる。
• ・既に完成されているGoogleのデザインシステムに沿ったコンポーネントを利用出来る
• ・ロジックに集中することが出来る

今までTailwind, ChakraUI, Bootstrap, SCSSと全て使ってきたがここまで整っているライブラリは感動すら覚える。カスタマイズ性が高く、新規構築が行われる頻繁に想定されるプロジェクトで入れたいランキング堂々の１位

しかし、CSSに不慣れであれば少し癖があるので要注意。スタイルをいわゆる上書き保存をしていくようなイメージ。

Atomic Design

Atom, Molecule, Organismsからなる(プロジェクトによっては増減する)コンポーネント設計。人類には早すぎたコンポーネント設計と言われているようだが、このコンポーネント設計のメリットとしてはコンポーネントとしての責務をきちんと明確に出来るところだと、最近になって気付かされた。

コンポーネント設計が無い場合、責務がごちゃごちゃとなってしまってどのファイルを見れば良いかわからなくなる。

Atomic Designを通すことで親子関係を明確化することが出来るのでAtomic Designは大変重宝する。しかし、責務をどのように管理するかは個人の力量になってくるのでやや扱いづらい側面が有るのも事実だと思う。言い換えると人によってコンポーネントの書き方が異なる。

フロントエンドライブラリを使用する度に、どれだけ基礎的な知識があるかで理解のしやすさがやはり違う。JavaScriptを理解しているならReactは使いやすいものだし、CSSを理解しているならSCSSやBootstrapはとても便利なもの。それをスキップしてやると挫折するのでやはり勉強には順番というものがあるんだなということを学んだ。

というか、僕自身基礎的な部分を放置して次に進むというのが気持ち悪くて出来ないのでペースは遅いかもしれないが一つ一つきちんと理解して技術力をつけていきたいなと思った。

何かおすすめのライブラリや、もっとこんなのがあるというのがあれば教えて下さい。