+ JavaScript の質問用スレッド vol.123 + [無断転載禁止]©2ch.net

2017/04/02(日) 23:30:38.56

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

※前スレ
+ JavaScript の質問用スレッド vol.122 +
http://echo.2ch.net/test/read.cgi/tech/1472426483/

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:----: EXT was configured

2021/09/05(日) 13:42:05.76

>>806
「プログラミング　関数を作る意味」でググっていくつか読めば分かると思う

2021/09/05(日) 14:46:48.17

>>808
alertやconsoleに限らず、その関数内から呼び出せる任意の関数を使って外部とのやりとりはできるわけだが。

2021/09/05(日) 18:55:22.30

>>811
>>812
はい

2021/09/07(火) 11:24:53.81

localStrageに複数のデータを保存して、ループで取り出したいのですが、pushで保存は可能です。しかし、forで取り出すとカンマの区切りが機能していないようです。
[1,2,3]
こういう配列があった場合、forで取り出すと以下のようになります。
1
,
2
,
3
つまりこれは配列ではなく、文字列として扱われているのだと思います。
localStrageへの保存はどのような方法が一般的なのでしょうか？

以下はstartを押すとlocalStrageに配列を保存し、outputで取りだすというものです。
<button id="start">ボタン</button>
<button id="test">output</button>
<div id="timer" style="border:1px solid red;width:500px;height:500px;"></div>
<script>
let startButton = document.getElementById("start");
let testButton = document.getElementById("test");
let timer = document.getElementById("timer");
let num = 0;
let arr = [];
startButton.addEventListener("click" , function()
{num += 1;
timer.insertAdjacentHTML("afterbegin" ,"<div>" + num + "</div>");
arr.push(num);
localStorage.setItem("saveArray" , arr);
});
testButton.addEventListener("click" , function()
{let array = localStorage.getItem("saveArray");
for(let i = 0;i < array.length ; i ++)
{console.log(array[i]);}});
</script>

2021/09/07(火) 11:29:52.51

>>814
JSON.stringify(), JSON.parse()

2021/09/07(火) 15:35:10.78

>>815
jsonにするということですが、なぜ配列だと駄目なんですかね。

2021/09/07(火) 15:44:10.61

pythonにとって読み込んだテキストは単なる文字列だから。
“[1,2,3]”と同じ。

2021/09/07(火) 15:48:32.44

おっとpythonスレじゃなかった。javascriptにとってね。

2021/09/07(火) 15:57:51.34

>>818
そういう仕組だと覚えるしかないですね
localstrageって一種の変数みたいなもんじゃないんでしょうかね

2021/09/07(火) 20:38:17.68

外部とのやり取りは、文字列だけ

オブジェクトのシリアル化(直列化)、serialize

2021/09/07(火) 22:51:34.49

localstorageだと強制的に文字列に変換されるから、それが嫌ならlocalforageとかのラッパーを使うといい

2021/09/08(水) 15:58:10.14

はい(´・ω・`)

2021/09/08(水) 21:31:41.92

innerhtmlはfor内では機能しないのでしょうか？
クリックしたときにtimerの中にnum_arrの中身をセットしたいです。
しかし、console.log(num_arr[i])での展開はされますが、innerhtmlでのセットは機能していないです。
なぜでしょうか？
<button id="test2">
test2
</button>
<div id="timer"></div>
<script>
let testButton2 = document.getElementById("test2");
let num_arr = [1,2,3,4,5];
testButton2.addEventListener("click" , function()
{
for(let i = 0;i <num_arr.length ; i ++)
{
timer.innerHTML = "<div>" + num_arr[i] + "</div>" ;
console.log(num_arr[i]);
}
});
</script>

2021/09/08(水) 21:50:08.74

書いた通りに動いてるじゃん
一瞬で上書きされるから人間の目には何が起きてるか見えんけど

2021/09/08(水) 21:52:59.07

>>823
> for(let i = 0;i <num_arr.length ; i ++)

i ++ とは？

2021/09/08(水) 21:56:09.90

変数timer が未定義だから

let timer = document.getElementById("timer");
が必要なのでは？

2021/09/08(水) 22:05:24.18

>>826
その方がお行儀がいいのでそうすべきだが、定義はされてる

2021/09/08(水) 22:13:11.22

>>823
プラスイコールにしてみればわかるよ
timer.innerHTML = "<div>" + num_arr[i] + "</div>" ;
timer.innerHTML += "<div>" + num_arr[i] + "</div>" ;

2021/09/08(水) 23:14:26.26

>>828
innerHTMLでなくていい気はするが、原因はその通りだな
https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML

2021/09/09(木) 00:07:10.15

chrome拡張機能を作っているのですが、insertRuleしようとするとたまにエラーが出てしまいます。
調べてもよくわからなかったのですが、原因わかる方いますか？
Error handling response: Error: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule 'undefined'.

2021/09/09(木) 00:10:23.30

>>823＞innerhtmlはfor内では機能しないのでしょうか？

>>828の様にすればinnerHTMLはfor内でも機能してるのが確認出来る

＞クリックしたときにtimerの中にnum_arrの中身をセットしたいです。

なら
//num_arr[i] ではなく

timer.innerHTML = "<div>" + num_arr.join() + "</div>" ;

とすべし、あと名前はtimerではなくてtimesだろう

2021/09/09(木) 00:21:08.30

>>830
そのエラー文字列で、Google 検索すれば？

2021/09/09(木) 01:04:57.92

jsを勉強し始めたんですがコールする関数タイポしてもコンパイルエラーとかないんで実行してコケて気づいて直す、を繰り返してしまいます。
こういうテスト以前のコーディングミスについて、コンパイル言語のように事前に検知する方法はないでしょうか？
ちなみにvscodeで開発してます。

2021/09/09(木) 01:27:37.42

コケちゃいました

2021/09/09(木) 01:53:20.98

eslintとかtypescript使うとか

2021/09/09(木) 03:49:44.49

漏れは、VSCode で、スクラッチパッドみたいな拡張機能・Quokka.js で、
コードを入力してるけど、文法エラーでは、赤い波線が表示される

拡張機能・ESLint も使っているからかな？

もちろん、Node.js もインストールしているから、
Quokka.jsに書いたコードは、Node.jsで実行されるので、時刻が9時間ずれる

2021/09/09(木) 06:09:13.65

>>828
これで解決しました
ありがとう

加算にしないと駄目なんですね(´・ω・`)、、、

2021/09/09(木) 08:16:04.83

eslint、こんなのあるんですねありがとうございます

2021/09/09(木) 15:28:43.86

プログラミンコードの校正ってどこでアドバイスもらえますか？
ストップウォッチ作ったはいいものの、コードぐちゃぐちゃで読んでて分からない
分かりやすく書く方法を教えてほしいのです(´・ω・`)、、、

2021/09/09(木) 15:40:55.41

処理や変数など要所にコメント入れるようにして、
自分でわかるように書き直してみたらいい。
理解も深まるし無駄なところもわかったりする。

2021/09/09(木) 15:52:13.51

https://ideone.com/O5tsDV
ideonにupしました(´・ω・`)、、、
コメント入れているのですが、改善点のアドバイスもらえますか？
コメントアウトしている部分はとりあえずは使わない機能です。

2021/09/09(木) 16:17:46.87

>>841
適当にコード拾ってきてつなぎ合わせたのでなけりゃ、十分理解できるコードだと思うが。
それなりにコメント入ってるし。
むしろ具体的にどこがわからんのよ。

自分で理解して書いたコードだったら、一回全内容にコメント入れてみたら？

2021/09/09(木) 19:26:54.34

>>842
どういう部分と言われても難しいですが、しばらく放置してから見ると動きを理解するのに少し時間がかかるというか
この程度の短いコードですが

複数ファイルに分けたりしたほうがいいのでしょうか？

おそらく、良くわからないのは実行の流れです
フローチャートなどは苦手で書いていません

2021/09/09(木) 20:13:16.49

>>843
できるだけ関数化するのと、その関数の名前にはこだわった方がよいかも
ファイルは分けなくてよい
フローチャートは自分も書いたことはない

例えばタイマの初期化が先頭部分とリセットボタンクリックイベントの2箇所にあるが、読みづらい上に不具合のもと
実際にリセットボタンクリック時にはミリ秒がクリアされるのに
起動時にはミリ秒がクリアされていないように見える(ローカルストレージから前回の値を拾ってきてる?)

関数外にはグローバルっぽく扱いたい変数の宣言のみを置いて
初期化は名前を付けて関数にする

イベント内の処理も関数化する

そうするとソースを読むとき、先頭から追いかけるときは
原則関数だけが並んでいる形になり、そこでは細かな処理を気にする必要はない

イベントの処理ではイベント関数の先頭からソースを追いかけるが、
そこでも関数だけがあって細かな内容は気にしなくてよい、という形にする

あとはセンスも必要になるけど、処理の内容を的確に表す分かりやすい関数名であれば、
関数名それ自体がコメントのような役割をはたすので、さらに読みやすくなる

2021/09/09(木) 20:27:52.09

フレームワーク無しで開発すると、最後には暴発する。
デザインパターン・ファイル分割などが、統一的に決まっていないから

他人のクソコードを誰も読みたくない

だから、Ruby on Rails を使って、
全員が同じ規約で、レールに乗る。Rails Way

Rails では、Node.js, React, Vue.js, Bootstrap を使う。
これらもフレームワークだから、規約で決まっている

だから、独自のデザインパターンを使うことや、我流は、すべて禁止されている。
つまり、全てフレームワークに従う

コードレビューも、フレームワークに従っていない部分を、修正させられる。
フレームワークのやり方と違いますよと

例えば、伊藤淳一のコードレビュー。
YouTube 動画、2018/10

RSpecで書かれたRailsチュートリアル第6章のテストコードをレビューしてみた

2021/09/09(木) 20:34:47.79

>>844
関数化すると、レビューやテストがやりやすくなる
というのも追加で

あと、関数化といっているのは規模が小さいからで、
規模が大きくなってきたらクラス化したりファイルを分けたりとかの考慮は当然必要になる

2021/09/09(木) 20:52:57.96

関心事がごっちゃ混ぜだから分かりにくい

アプリケーションが管理する状態(モデル)とその状態をユーザーに見せる表現(ビュー)に対する処理を意識して分けること
MVCの基本を学ぶと良い

モデルの初期化処理やビューの初期化処理、モデルのsave/load処理を関数等でまとめること

モデルの変更イベント(mode: stopped -> running)をリッスンしてビューを更新する作りにすると関心事の分離的にも依存性の方向的にも見通しがよくなる

2021/09/09(木) 21:53:27.14

ねこ

2021/09/10(金) 00:38:04.25

eslint、入れてみたところ明らかに怒られる筋合いのない箇所で大量に怒られが発生して鎮火に試行錯誤してたらクソ時間食って本末転倒だったので切ってしまいました・・・

2021/09/10(金) 11:56:08.39

糞コード書くなゴラーかな？

2021/09/10(金) 15:55:30.36

>>844
変数は出来るだけローカルにして、関数化出来る部分は出来るだけ関数化するということですよね。
MVCも調べているところです。
これはMVCの３つのクラスに分ければいいんでしょうか？

**845** (ﾜｯﾁｮｲ 8b2c-aIS6 [153.136.94.40]) · 2021/09/10(金) 21:07:41.01

Ruby on Rails が、MVC の代表

React, Vue.js のFlux 系フレームワーク。
Store, View, Action

サーバーがRails のAPI モード・Web Socket などで、
クライアント側のHTML が、React, Vue.js, Bootstrap が多い

2021/09/11(土) 04:28:54.23

>>851
ソースを修正してみた
https://codepen.io/cocotto/pen/OJgmXyo

自分はMVCとかよく分からんので、元のロジックは基本的にそのままで
機械的に細かく関数に分けてみただけだが

一応意識したのはタグの操作(insertAdjacentHTMLとかsetAttributeなどの行)は
ソースとしては非常に読みづらいので1行2行でも関数化したのと、
ボタンの状態変化をupdateButtonStatus()の1箇所にまとめ、
アクションの種類によらずその1種類の関数だけを呼べばよいようにしたことくらい

2021/09/11(土) 06:58:37.14

mvcってどうやってエリアを分けるんでしょうか？
model controller viewのエリアです
単にコメントアウトで分けるのですか？

2021/09/11(土) 07:18:42.95

>>853
回答どうも
似たような

タグの操作というのはmvcでいうところのviewですよね。
ボタンの状態もviewですよね。

controllerはキーイベントなどのことだと思います。

modelってどの部分が該当するんでしょうか

**845** (ﾜｯﾁｮｲ 8b2c-aIS6 [153.136.94.40]) · 2021/09/11(土) 09:52:12.58

100年やっても、MVC を作れない。
MVC のRuby on Rails をやった方が良い

それで、React, Vue.js のFlux 系フレームワークで、
Store, View, Action

Model, Store は、データ
View は、HTML
Controller は、それ以外の雑多なもの
Action は、データを変更するイベント

2021/09/11(土) 09:56:20.99

スネークマンショーのチリ紙交換のコント思い出したw

2021/09/11(土) 13:02:57.50

>>855
modelはビジネスロジックを扱う部分
今回のプログラムでは
modeなどの状態管理や累積時間を操作する処理が該当

>>似たような
最初からロジックは変更してないといっている

MVCやフレームワークはアプリを作成する上の考え方やお作法なので、
多人数のプロジェクトに参加する場合には覚えて使いこなすことが必須で、
理解している人同士では話が通じやすい

一方で、たとえばLaravelというフレームワークでは新規にプロジェクトを作成すると、
コードを1行も書いていない状態で、数千のファイルが生成される
開発ではお作法に従って適切なファイルを適切に修正していく必要があるが、
そもそもお作法を理解するまでに学習コストがかかり、理解するまでは読みやすいとは限らない
1ページ2ページのwebアプリでフレームワークを導入すべきかも検討が必要

とはいえ小規模なプログラムでも
ビジネスロジック部分ではUI操作を混ぜない、
UI操作の途中でビジネスロジックに影響を与えない、
などとした方が読みやすく保守性も上がる、とは言われていて、
本来的にはMVCなどの考え方を導入すべきかもしれないが、
小規模な趣味的アプリならUI操作部分を関数化して追い出すだけで
多少見やすくなるんじゃないか、というのが 853 の例

趣味でなく就職のトレーニングのつもりならMVCでもフレームワークでも頑張って勉強してもらうしかない

2021/09/11(土) 20:24:46.63

↑回答どうも
趣味程度ですね。

ただ、それでも分かりやすくはしたいので、mvcの考え方だけ取り入れます。
本物のmvcがよくわかりませんけどね。

2021/09/11(土) 22:16:23.61

>>859
早速、teratailでMVCの質問をしたんだな...
https://teratail.com/questions/358996

2021/09/12(日) 10:42:23.75

javascriptだとmvcがなじまないから何らかのフレームワークを使うってことなんですかね？

2021/09/12(日) 11:03:01.64

>>861
それはhentaimanに直接聞くべき内容だと思うが

**845** (ﾜｯﾁｮｲ 8b2c-Le98 [153.136.94.40]) · 2021/09/12(日) 12:19:17.43

>>856
に書いたように、

Ruby on Rails は最初から、Node.js, Webpack, Babel を使う

多いのは、React, Bootstrap。
日本では、Vue.js も使う

最近の転職では、Vue.js, TypeScript も有利だと、
YouTube で有名な、雑食系エンジニア・KENTA が言ってる

サーバー側がRailsのAPIモードで、
フロントエンドが、React, Vue.js

ほとんどのベンチャー・学校・サロンは、これ

**845** (ﾜｯﾁｮｲ 8b2c-Le98 [153.136.94.40]) · 2021/09/12(日) 12:24:38.96

例えば、食べチョクでは、AWS, Ruby on Rails, React

若い娘が1人で起業するような場合は、Heroku, Rails, Bootstrap とか

2021/09/12(日) 14:42:19.18

テラワロスな回答が2つもついててteratailのレベルの低さに驚愕した
一番基本のクライアントサイドのMVCを知らずにまともなUIコードを書けるわけがない

2021/09/12(日) 16:49:42.17

javascriptでmvcは使うんですか？
違う概念があるんでしょうか？

**845** (ﾜｯﾁｮｲ 8b2c-Le98 [153.136.94.40]) · 2021/09/12(日) 17:04:40.45

YouTube で有名な、雑食系エンジニア・KENTA のサロン・動画を見ればわかるけど、

基本的には、どこの会社も転職用ポートフォリオは、Ruby on Rails のみ。
他のフレームワークのシェアが少ないので、それらで作っても誰も見ない。
Laravel, Django など

React, Vue.js も、バックエンドで使うかと言われれば、使わない

だから基本、サーバー側は、Rails のAPI モードで、
フロントエンドに、React, Vue.js, Bootstrap を使う

**845** (ﾜｯﾁｮｲ 8b2c-Le98 [153.136.94.40]) · 2021/09/12(日) 17:40:45.71

単純な例では、a.html に、
<button id="btn_1">押して</button>
と書いて、jQuery を読み込んでから、ボタンを押すと、ajax で、a.json を読み込む

$( function ( ) {
$('#btn_1').click(function(){
$.ajax({
url: 'a.json',
type: 'GET',
dataType: 'json'
}).done(function(data){
console.log( data )
});
});
} );

a.jsonには、
{ "title": "指輪物語" }
と書いておく

a.html上で、右クリックメニューから、
VSCode の拡張機能・Live Server を起動すれば、HTMLが表示される
(VSCode, Node.js は、インストールしておく)

a.jsonがデータ(モデル)で、a.htmlがView。
データがデータベースになれば、Rails などの本格的なフレームワークを使う

他にも、多くのページ・routing を設定するなら、Controller も必要になる

2021/09/12(日) 20:26:44.95

ttps://radiko.jp/reader/
Widgets: Google Tag Manager
JavaScript Libraries and Functions: Moment JSMoment JS
Web Servers: nginx

2021/09/13(月) 17:35:06.53

xamppのローカル上では何故かjQueryが作動してくれるのですが、そのファイルをエックスサーバーに上げると作動してくれません、、
気になったのはCDNの位置で、何故かheader.phpに記載されています
jQuery本文はindex.phpに記載してます

phpのファイルにはbodyが無いため、ネットで調べても検索結果が無いのですが・・確認すべき点があればご指摘いただけませんか？

教えていただきたいのは
jQueryを読み込ますCDNの位置とjQuery本文の記載場所です、、

宜しくお願い致しますm(_ _)m

2021/09/13(月) 17:39:20.42

cdnはhead内
header.phpがどうなってるか知らんがそこにheadタグがあるならそこ
本文？はcdnのjQueryの読み込みより後ならhead内でもbody内でもいい
bodyが無いというのは抜け落ちてるか見落としかどっちか

2021/09/13(月) 18:25:35.94

もしかしてWordPress？
回答に必要な情報があるならちゃんと書いてね

2021/09/13(月) 20:51:33.89

header.php が単に、メニューバーなどを定義した、
部分テンプレート・パーシャルなのか、
それとも、HTML の<head>タグなのか？

<head>タグなら、body よりも、先に読み込まれるでしょ？
試しに、bodyの終了タグ直前で、読み込んでみれば？

もちろん、jQuery は、自分のコードよりも先に読み込まないと動かない

2021/09/13(月) 22:43:40.11

>>871-873
皆様有難うございます！
業者にwordpressで作成していただいたものをカスタマイズしてます
素人で検索ワードも効率的に選べなかったのですが、アドバイスをもとにネット検索をして少しだけわかってきました
今回、改修したいファイルはindex.phpですが、headとbodyはheader.phpにありました(何故か</body>は見当たらず・・)
なので、明日は</body>を書き込み、その直前にjQueryの本文を入れて試してみようと思います

2021/09/13(月) 23:20:03.86

まず今日までの作業は忘れて「WordPress jQuery」で検索
大抵jQueryは導入済で、自作のスクリプトの側を工夫すれば使える
正直不理解なまま業者の納入物をブッ壊してるように見えるぞ

2021/09/14(火) 00:46:24.59

>>875
有難うございます！
確かにCDNでjQueryが導入済みだったので、いきなりFanction以下の本文を記入してもxampp上では動いてくれたのですが、、
一応、ローカル環境だけでいじくり回して解らなくなったらバックアップのデータで復元してます

何故かサーバーにアップしたら動かない、、
ライブラリのバージョンが違うのかはどうやって判断すれば良いのでしょうか？
業者は2.2.1でしたが、3.6.0にすべきかどうか？
なぜ、bodyの終了タグが無いのか？
一応、body自体を消してみたけど、何ら崩れたりもせず動いてました

header.phpのheadの終了タグの前にjQueryの本文を記入しましたが、レイアウトが崩れました
index.phpに記載した内容に影響のあるscriptなので、別のファイルに記載したら駄目なのか？

一晩寝て、アドバイスの通り検索から始めて理解を深めてから先に進むことにします、、

2021/09/14(火) 08:12:14.43

>>873
一晩寝て思いついたのですが
header.phpはメニューだけを記述したファイルのようです
そこのheadにhtmlの宣言？CSSの呼び出し、CDNが記載されてました
他にhead,body,CDNを記述したファイルは見つかりません

そもそも.htmlというファイルが無いサイトって成り立つのでしょうか？
index.phpはトップページの内容を記述してますが、headもbodyも記述がありません、、
index.phpに記載の内容に対してjQueryを作動させたいのですが、、
xampp上では何故か上手くいってるんですよね
index.phpにbodyを新たに記述するってのは違反行為でしょうか？

そもそもhtmlの知識もなくカスタマイズしようとしてまして、、

2021/09/14(火) 09:07:31.26

>>877
一般に公開するwebならその程度の知識でいじるのはやめといた方がいいよ

2021/09/14(火) 09:10:16.30

body云々の話はどうでもいい
(header.php、footer.phpでワンセット)
htmlの勉強も必要だけどまずWordPressのお作法を勉強しろ(WordPress javascriptで検索)
原因を探るならページを表示した際のソースをxamppと本番環境で見比べてみればいい

2021/09/14(火) 09:35:33.82

>>878-879
ご指摘はごもっともですが、他に適任者は居なく業者からも実装したことが無いと放り投げられてるのでやるしか無いのです
上でも指摘していただきましたが、wordpressで jQueryは設定されていて、私の作成したfunctionの記述を再確認したところ上手く作動するようになりました！
やはり壊していたのは自分自身だったと・・

2021/09/14(火) 09:48:24.43

>>880
その流れだと普通は他の業者探さないか？

2021/09/14(火) 10:56:51.75

自己責任で勝手に会社のをいじるのか、人生ひっくり返されないようにな

2021/09/14(火) 11:48:37.64

wordpressネタで色んなスレで暴れてる釣り師だよ

2021/09/14(火) 12:44:48.80

2021/09/14(火) 17:37:23.97

ちゃんと確認したらできました

2021/09/14(火) 18:10:22.42

>>881-882
ECサイトとかじゃなくて単なる零細企業の企業サイトですから・・

2021/09/15(水) 02:21:53.09

例えば、Ruby on Rails なら、部分テンプレート(Partial)で、
メインの内容・ヘッダー・フッター・サイドメニューなど、
ページの各部分をバラバラに作る

_main_content.html.erb
_header.html.erb
_footer.html.erb
_sidemenu.html.erb

上の各部分を、全体のテンプレート・application.html.erb で読み込む

拡張子ERB は、Rubyの構文で書いて、HTML へ変換する。
a.php と同じ。PHPの構文で書いて、HTMLへ変換するだろ

Rubyでは、ERB内で、<% ～ %>, <%= ～ %> に、Rubyの構文を書けば、
それが解釈されて、HTMLへ変換される。例えば、

ERB
<% price = 100 * 1.1 %>
<p>値段は<%= price %>円です</p>

変換されたHTML
<p>値段は110円です</p>

**887** (ﾜｯﾁｮｲ 8b2c-0MLo [153.136.94.40]) · 2021/09/15(水) 02:22:34.90

WordPress はプロ向きじゃない。
デザインの本ばかりで、Railsみたいに、フレームワークの仕組みを学べる本がない

プログラミングはコーディングするものじゃない。
ほぼ、ずっとフレームワークの仕組みを読むこと。
これが、開発のほとんどの時間を占める

だから、WordPressの仕組みは、web制作管理板のWordPressのスレで聞くように言ってる。
各テンプレートを読み込む順番とか、どれが本体のHTMLなのかとか

この板で聞いても、個別のフレームワークの仕組みは誰も知らない

だから皆、専用のサロンへ入る。
例えばRailsなら、YouTube で有名な、雑食系エンジニア・KENTA のサロンへ、3千人が入っている

そういうコミュニティーへ入らないと無理。
独学では作れない。教えてもらわないと無理

2021/09/15(水) 02:34:09.70

宣伝死ね

2021/09/15(水) 03:16:07.67

>>884
jQuery なら、sepia(0.8) blur(1px)
と、文字列で出力された。
JavaScript のオブジェクトにならなかった！

<img src="a.jpg" id="img_01">

<style>
#img_01{ filter:sepia(80%) blur(1px); }
</style>

$( function ( ) {
prop = $( '#img_01' ).css( 'filter' )
console.log( prop );
} );

2021/09/15(水) 17:19:00.06

classでインスタンスを作っている人いますか？
これってすごく中途半端でかえって分かりにくいです。

2021/09/15(水) 18:11:45.71

three.jsのオブジェクトはこんな感じで作ったりするけど？

for (let i = 0; i < 1000; i++) {
const sprite = new THREE.Sprite(material);
// ランダムな座標に配置
sprite.position.x = 500 * (Math.random() - 0.5);
sprite.position.y = 100 * Math.random() - 40;
sprite.position.z = 500 * (Math.random() - 0.5);
// 必要に応じてスケールを調整
sprite.scale.set(10, 10, 10);

scene.add(sprite);
}

2021/09/15(水) 18:15:59.59

何が中途半端か分からんけどTypeScriptでも触ってみたら

2021/09/15(水) 19:02:24.83

スクレイピングすると地獄へ落ちるって本当ですか？

2021/09/15(水) 19:09:57.19

やり方を間違えるとあり得ます

2021/09/15(水) 20:59:30.06

>>891
それを作らないなんてとんでもない

2021/09/16(木) 00:08:14.89

class 構文を使わず、継承チェーンを自作しているようなコードは、地獄

そういう香具師は追放

?2BP(1000) · 2021/09/16(木) 00:11:22.80

>>897
継承自作はガチでやばい

2021/09/16(木) 00:40:41.07

ES2015まではclass無かったんですよね？それまではどうしていたんですか？

2021/09/16(木) 00:56:38.22

>>899
関数宣言

2021/09/16(木) 10:55:25.86

リサイズイベントが複数設置していて、望んだ順番で発火して欲しいのですが、
何か方法はありますでしょうか？

現状は各リサイズイベントにて、setTimeoutを用いてイベントの発火を間引いていますので、
その間引く時間をそれぞれ変更して対応しています。

2021/09/16(木) 13:22:43.27

クラスにして引数渡すメソッドにすりや良いんじゃね？

2021/09/16(木) 15:22:17.42

すいません
windowsのローカルで動くスクリプトを書いてて質問です。（JSX）

children = folder.getFiles();

でディレクトリにあるファイル一覧を取得してるんですが

children[0].path = decodeURI(children[0].path);

みたいにファイルのパスをURLデコードしても、デコードしたパスが上書きされません。

ファイルパスに日本語が含まれていると後の処理でエラーが出るので
色々試してる途中なのですが、むしろ「日本語がURIエンコードされている」ことが問題なのかなと思ったので
いったんデコードを試みてる次第です。

どなたかよろしくお願いいたします。

2021/09/16(木) 19:34:45.06

classは非推奨になると思う。

2021/09/16(木) 19:40:28.89

>>903
一行でやらずに間挟んでみたら？
tmp = decodeURI(children[0].path);
children[0].path = tmp;

2021/09/16(木) 21:28:13.93

classを導入するならjavaみたいにクラスベースにするべき。

2021/09/16(木) 21:57:57.90

>>906
なぜ？

2021/09/16(木) 22:58:46.10

>>907
中身がプロトタイプのままならfunctionでコンストラクタを書いた方が、
プロトタイプチェーン、this、継承の挙動が把握しやすいから。

2021/09/16(木) 23:06:18.36

>>908
糖衣構文と把握できない人にはそうかもしれないな

2021/09/17(金) 05:14:25.65

>>903
Node.jsでglobモジュールでワイルドカード指定する方法とディレクトリ除外する方法
https://confrage.jp/node-js%E3%81%A7glob%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%A7%E3%83%AF%E3%82%A4%E3%83%AB%E3%83%89%E3%82%AB%E3%83%BC%E3%83%89%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%A8/

Windows, Node.js でもファイル操作できる。
日本語のファイル名でも、普通に表示できる

でも初心者が、サーバー側・バックエンドをJavaScript で作るのは推奨しない。
10年以上掛かる。非同期処理も難しい

ファイル操作・テキスト処理なら、Ruby から始めた方がよい