質問編集履歴

3 修正

kazuyu

kazuyu score 18

2017/02/13 16:13  投稿

index.htmlにrenderのオブジェクト変数を渡す方法を教えて下さい。
質問内容)
index.htmlを使う場合、サーバーサイドからどのようにして
renderのオブジェクトリテラル変数を渡すのかを教えて下さい。
やりたい事)
express(node.jsのフレームワーク)からWebサーバーを起動
(nginx, apach使っていません)してユーザに応じてDBから
データを参照、index.html及びclassAにオブジェクトリテラル
をrenderする機能を実装したいと考えています。
背景)
res.renderから直接、classA.jsxにrenderすればよいと
考えましたが、.jsxですとjquery.lazyload.jsと
$(○○).lazyload()を使うjsファイルが連結されていない
<script src='jquery.lazyload.js'></script>
<script src='○○.js'></script>では2つのjsファイル
が連結されず、lazyload is not definedと怒られてしまう
(.ejsでは正常動作しています)
或いは、import又は、requireで○○.jsからjquery.lazyload.js
をimportしようとすると今度は、require is not definedと
webpackのコンパイルが上手くいっていない状態(別issueで質問、回答待ち)
よって、index.htmlに<script・・・でjsの連結を実現しようと試みている
分からない事)
DBから取得したオブジェクトリテラルをサイトに反映する処理を今まで
.ejs等のテンプレートエンジンを使って実現してきたのですが、index.html
等の.htmlを使う場合、オブジェクトリテラルを反映させる方法が分からない。
ex. render ('classA', title:'タイトル');としてしまうとindex.html
の表示ができない
index.htmlコード)
```
<html>
<head>
<title>タイトル</title>
</head>
<body>
 <div id ='content'></div>
 <script src ='classA.js' ></script>
</body>
</html>
```
classA.jsxコード)
```
import React, {Component} from 'react';
export default class classA extends Component {
 constructor (props) {
   super (props);
     this.state = props;
 };
 render () {
    return (<div>{this.props.title}</div>),
    document.getElementById ('content');
 };
};
```
作業進捗)
サーバーサイドexpressのapp.js内の
res.render ('index', {title :'タイトル'});
からindex.ejsを表示させてきました。
これをReact.jsに書換えるため、テンプレートエンジンを
.ejsから.jsxに修正してindex.jsxとしてレンダー、
表示させる修正まで完了しました。
.ejsから.jsxに修正してindex.jsxとしてレンダーして
表示させてきた。
  • JavaScript

    34935 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    4222 questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Express

    592 questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

  • React.js

    3329 questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

2 修正

kazuyu

kazuyu score 18

2017/02/12 05:23  投稿

index.htmlにrenderのオブジェクト変数を渡す方法を教えて下さい。
質問内容)
index.htmlを使う場合、サーバーサイドからどのようにして
renderのオブジェクトリテラル変数を渡すのかを教えて下さい。
やりたい事)
express(node.jsのフレームワーク)からWebサーバーを起動
(nginx, apach使っていません)してユーザに応じてDBから
データを参照、index.html及びclassAにオブジェクトリテラル
をrenderする機能を実装したいと考えています。
背景)
res.renderから直接、classA.jsxにrenderすればよいと
考えましたが、.jsxですとjquery.lazyload.jsと
$(○○).lazyload()を使うjsファイルが連結されていない
<script src='jquery.lazyload.js'></script>
<script src='○○.js'></script>では2つのjsファイル
が連結されず、lazyload is not definedと怒られてしまう
(.ejsでは正常動作しています)
或いは、import又は、requireで○○.jsからjquery.lazyload.js
をimportしようとすると今度は、require is not definedと
webpackのコンパイルが上手くいっていない状態(別issueで質問、回答待ち)
よって、index.htmlに<script・・・でjsの連結を実現しようと試みている
分からない事)
DBから取得したオブジェクトリテラルをサイトに反映する処理を今まで
.ejs等のテンプレートエンジンを使って実現してきたのですが、index.html
等の.htmlを使う場合、オブジェクトリテラルを反映させる方法が分からない。
ex. render ('classA', title:'タイトル');としてしまうとindex.html
の表示ができない
index.htmlコード)
```
<html>
<head>
<title>タイトル</title>
</head>
<body>
 <div id ='content'></div>
 <script src ='classA.js' ></script>
</body>
</html>
```
classA.jsxコード)
```
import React, {Component} from 'react';
export default class classA extends Component {
 constructor (props) {
   super (props);
     this.state = props;
 };
 render () {
    return (<div>{this.prop.title}</div>),
    return (<div>{this.props.title}</div>),
    document.getElementById ('content');
 };
};
```
作業進捗)
サーバーサイドexpressのapp.js内の
res.render ('index', {title :'タイトル'});
からindex.ejsを表示させてきました。
これをReact.jsに書換えるため、テンプレートエンジンを
.ejsから.jsxに修正してindex.jsxとしてレンダー、
表示させる修正まで完了しました。
  • JavaScript

    34935 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    4222 questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Express

    592 questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

  • React.js

    3329 questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1 propに修正

kazuyu

kazuyu score 18

2017/02/12 05:19  投稿

index.htmlにrenderのオブジェクト変数を渡す方法を教えて下さい。
質問内容)
index.htmlを使う場合、サーバーサイドからどのようにして
renderのオブジェクトリテラル変数を渡すのかを教えて下さい。
やりたい事)
express(node.jsのフレームワーク)からWebサーバーを起動
(nginx, apach使っていません)してユーザに応じてDBから
データを参照、index.html及びclassAにオブジェクトリテラル
をrenderする機能を実装したいと考えています。
背景)
res.renderから直接、classA.jsxにrenderすればよいと
考えましたが、.jsxですとjquery.lazyload.jsと
$(○○).lazyload()を使うjsファイルが連結されていない
<script src='jquery.lazyload.js'></script>
<script src='○○.js'></script>では2つのjsファイル
が連結されず、lazyload is not definedと怒られてしまう
(.ejsでは正常動作しています)
或いは、import又は、requireで○○.jsからjquery.lazyload.js
をimportしようとすると今度は、require is not definedと
webpackのコンパイルが上手くいっていない状態(別issueで質問、回答待ち)
よって、index.htmlに<script・・・でjsの連結を実現しようと試みている
分からない事)
DBから取得したオブジェクトリテラルをサイトに反映する処理を今まで
.ejs等のテンプレートエンジンを使って実現してきたのですが、index.html
等の.htmlを使う場合、オブジェクトリテラルを反映させる方法が分からない。
ex. render ('classA', title:'タイトル');としてしまうとindex.html
の表示ができない
index.htmlコード)
```
<html>
<head>
<title>タイトル</title>
</head>
<body>
 <div id ='content'></div>
 <script src ='classA.js' ></script>
</body>
</html>
```
classA.jsxコード)
```
import React, {Component} from 'react';
export default class classA extends Component {
 constructor (props) {
   super (props);
     this.state = props;
 };
 render () {
    return (<div>・・・</div>),
    return (<div>{this.prop.title}</div>),
    document.getElementById ('content');
 };
};
```
作業進捗)
サーバーサイドexpressのapp.js内の
res.render ('index', {title :'タイトル'});
からindex.ejsを表示させてきました。
これをReact.jsに書換えるため、テンプレートエンジンを
.ejsから.jsxに修正してindex.jsxとしてレンダー、
表示させる修正まで完了しました。
  • JavaScript

    34935 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    4222 questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Express

    592 questions

    ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

  • React.js

    3329 questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る