【React】機能の確認をしつつ、サンプル画面を作成する

長らく使っていない言語は、思いの他忘れがちですよね。 これから「React、Vue、Angular、Riot」等を学んでいく方も、久し振りに振り返りを行っていく方も、一緒にモダンjavascriptを学んでいきましょう。 これでモダンjavascriptはバッチリ解決！

今までデータベースはIRIS/Cacheがメインだったのですが、今回は諸事情がありPostgreSQLを採用する事になりました。 備忘を兼ねて、PostgreSQLに関してのアレコレを記事にしたいと思います。

前回でPostgreSQLの実行環境が整ったので、今回は下記を「簡単に」実践していきたいと思います。 ※PostgreSQLガッツリリ使うようになったら、各項目毎にもっと深掘りしていければと思います。

WebアプリケーションをReact、データベースをPostgreSQLを採用し、その両者をつなげる役割をDjango REST Frameworkにしたいと思います。 今回は、Djangoの環境構築までを行いたいと思います。

WebアプリケーションをReact、データベースをPostgreSQLを採用し、その両者をつなげる役割をDjango REST Frameworkに決定しました。 前回まではDjangoの環境設定を行ったので、今回はDjango REST Frameworkの環境設定を行っていきたいと思います。

Reactのアプリを作りながら、Reactについて理解を深めていくシリーズを始めます。 やはり、動かしながら覚えていくのが一番ですよね。 一通りReactの機能を試しつつ、Reactの知識を深めることを狙いたいと思います。

前回、Reactの環境構築を行ったので、今回はReactで抑えておく基礎知識(JSX編)を記載したいと思います。

コンポーネントは、ページを構成する部品となります。 部品なので使いまわせるように構成する事を視野に入れると、開発効率が上がります。 　→ 他言語のオブジェクト指向での構築に近いものがあるのではないでしょうか。 Reactは、このコンポーネントを複数組み合わせる事で、ページを構成していきます。

フックは、React16.8から導入された機能になります。 フックを知る事で、関数コンポーネントに様々な機能を追加する事ができます。 今回の記事は、普段よく使用するフックを、サンプルを使いつつご紹介したいと思います。

Reactで作成したアプリは、初回アクセスでページ全体を表示し、以降のページ遷移をjavascriptで行うのが主流となっています。 これをSPA(シングル・ページ・アプリケーション)と言います。 SPAでのページ切り替えで利用されるのが、React Routerとなります。

TypeScriptは、JavaScriptを拡張したプログラミング言語になります。 JavaScriptでは、型を意識したコーディングが難しい言語ですが、型の曖昧さは規模が大きくなればなるほど致命的になってきます。 TypeScriptは、JavaScriptを実行しつつJavaScriptの弱い箇所を補う言語になります。

画面を綺麗に構築するライブラリはいくつもありますが、MUIは中でも抜群に性能が良いと考えています。 今回は、無料利用が可能なMUI coreについてご紹介いたします。

導入環境によって、色々変更したい値があると思います。 「接続先のIP」「各種フラグ」「システム管理者情報」etc... これらをハードコーディングしてしまうと、管理するファイルが多数出てきてしまい、要らぬ不具合が混入する事になります。 これらを解決する一手として、環境変数(.env)を読込む方法です。 今回は、環境変数の読み込み方を解説いたします。

React基礎編の最後になります。 この記事では、組み込みコンポーネント等まだ解説していない項目について、サンプルを踏まえて解説していきたいと思います。 容量的に前回の下記「コンポーネント編」の記事に盛り込めなかった内容を、この記事で補っていこうと思います。

今回はcreate-react-appを使わず、webpackを直接設定しつつゼロからプロジェクトを作成していこうと思います。 webpackに各種プラグインを設定しつつ、機能を把握していきます。