すべてのカテゴリ

Reactの「部品」React も Vue と同様によく使う表示のパターンを部品化して再利用する事ができます。この記事では React の部品の使い方を紹介します。基本は「部品」！部品化と言っても特別な事はありません。 これまで、紹介してきた記述は基本的に全て「部品」です。 今までの記述は、React のトップレベルの「部品」であるの「App.tsx」から呼び出しています。今回は、意図的に一つの部品を作成して、React の上位（親）の部品から呼び出すやり方を紹介しています。今回の部品は、「A Child Component！」を表示するだけのシンプルな物です。import React from "react";export default function Step11Child(): JSX.Element {  return (    <React.Fragment>      <div>        <h2>A Child Component!</h2>      </div>    </React.Fragment>  );}　　基本的な記述は、これまで紹介してきた書き方と同じです。 違いは、別に部品を作って呼び出す点です。呼び出し元の記述呼び出し元（親）の記述は、必要な部品を「import」して呼び出すだけです。import React from "react";import Step11Child from "./step11Child";import "./styles/step11.cs

Vue公式チュートリアル　〜　部品にデータを渡すVue の公式チュートリアルを使ってゼロから Web 開発の学習をする方法を紹介しています。今回は、メインのページから呼び出す「部品」にデータを渡す方法を学習します。前回までのポイントは？前回のステップでは、これまで学習に使っていたメインの部品（ページ）から新たに作成した部品を呼び出す方法を学習しました。 これまで、学習した基本的な「書き方」は、Vue で使う「部品」を作る場合には同じ容量で使う事ができます。つまり、これまで学習した事が使いこなせるようになれば、「部品」を作ることに役立てることができます。そこで、改めてこれまで学習した「Vue の部品の基本」をもう一度見直してみてください。今回の学ぶのは？今回、学習するのは既に書いていますが、作成した Vue の「部品」を呼び出す際にデータを渡す方法を学習します。なぜ部品にデータを渡す事ができると、部品が使いやすくなるからです。例えば、ページの先頭に書く情報（ヘッダーと呼ばれる場合もあります）に例えばアプリのタイトルをこの部分に入れたい場合です。 部品にデータを渡せない場合は、部品の中でタイトルのデータを作る方法になります。しかし、この場合は、アプリごとに「別の物」になってしまいます。 部品を呼び出す際にデータを渡せれば、同じ部品を利用する事が可能になります。Vue は、そうした事を考慮して、部品にデータを渡す機能をサポートしています。このステップではそれを学習します。今回の変更前のコードです。(App.vue)<script>import ChildComp from

Vue 公式チュートリアル　〜　「部品」を呼び出す！Vue の公式チュートリアル、ステップ 11 は、これまでは一つの大きな「部品」を扱ってきました。このステップでは、別の「部品」を作成して、呼び出すと言う使い方を学習します。どちらかというとこちらの方がよく使う方法です。前回までのポイントは？前回までは、メインの表示部分だけを作って、その「部品」を表示するという課題でした。 メインの表示部分の部品を作る基本を中心に、その書き方を学習してきました。これは、部品の作り方の基本をカバーしているので、別の部品を作る場合にも利用できます。今回学習するのは？今回学習するのは、新たに「別の部品」を作成して、「メインの表示部分で使う」やり方を学習します。例によって、変更前のコードから見ていきましょう！今回は二つの部分に分かれています。 コードが表示されている右側の画面の上にファイルの名前が書かれています。 今回扱うのは、メインのページの部品の「App.vue」ともう一つの部品「ChildComp.vue」の二つです。（App.vue）<script>export default {  // register child component};</script><template>  <!-- render child component --></template>　今まで学習してきた、「メインのページ」の「部品」です。 現時点では、基本的に何もない状態です。（ChildComp.vue)<template>  <h

Docker Compose を使ってみる！Docker の利用例として、Django で作成したアプリを docker 上で動かす際には、「Docker Compose」を利用しました。この記事では、Docker Compose について簡単にまとめてみました。Docker Composer はどんな時に必要か？最初に、知りたいのは「いつ」Docker Composer を使うかだと思います。 一言で言えば、複数のコンテナ（Container）を利用する場合に使います。例えば、Web サーバーのコンテナとデータベースのコンテナを別々に動かして一つのサービスやアプリケーシんを作る場合です。前回の Django の例では、データベースや、HTTP のリクエストを管理する NGINX や、Django のアプリケーションサーバーなどを利用するために利用しています。Docker Composer を利用する場合、その設定は「xxx.yml」という設定ファイルに記述します。 このファイルで、どのようにイメージを作成（build）して、利用する Docker コンテナをどのようにインターフェースして、どのようにサービスやアプリを起動するかをまとめて設定します。少し、規模の大きなサービスやアプリの場合、複数のコンテナを組み合わせて利用する場合が殆どなので、Docker Composer は、そうした少し複雑で大きなサービスやアプリを Docker で動かす場合に必要になってきます。Docker Compose の基本設定Docker Compose を利用する場合でも、Docker を使う