kaiki.blog Written by KAIKI

jQuery 最高の教科書 動かない

プログラミング

こんにちは

KAIKI です。
プログラミングを学習してます。
初学者の方には参考になるかもしれません。

  • jQuery 最高の教科書で勉強してて動かなくて萎える
  • Jsonのところで動かない

と悩んでいる方に見て欲しいです。

記事の内容

動かないを改善できます。

jQuery 最高の教科書

自分も勉強してて動きませんでしたが何時間もかけてできるようになったのでここに書きたいと思います

jQuery 動かない

ではまずjQueryが動かないよって人

結論ですが、スペルミスで動かないことがほとんどです。

自分も読み進めつつ手を動かすのですが、後半につれコードの量が多くなってきますよね。
しかも、全然理解ができないのでわからない自分にムカついたりしてそんなことをしてる間に間違ってたりするんですよね。

なのでまずは、スペルがあっているか細くチェックしましょう。
それでも動かない場合は、サンプルファイルをコピペして自分の書いたコードと照らし合わせると確実です。

やり方ですが、簡単です。

自分の書いたファイルにサンプルファイルをコピペして間違ってそうな箇所にクリックして範囲指定してやると、同じ箇所も同じように色が変わってくると思います。そして途中で色が途切れたりすると同じではないということなので間違っているとなります。
これでスペルミスは無くせますね。

魔のChapter06

次は、JSONが出てくるCHAPTER06でつまづく方が多いんではないかと思われます。
ここを解説します。

結論は、ローカル開発環境を作りましょう。

Chapter06−2の下に、動作に関する注意点があります。そこには、ローカル環境のブラウザによっては動作しないがFireFoxであれば動きます。確認してますのでとありますが、自分の場合は動きませんでした。それでも動かない場合はサーバーにアップロードしてください。アップロードした場合はブラウザに関係なく問題なく動作します。と書いてあります。なので、サーバーを借りてそこにアップロードしてもいいのですが、ちょっとハードルが高いですよね。ですが、ゆくゆくはサーバー借りてブログ書くんだって人は借りちゃうってのもありです。https://business.xserver.ne.jp/
こちらからドメイン取得できます。お名前.com

ですが、無料でできるのなら無料がいいですよね。本の最初に書いてて欲しいぐらいです。もし、学習の前にこの記事に出会えたならあなたは、ラッキーです。なぜなら自分はこの答えにたどり着く前に、半日潰してしまいました。

繰り返しですが、ローカル開発環境を作りましょう。

ちょっと難しく感じるかもしれないですが、大丈夫です。
早速やっていきましょう。

ローカル開発環境

まず、ローカル開発環境を作るのにはいくつか方法があるのですが、ここではCloud9を使います。
https://aws.amazon.com/jp/cloud9/

開いたら右上のサインアップのところからアカウントを作成してください。
ここで申し訳ありませんが、完全無料ではありません。
12ヶ月の間だけ無料なので気をつけてください。

やることはこれらです。

  • 登録
  • ログイン
  • グループ作成
  • ユーザー作成
  • アカウント設定

よくある登録の形ですが、初見では分かりづらいと思いますので解説します。

まず、メールアドレス等登録してください。

ログインできたらサービスのところで IAM と検索してください
IAMにいったら、グループを作ります。名前はなんでも大丈夫です。ポリシータイプはセキュリティの観点からCloud9Userって検索して出てくるポリシー名にしてください。

次に、ユーザーを作ります。
ユーザーを追加ってところをクリックして、ユーザー名を決めてアクセスの種類を選択ってところはマネジメントコンソールってところをチェックします。
パスワードは自動生成にしておいて後で変更します。
次の画面に映るとユーザーをグループに追加が出てくるのでチェックを入れる。
タグを入れることができるのですがとりあえずは必要ないのでなしで大丈夫です。
そしてパスワードを自動生成してくれるのでこれをコピーしておきます。これでユーザーが作成できました。

次にパスワードポリシーを設定します。上から4つぐらいをチェック入れときましょう。
ダッシュボードに戻り、サインインURLがあるのでここからログインしましょう。そこで新しいパスワードが作れるので先ほど設定したパスワードポリシーに沿って作りましょう。

ログインできたらサービスからCloud9を検索、開いて右上にある時間帯場所を東京に変更しておきましょう。そしたら、Createボタンを押して名前を決めれるのでWorkspaceとでもしておきましょう。次に行くといろいろ出てくるのですが触らずにつぎへ行きます。確認画面が出てくるので確認し、Createしましょう。

これでローカル開発環境が構築できました。お疲れ様でした。