未分類

React2

投稿日:

簡単なtodoアプリでコンポネーネント間でデータの受け渡しをしました。reactはコンポネーネントという部品を連結させてwebページに動的な動きをつけます。複数のコンポーネントで構成するのですが、この複数のコンポーネントは親子関係をそれぞれのコンポーネントで持ちます。まず最初に一番親であるコンポーネントを作成して、そのコンポーネントで返す仮想DOMツリーの要素の中に子コンポーネントを呼び出します。その際に子コンポーネントを呼び出す記述のところに渡したいデータを記述することで子コンポーネント内のpropsで受け取ることができます。一つのコンポーネントで全部を記述することもできるのですが複数のコンポーネントを作成してそれを組み合わせることが一般的です。ではなぜそのような方式が取られるのでしょうか。

複数のコンポーネントに分ける理由

機能ごとで分けた方が修正する時に楽

一つのコンポーネントでプログラムを書いてしまうとエラーがおきた場合にどの時点でエラーが起きているのか探すのが大変です。これは時間的コストも認知的コストもかかって効率がとても悪くなってしまうのです。機能ごとでコードを分けた場合にはその機能ごとでメンテナンスをすることができるので対象を絞ることができ、修正するスピードが速いのです。

コードが見やすい

一つのコンポーネントだと単純にコードが長くなってしまうので効率が悪いのです。

パッケージ管理

上のと関係ないのですがパッケージのことも学んだのでまとめます。reactではパッケージ管理ソフトからファイルをダウンロードしてアプリケーションを作成します。そもそもパッケージとはどのアプリケーションでも共通で使うプログラムをいちいち記述する必要が内容にファイルにまとめてそのファイルを読み込無ことで簡単に処理を実装することが可能になります。そのパッケージを管理するソフトウェアにnpmを使っていまして、そのパッケージ管理ソフトをダウンロードすることによって使えるようになるコマンドを実行することでそのソフトで管理しているパッケージのプログラムをダウンロードして使うことができるのです。importの記述で読み込無ことでその読み込んだパッケージ内で定義されているメソッドを読み込んだファイル内で使うことができるようになり、効率的にプログラムを書くことができます。

まとめ

今のところこの程度の理解なのですがやっていくうちにどんどん理解していきたいと思います。とりあえず今やっているtodoリストを1から作り直してみて、次はカレンダーのアプリを作っていきたいと思います。

-未分類

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

カレンダーアプリ改

全く理解できなかったreduxがほんの少しわかってきたのでカレンダーアプリに戻りました。当初の予定では1月中にはカレンダーアプリを作成し終わる予定だったのですが、カレンダーアプリを舐めていたこともあり …

no image

css設計

今日もデザイン部分のcssの記述を主に行っていました。昨日よりも早く描けるようになっている気がするのですがまだまだ時間がかかってしまいます。実装が終わった後はプルリクエストを出して先輩の方にコードをみ …

no image

結実

ついに内定をいただきました、、長かったです。でもこれで終わりではなく、ここからが始まりです。今日は内定後のあれこれの話をしたのですが、正直会社で活躍できるか不安になりました。人数が少ない会社で、自分に …

no image

働くとはpart3

 今日いいことがありました。タイピングゲームの寿司打の高級ランクをノーミスでクリアすることができました。結構すごいと思います。一秒間に打つ文字数も4.6と最高記録を叩き出しました。これはもう誰か褒めて …

no image

読字力

 今日から「デジタルで読む本✖️紙の本で読む本」を読み始めました。どんな内容かというと、デジタル化が進む中で読解力はこの先変化があるか?という内容です。デジタル化が進み、情 …