peeks-blog

自分用メモ

※参考：JavaScriptとは？出来る事やライブラリについて

jsやjQueryでエラーで動かない時の対処法

JavaScriptやjQueryといったフロントエンド言語を使っていて
「うまく動かない」「原因がわからない」といったことは
初心者にはよく出てくるし、現役エンジニアでも珍しくない。

この場合、現役エンジニアがどのように調べているのかを解説。

①コンソールでエラーがないか確認する

ディベロッパーツールの「console」を見てみる。
エラーの種類は、JavaScriptが原因のものもあれば、
サーバーとの通信に失敗した場合のエラーも表示されるので、
JavaScriptのエラーだけを見ること。

コンソールにはエラーメッセージが表示される。
表示されたメッセージをコピペしてGoogle検索にかけて、
コードを修正していけば大丈夫。

②処理がおかしい箇所を特定する

ケアレスミスのこと。

「Console」にコードを入れると、左側に「ログの結果」が、
右側に「そのログの処理の場所」が表示される。
クリックすると、そのログの処理の場所が見れる。
こうして確認すると、どこの場所で間違えたかが分かる。

③デバッグをしてみる

デバッグとは、「バグ（不具合）を見つける方法」のこと。
処理を１行１行止めながら、ステップ実行ができるのが特長。

やり方は以下の通り
①「Sources」タブを選択
②左側のjsファイルを選択
③上の中央の画面に、jsファイルの中身が表示されるので確認する
④行番号をクリックすると、その箇所で処理を一旦止める事ができる。

jQueryとは？

jQueryは、JavaScriptを使いやすく拡張したもの
jQueryの中身は、ごく普通のJavaScriptである、とも考えられる。

「jQuery」と「JavaScript」は異なる言語ではない。
jQueryは、単なるJavaScriptのプログラムでしかない。

jQueryで出来ることは、JavaScriptでも実現可能。


用途としては、WebサイトやWebアプリの制作で用いられる事が多い。


jQueryを利用するには、jQueryファイルを読み込む必要がある。

読み込み方法は以下2つがある。
①ファイルをDLしてから読み込む
②Webから直接jQueryファイルを指定して読み込む

jQueryで出来ること

・Ajax：外部ファイルを動的に読み込む
・属性や要素の操作
・フェードイン、フェードアウト等のスライドショー
・マウスオーバーでの画像エフェクト
・メニュー機能の増加ソートや検索機能の制作
・イラストやグラフ、図形などの描写
・SNSシェアボタンの設置
・リアルタイムで動く画像の作成
・レスポンシブデザイン対応




・フォトギャラリー：
→09→gallery→finish→index.html

・スライドショー：
→10→slideshow→finish→index.html

備忘録メモ

jQueryは「ライブラリ」である
ライブラリとフレームワークはややこしいので違いを理解する
※参考：ライブラリとフレームワークの違い