未分類

React2

投稿日:

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

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

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

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

コードが見やすい

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

パッケージ管理

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

まとめ

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

-未分類

執筆者:


comment

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

関連記事

no image

人はなぜ戦争をするのか

 今日は「人はなぜ戦争をするのか」を読みました。この本は物理学者のアインシュタインが今やりとりしたい人は誰でどんなことを聞きたいかというイベントでアインシュタインが心理学者のフロイトに人はなぜ戦争をす …

no image

ページランク

インターネットにより世界中のユーザーがウェブページを閲覧できるようになり少しでも疑問に思ったことをネットでキーワードを打てば見たいものがすぐに出てきます。ウェブページの量は膨大なのですが一体どのように …

no image

php

 今日からPHPの学習をはじめました。PHPはwebアプリケーションを作るのに必要なプログラミング言語でrubyと同じくらい使われています。基本的にはjavaと同じように使うことができるみたいで、新し …

no image

プログラミングについて

プログラミングの本を読みました。今回は実際の処理の裏側で動いている処理を学びました。コンピュータは0と1しか認識できません。人間がプログラムで書く文章を0と1に変換する機能をアセンブラやコンパイラが担 …

no image

リスクマネジメント

リスク スコープ、スケジュール、コスト、品質などプロジェクトの目標に影響を与える深実な事象のことです。現在起こっているものは問題であり、未来に起こるかもしれない問題のことを指します。既知のリスクと未知 …