第11章Webアプリケーション開発
11.2 Sample Responsive WAD with Bootstrap and Django11.2 BootstrapとDjangoによるレスポンシブWebアプリケーション開発の例
• Bootstrap is an open-source, responsive web application framework, and Django is a Python-based web application development framework. Both frameworks are highly popular due to their ease of use.
• Bootstrapは、オープンソースのレスポンシブWebアプリケーションフレームワークであり、DjangoはPythonを基盤とするWebアプリケーション開発フレームワークである。どちらも使いやすいため、広く利用されている。
• To build the Todo application, you must install Python, PIP, Django, Django REST Framework, Bootstrap, and jQuery.
• Todoアプリケーションを作るには、Python、PIP、Django、Django REST Framework、Bootstrap、jQueryをインストールする必要がある。
• The steps to build the Todo application are install and set up a local programming environment for Python 3, download and install Python 3.9.4, and add Python and its Scripts subfolder to your path environment data.
• Todoアプリケーションを作る手順は、Python 3のローカルなプログラミング環境をインストールして設定し、Python 3.9.4をダウンロードしてインストールし、PythonとそのScriptsサブフォルダーを環境変数pathへ追加することである。
• The first step to build a Django web application is to create a Django project.
• Django Webアプリケーションを作る最初の手順は、Djangoプロジェクトの作成である。
• Once the Django project is successfully completed and set up, the next step is to create the Todo application and register it in the Django project.
• Djangoプロジェクトの作成と設定が正常に完了したら、次にTodoアプリケーションを作り、Djangoプロジェクトへ登録する。
• After registering and installing the Todo web application, the next step is to create the models for Category and TodoList.
• Todo Webアプリケーションを登録してインストールしたら、次にCategoryとTodoListのモデルを作成する。
• After the Category and TodoList models are created, the next step is to create the serializers, the View, routers, user interface, and templates.
• CategoryとTodoListのモデルを作成したら、次にシリアライザー、View、ルーター、利用者インターフェース、テンプレートを作成する。
11.3 Sample Responsive WAD with Bootstrap/React and Node11.3 Bootstrap/ReactとNodeによるレスポンシブWebアプリケーション開発の例
• React is a JavaScript library popular to build user interfaces.
• Reactは、利用者インターフェースの構築によく使われるJavaScriptライブラリである。
• Node is a JavaScript runtime environment that provides developers with the tools to develop web applications, as well as servers, scripts, and command-line tools.
• Nodeは、Webアプリケーション、サーバー、スクリプト、コマンドラインツールの開発に必要な道具を開発者に提供する、JavaScriptのランタイム環境である。
• When creating a Todo web application using React and Node, React serves as the front end, handling the user interface, as well as getting and setting data via HTTP requests using Axios. Node serves as the back end, using a REST API built with ExpressJS and the MongooseJS ODM to interact with a MongoDB database.
• ReactとNodeでTodo Webアプリケーションを作る場合、Reactはフロントエンドとして、利用者インターフェースを扱い、Axiosを使ったHTTPリクエストでデータを取得・設定する。Nodeはバックエンドとして、ExpressJSで構築したREST APIとMongooseJSのODMを使い、MongoDBデータベースとやり取りする。
• To build the Todo application using Bootstrap, React, and Node, you need React v17.0.2, Bootstrap v4.5.0, Node v14.17.5, ExpressJS v4.17.2, MongooseJS v6.1.9, and Axios v0.21.0.
• Bootstrap・React・NodeでTodoアプリケーションを作るには、React v17.0.2、Bootstrap v4.5.0、Node v14.17.5、ExpressJS v4.17.2、MongooseJS v6.1.9、Axios v0.21.0が必要である。
• The steps to create a Todo web application using Bootstrap, React, and Node include:
• Bootstrap・React・NodeでTodo Webアプリケーションを作る手順には、次のものがある。
◦ create the Node back end
◦ Nodeのバックエンドを作成する。
◦ create the Node app
◦ Nodeアプリを作成する。
◦ set up the Express web server
◦ Express Webサーバーを設定する。
◦ configure the MongoDB database and Mongoose
◦ MongoDBデータベースとMongooseを設定する。
◦ build the controller
◦ Controllerを構築する。
◦ set up the REST API
◦ REST APIを設定する。
◦ create the React front end
◦ Reactのフロントエンドを作成する。
◦ create the React app
◦ Reactアプリを作成する。
◦ install Bootstrap and other dependencies
◦ Bootstrapとその他の依存パッケージをインストールする。
◦ create the React components
◦ Reactコンポーネントを作成する。
◦ connect the React front end to the Node back end
◦ ReactのフロントエンドをNodeのバックエンドへ接続する。
11.4 Sample Responsive WAD with Bootstrap/React and Django11.4 Bootstrap/ReactとDjangoによるレスポンシブWebアプリケーション開発の例
• The Todo web application can be updated using Bootstrap with React and Django.
• Bootstrap・React・Djangoを使って、Todo Webアプリケーションを更新できる。
• For this version of the Todo web application, React serves as the front end handling the user interface to get and set data via HTTP requests. Django serves as the back end.
• この版のTodo Webアプリケーションでは、Reactがフロントエンドとして、HTTPリクエストでデータを取得・設定する利用者インターフェースを扱う。Djangoはバックエンドを担う。
• To build the Todo application using Bootstrap with React and Django, you need Python v3.9.4, PIP v21.3.1, Django v4.0.1, Django REST Framework v3.13.1, Bootstrap v4.5.0, Django-cors-headers v3.11.0, React v17.0.2, and Axios v0.21.0.
• Bootstrap・React・DjangoでTodoアプリケーションを作るには、Python v3.9.4、PIP v21.3.1、Django v4.0.1、Django REST Framework v3.13.1、Bootstrap v4.5.0、Django-cors-headers v3.11.0、React v17.0.2、Axios v0.21.0が必要である。
• The React application uses Axios to fetch data by making requests to a given endpoint.
• ReactアプリケーションはAxiosを使い、指定されたエンドポイントへ要求を送ることで、データを取得する。
• A proxy to the Django application helps tunnel API requests from the React application to http://localhost:8000, where the Django application will receive and handle the requests.
• Djangoアプリケーションへのプロキシは、ReactアプリケーションからのAPIリクエストをhttp://localhost:8000へ通し、そこでDjangoアプリケーションが要求を受信して処理できるようにする。
11.5 Sample Native WAD with React Native and Node or Django11.5 React NativeとNodeまたはDjangoによるネイティブアプリケーション開発の例
• A Todo application for mobile devices can be developed using React Native and Node.
• React NativeとNodeを使って、モバイル端末用のTodoアプリケーションを開発できる。
• React Native is an open-source JavaScript framework used to build user interfaces and native applications for mobile devices.
• React Nativeは、モバイル端末用の利用者インターフェースとネイティブアプリケーションの構築に使う、オープンソースのJavaScriptフレームワークである。
• To build a Todo application for mobile devices, React Native serves as the front end handling the user interface and getting and setting data via HTTP requests. Node serves as the back end that makes use of the API built using the Django REST Framework in 11.2 Sample Responsive WAD with Bootstrap and Django.
• モバイル端末用のTodoアプリケーションを作る際、React Nativeはフロントエンドとして、利用者インターフェースを扱い、HTTPリクエストによってデータを取得・設定する。Nodeはバックエンドとして、11.2「BootstrapとDjangoによるレスポンシブWebアプリケーション開発の例」でDjango REST Frameworkを使って構築したAPIを利用する。
• Building the Todo mobile application using React Native and Node requires React Native v0.67, Node v14.17.5, ExpressJS v4.17.2, MongooseJS v6.1.9, and Axios v0.21.0.
• React NativeとNodeでTodoモバイルアプリケーションを作るには、React Native v0.67、Node v14.17.5、ExpressJS v4.17.2、MongooseJS v6.1.9、Axios v0.21.0が必要である。
11.6 Sample Ethereum Blockchain Web 2.0/Web 3.0 Application11.6 Ethereumブロックチェーンを使うWeb 2.0/Web 3.0アプリケーションの例
• A simple Todo application can be created using React with Web 3.0 powered by Ethereum smart contracts on the blockchain.
• Reactと、ブロックチェーン上のEthereumスマートコントラクトで動くWeb 3.0を使って、単純なTodoアプリケーションを作成できる。
• The Ethereum blockchain creates a secure peer-to-peer network through the use of smart contracts, which are secure digital agreements that enable users to transact directly with each other via the Web.
• Ethereumブロックチェーンは、スマートコントラクトによって、安全なピアツーピアネットワークを作る。スマートコントラクトは、利用者がWebを通じて直接取引できるようにする、安全なデジタルの合意である。
• Building the Todo Ethereum blockchain Web 3.0 application requires React v17.0.2, Bootstrap v4.5.0, Node v14.17.5, Web 3.js v1.2.2, Truffle v5.0.2, Solidity v0.8.11, and Ganache.
• Ethereumブロックチェーンを使うTodo Web 3.0アプリケーションを作るには、React v17.0.2、Bootstrap v4.5.0、Node v14.17.5、Web 3.js v1.2.2、Truffle v5.0.2、Solidity v0.8.11、Ganacheが必要である。
• The Truffle Framework, which is a suite of tools popular to develop smart contracts, can be used to develop the Ethereum smart contract.
• スマートコントラクトの開発によく使われるツール群であるTruffle Frameworkを、Ethereumのスマートコントラクトの開発に利用できる。
• The Truffle Framework can be implemented using Solidity, which is a high-level, object-oriented language that is focused on the implementation of smart contracts.
• スマートコントラクトの実装に重点を置く高水準のオブジェクト指向言語Solidityを使って、Truffle Frameworkを実装できる。