未分類

React2

投稿日:

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

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

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

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

コードが見やすい

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

パッケージ管理

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

まとめ

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

-未分類

執筆者:


comment

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

関連記事

no image

あけましておめでとうございます。

2021年が始まり、朝からおせち料理を食べて大変満足でした。今はダイアナクラールというジャズピアニスト兼ボーカリストの新しいアルバムを聴きながらブログを書いているのですが、とても聴きやすく、この前聴い …

no image

クリスマス

今日は配達でお客さんがサンタの格好をして出てきました。表情も明るく、なんの恥ずかしげもない様子だったのでこっちも、サンタさんを相手に接客をしている、ということを意識していました。気づけばクリスマスもい …

no image

復習

ロジカルシンキング 自分の意見を相手に納得させるには論理的な文章の構成が必要になります。この論理がうまく構成できていない場合には相手の思うような反応を得ることはっできません。具体的には論理が飛躍したり …

no image

明日はphpやります

 メルカリで購入したphpの参考書が届いたので少しやりました。明日バイトも何もないので進めたいと思います。さて今日はあさに統計の本を読み終わったのでそれについて書くのと、バイト前に読んだプログラミング …

no image

1日バイト2

 今日は久しぶりに納得のいくタイピングができていい感じでバイトの行きにもミツメのアルバムを聴きながらいい気持ちでいたのですが、1日バイトは流石にきついです。今日の配達中は新しいことに挑戦していて、ヒラ …