Java Scriptを使ったコピペ地獄の回避方法

こんばんは！ニラです。

最近健康診断を受けて、去年と比べて13kgも痩せていることがわかりました。この１年で内臓を何個か落としましたね。

ダイエットもほどほどに。別にしてないけど。

ポートフォリオ製作中に思ったこと

PHPが使える人はこんなこと思わないと思います。

これは、僕のポートフォリオサイトのハンバーガーメニューを展開した時の画像です。このハンバーガーメニューはTOPページだけじゃなく、全ての作品ページにも設置してあります。

「WORKS」に注目していただきたい。この作品リストは、載せる作品を増やすたびに書き足さなきゃいけませんよね。しかも全部HTMLで作っているので、載せた作品ページの数(このサイトでは、１２箇所)リストに書き足さなきゃいけません。

そして、作品ページはこれからも増え続けます。増え続けますよね？極端な話、既に50個の作品ページを載せていて、そこからさらに1つ作品を載せてリストに追加したいとき、５０箇所変更する必要があります。これ、めっちゃ面倒ですよね。

しかも、僕の場合、全ページのフッター(下)にも作品リストを設置してあります。作品を載せれば載せるほどコピペ地獄になってくる未来は避けられないですね。

一つのページに書き足しただけで、全ページに反映される。そんな装置はないですかね。

PHPが使えない限り、無理なんでしょうか？

無理ではない。

JavaScriptを使えば、それに近い装置を作ることができます。

その前に一つやってほしいことがあります。

全ページに共通のJavaScriptファイルを読み込ませてください。全ページに同じCSSファイルが読み込ませているように。

1. 配列、連想配列を作る

自分のHTMLの作品リストを見てみてください。

↑ハンバーガーメニューを作っている人なら、こんな感じのリストがあると思います。

↓リストが書かれているHTMLを見ながら、jsファイルにこんな感じの配列を作ってください。

これ作るのちょっと面倒ですが、完成後めっちゃ楽になります。

2.リスト全部を覆うdivを取得

3.for文を使おう

for文を使えば、連想配列の数の分、動かすことができます。積極的に使ってみましょう。

この間、for inとか、for ofを習ったので今後使ってみようかなぁ。

3−1.連想配列の数だけ、リスト要素<a>を作ろう。

HTMLを見ながら、必要な要素を作りましょう。

僕の場合、作らなきゃいけないのは<a>要素だけだったようです。中には、<li>要素も作らなきゃいけない人もいるかもしれません。

3-2.属性、文字をつけよう。

HTMLを見ながら、クラス名・hrefを設定しましょう。どちらもsetAttributeで指定できます。

3-3.リスト全部を覆うdivの中に入れよう

一番上で取得した全体を覆う要素の中に作った<a>を入れましょう。

4.余分なHTMLを消す

この時点で、ここの部分はJavaScriptでもう作られ、必要ないので消しましょう。

そしてそして、、！

❤︎

2022/09/09

nira-012.mahora94

◀︎

next...

prev...

▶︎

comment

コメントを記入

nira-012.mahora94 より:

2022年5月28日 12:20 PM

fbdf

返信

nira-012.mahora94 へ返信するコメントをキャンセル

Artist

nira-012.mahora94

よろしくお願いします

Java Scriptを使ったコピペ地獄の回避方法

comment

コメントを記入

nira-012.mahora94 へ返信する コメントをキャンセル

nira-012.mahora94 へ返信するコメントをキャンセル