質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

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

JavaScript

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

Q&A

解決済

2回答

500閲覧

javascriptでglobal.を使用しないようにするにはどのようにしたら良いでしょうか?

退会済みユーザー

退会済みユーザー

総合スコア0

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

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

JavaScript

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

0グッド

0クリップ

投稿2020/10/05 06:33

編集2020/10/05 07:11

このようなコードでglobal変数を使用しないようにするには、どのようにしたらよろしいのでしょうか?

class Appli extends Base { constructor(system) { this._setUp(system); } _setUp(system) { global.system = (system === CONST.Code)? code : issue; } getPort() { return (global.system=== CONST.Code) ? env.PORT : (global.system === CONST.Issue) env.PORT_ISSUE : null; } } module.exports = (arg) => { return new Appli(arg); };

app.js

obj_items.type = global.system;

ejs

<% if(!dev) { %> <nav class="navbar"> <% } else { %> <nav class="navbar <%= type %>"> <% } %>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/10/05 06:43

もしかして「Node.js」でしょうか。 タグ追加されたほうが良いかと思います。
退会済みユーザー

退会済みユーザー

2020/10/05 06:58

Appli.jsで取得したglobal.systemをapp.js経由でejsファイルに表示する感じになります・・・。
m.ts10806

2020/10/05 07:04

環境情報含めて追記いただいたほうが良いかと思います。 ejsだとざっと見た感じNode.jsのようにですけど・・ 「EJS」タグも必要かもしれません。 質問タグを追加してください。
guest

回答2

0

ベストアンサー

global変数を使用しないようにするには、どのようにしたらよろしいのでしょうか?

require越しに値を受け渡しする仕組みを作りましょう。
reuqire('./xxx.js');で他のJSファイルを呼び出した場合、
まず呼び出し先のコードを上から下まで一度全て実行します。

その後、module.exportsの値をキャッシュとして保管するような設計になっています。

js

1// classes/Appli.js 2class Appli extends Base { 3 constructor(system) { 4 this._setUp(system); 5 // 状態を宣言 6 this.state = {}; 7 } 8 9 _setUp(system) { 10 this.state.system = (system === CONST.Code) ? code : issue; 11 } 12 13 getPort() { 14 // 三項演算子の多重利用は多くのコーディング規約で禁止されている 15 // 下記のような早期リターンが綺麗な実装になりやすくおすすめ 16 if (this.state.system === CONST.Code) return env.PORT; 17 if (this.state.system === CONST.Issue) return env.PORT_ISSUE; 18 return null; 19 } 20} 21 22// クラスはインスタンスにした雛形かを問い合わせる目的としても使うので、 23// 関数に包まずそのままmodule.exportsに代入した方が良い。 24module.exports = Appli;

しかしAppliは単なるクラス(雛形)であり、
newでインスタンスを生成する度に新しいstateが作られてしまいます。

特定のstateを常に使いまわしたい場合、
インスタンスをmodule.exportsにキャッシュします。
これはオブジェクト指向プログラミングに置けるシングルトンのような使い方になります。

こんな感じでAppliクラスをnewして保存する専用のJSファイルも用意しておきましょう。

js

1// modules/appli.js 2const Appli = require('../class/Appli.js'); 3 4// 引数を作ってmodule.exportsに保管しておく 5const arg = {}; 6module.exports = new Appli(arg);

使いたい場面がきたらrequire('modules/appli.js')という感じで呼び出すと、
生成したstateを内包したAppliのインスタンスをいつでも呼び出せます。

投稿2020/10/05 07:39

miyabi-sun

総合スコア21203

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/10/05 07:43

とても詳しく書いていただきありがとうございます。
退会済みユーザー

退会済みユーザー

2020/10/05 08:58

// 状態を宣言 this.state = {}; こちらなのですが、Reactを利用しない&global変数を使用しない場合だと、どのようにすればいいでしょうか?(React使っていないです・・・。)
miyabi-sun

2020/10/05 09:21

何故Reactが出てきたのかわかりませんが、 このクラス構文やクラスの機能自体はJavaScript自体に備わっているものでReactとは一切関係ありませんよ。
退会済みユーザー

退会済みユーザー

2020/10/05 09:27

そうなんですね・・・。ありがとうございます!javascriptについてもっと詳しく調べてみます!
guest

0

関数の外で宣言すればいいだけではなくてですか?
的外れだったらすみません。

投稿2020/10/05 06:47

firegrape

総合スコア902

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問