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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

コーディング規約

コーディング規約とは、コードの書き方についての決め事のことです。 文法のことではなく、そのチームなどの中の約束事としてどのような書き方で行うかを定めるもの。 項目の例として、関数や変数の命名規則、コーディングのスタイル、括弧やインデントの書き方などが挙げられます。

Q&A

解決済

6回答

1875閲覧

【JavaScript】様々なJSをHTMLの中に書く場合、どう見やすくする?

nnahito

総合スコア2004

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

コーディング規約

コーディング規約とは、コードの書き方についての決め事のことです。 文法のことではなく、そのチームなどの中の約束事としてどのような書き方で行うかを定めるもの。 項目の例として、関数や変数の命名規則、コーディングのスタイル、括弧やインデントの書き方などが挙げられます。

1グッド

0クリップ

投稿2016/08/29 03:49

質問概要

jQueryのajaxや、.clickを多用したWebページの、見やすさはどのように行っているのか?

質問詳細

独学でフレームワークなどはほとんど触れたことがありません。
jQueryくらいです。

その、jQueryを多用したWebページを作っているのですが、<script></script>の中身が200行以上あり、とてつもなく見難いです。
特に私は、BASIC言語(VBではありません。N88です)スタートの人間なので、完全なる手続き型人間ですので、余計に……

今、現役のエンジニアさんはどのようにそういった、イベントや処理を分けて見やすくしているのでしょうか。
何かフレームワークを使うと、そういったものがまとめられるのでしょうか。

それともこれ(script内が200行以上など)が普通なのでしょうか。

これから社会人エンジニアとして働く私にアドバイスをいただけると幸いです。
よろしくお願いいたします。

matobaa👍を押しています

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

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

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

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

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

kei344

2016/08/30 03:05

同じコメントを書くくらいなら質問文に追記してはいかがでしょうか。
guest

回答6

0

反抗期ですので、あえてHTML内に全部詰め込んでも綺麗に見える(かもしれない)方法を伝授しましょう。

Slim + SASS + CoffeeScript

これです。SCSSではなくSASSを使うのがコツです。これらは全てインデントブロックです。そう、Pythonのように美しいコードになります。Slimの中に全部書けるので、何も怖がる必要はありません。

Slim

1doctype html 2html 3 meta charset="UTF-8" 4 title Slimはすばらしい 5 script src="https://code.jquery.com/jquery-3.1.0.min.js" 6 sass: 7 ul.nonestyle 8 list-style-type: none 9body 10 h1 すごよね? 11 button#agree 同意 12 ul#say.nonestyle 13 coffee: 14 $('#agree').click -> 15 $('#say').append '<li>その通りだ!</li>'

これならどんなに長いコードでもすっきりしているように見えるような気がしませんか?

投稿2016/08/29 13:14

raccy

総合スコア21733

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

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

nnahito

2016/08/30 02:59

ご回答有り難うございます。 なんということでしょう! 見た目すっきりですね!! しかし、Slim も SASS も CoffeeScript も、初めて聞きました…… 面白そうなので勉強してみようかと思います
guest

0

ベストアンサー

「コールバック地獄」に陥っているのでしょうか。Promise を使うと地獄から抜け出せるらしいです。

おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ(追憶)
AjaxとPromiseの実験 - Ajaxの順次呼び出し、並行呼び出し

コーディング規約とかも知りたいです。
Promiseは私も勉強中です。
設計についても模索中です。どう網羅的にイベントハンドラを設定するか、どうテストするか、などに興味があります。

投稿2016/08/29 05:47

matobaa

総合スコア2493

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

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

nnahito

2016/08/30 02:57

ご回答有り難うごいざいます。 「AjaxとPromiseの実験 - Ajaxの順次呼び出し、並行呼び出し」の方読ませていただきます。 ありがとうございます。 ざっと見て難しそうだったのでそっとページを閉じました(逃避
guest

0

行数でいえば、どんな処理が必要なのかによるので多い・少ないは言えないと思いますが、
見やすくしたり、メンテナンスや再利用がしやすくなるようにするためには、
なるべく少ない処理で関数を切り分けるのが良いと思います。

たとえば、

数字を入力する→入力された数字から計算する→計算結果を表示する

というような機能を作るとき、
ひとつのfunction()の中ですべて完結させるのではなく、

①数字が入力されたときに実行されるfunction()
②入力された数字を計算するためのfunction()
③結果を表示するためのfunction()

というふうに分けておき、
必要なときにそれを呼び出すようにするなどです。

似たような処理を行うけれど一部の処理が異なる、という機能を作る場合にも、
共通の処理部分は同じfunction()を呼び出しして再利用することができます。

これをやるとむしろ行数は増えるかもしれませんが、
無理やりひとつのfunction()の中であれこれ分岐したり判定をするよりも、
実行される処理の量は、極力必要な部分のみに減らすことができます。

投稿2016/08/29 04:04

NatsumiOki

総合スコア1298

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

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

nnahito

2016/08/30 02:52

ご回答有り難うございます。 なるほど、機能によってfunctionを分ける、ということですね。 しかし、jQueryのajaxをfunctionの中に書いたとして、returnで取得された値を返すことができないため(非同期処理なので…)、どうしてもajaxの通信を行いたい回数だけ$.ajaxの記述が増えてしまいます…… これはやはり回避できないのでしょうか?
NatsumiOki

2016/08/30 03:27

あなたがそっ閉じしたmatobaaさんの回答にあるpromiseをきちんと勉強したほうがよいと思いますね。
nnahito

2016/09/01 03:56

ご回答有り難うございます。 なるほど、ありがとうございます
guest

0

基本的に外部ファイル化

html

1<script src="/path/to/file.js" ></script>

として外部ファイルとして読み込むですね。

ライブラリとしてある jquery-3.1.0.js は1万行を超えてます。

追記

内部だろうが外部だろうが

javascript

1$(function(){ 2 $('selector').on('click', function(){}); 3});

のように イベント設定は onload 後に設定されるように記述します

投稿2016/08/29 03:55

編集2016/08/30 04:25
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

nnahito

2016/08/30 02:48

ご回答有り難うございます。 コメントが一緒になってしまい申し訳ないのですが、 例えば、外部ファイル化するとしてどのように行いますか? <button id="hoge">click</button> $("#hoge").click(function(){ ~~~~ }); のような場合、外部ファイルとすると使えなくなってしまうと思います。 上手くまとめるにはどのように書いていらっしますでしょうか?
guest

0

普通に外部ファイル化すればHTMLを汚すこともないので問題ないのでは?
もちろん機能ごとにユーザー関数を設定してもよいかと思いますが
jQueryのコンセプトから考えると冗長に書きがちですよね

投稿2016/08/29 03:52

yambejp

総合スコア114572

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

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

nnahito

2016/08/30 02:48

ご回答有り難うございます。 例えば、外部ファイル化するとしてどのように行いますか? <button id="hoge">click</button> $("#hoge").click(function(){ ~~~~ }); のような場合、外部ファイルとすると使えなくなってしまうと思います。 上手くまとめるにはどのように書いていらっしますでしょうか?
guest

0

JavaScriptは便利ですが、どうしてもクライアントにソースコードを渡す事になる為、可能なものはサーバ側で処理するようにはしていますね。
ajaxでデータを取得したりすることは当然として、データのvalidationもajaxでサーバ経由でやる事も出来ます。

ただまぁ、一歩目の対応としては、yambejpさんが言っているように外部ファイル化する事です。
1ファイルのコードが増えることに関しては、実処理は別ファイルとして読み込み、イベント発生時のコールバックで、無名関数ではなく別ファイルに用意したファイルを使う、等。

jQueryを使っていると、まるでそれが当然と言うように無名関数が使われ、コードは見辛くなりますので。
コレなんでなんでしょうね。確かに個別関数化する必要もない局所的利用のfunctionもあるにはありますが、逆に分けた方がよさそうなモノまで無名関数化する文化がある気がします。

投稿2016/08/29 04:11

kunai

総合スコア5405

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

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

nnahito

2016/08/30 02:53

ご回答有り難うございます。 「無名関数」、名前は存じ上げているのですが、当方使ったことが無いですね…… 視覚的にわかりにくそうだったので、避けております。 また、コメントが一緒になってしまい申し訳ないのですが、 例えば、外部ファイル化するとしてどのように行いますか? <button id="hoge">click</button> $("#hoge").click(function(){ ~~~~ }); のような場合、外部ファイルとすると使えなくなってしまうと思います。 上手くまとめるにはどのように書いていらっしますでしょうか?
kunai

2016/08/30 04:17

何の問題もなく外部ファイルで使えますよ。 test.js--------- $(document).ready(function() { $("#hoge").click(function(){ console.log('clicked'); }); }); test.html----------- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="test.js"></script> <button id="hoge">click</button> 上記コードで動作確認してみてください。
nnahito

2016/09/01 03:55

ご返信有り難うございます。 少し書き方がまずかったですね…… ようは、 $("#hoge").click(function(){ のように書いてしまうと、別のHTMLで同じjsファイルを読み込んだ時に、 同じIDが使えなくなるので、不向きかなと思ってしまったのです……
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問