【jQuery】実務に学ぶプログラミング独学勉強法【題材公開】

「javascriptの基礎は理解できたが、次は何を勉強すればいいかわからない」その気持ちよくわかります。

「jsからプログラミングに入り、参考書の入門編は読み終わった」なんて方向けに勉強題材を公開しながら勉強方法を解説しています。

独学に疑問を持ちだした方は参考にどうぞ。

よく質問される事を最初に回答しておきます。

プログラミングの独学は可能ですか？

可能です。

参考書もたくさんありますし、何よりネットに情報が溢れています、安心してください。

やる気次第でなんとでもなります。

ということで本題に入りましょう。

javascriptで何を勉強したらいい？

そもそも何を勉強するのが正しいのか？という疑問ですが答えはないと思います。

ただ、今思うのは「実務で使うことを勉強しておけばよかったな」です。

つまり、

javascriptに限らず実務でよく使うことを勉強すれば間違いない、可能であれば制作物にしてしまう

これには3つのメリットがあります。

実務で使えるスキルは面接でも高評価
制作物にしてしまえば資格以上の価値
入社してからの業務がスムーズになることも

素晴らしいですね。

ただ、一つ問題点があります。

実務で使える勉強って何よ？

当然の疑問です、そもそもそれがわからないんだよって事ですよね。

こういう時に一番良いのは

知り合いの実務経験者や現役の人に聞く

これが一番手っ取り早いです、なんなら独学の方向性も教えてもらいましょう、こんなブログ読んでいる場合じゃありません、今すぐ連絡を！！

すぐ聞ける仲の人がいるあなたはとんだ幸せ者です、やっていれば分かります、その有難さに。

「知り合いっていっても仲が良いわけじゃないから」

そんな事言ってる場合じゃありません、知り合いがいるだけで奇跡、幸運だと思いましょう。

躊躇せずに今すぐ連絡してください、もし無視された時はこの記事に戻ってきましょう。

知り合いに誰もいない

気を落とさないでください、いない人がほとんどです、私もその一人でした。

私が苦労した部分でもありますので、同じ境遇の方の助けになれればなと思い本記事を書きました。

ということで、長くなりましたが本記事の肝です。

実務で使える勉強題材はこれ。

js(jQuery)によるGoogleMapの実装

実務でよく使われている、つまりサイトでよく実装されている事を勉強すればいいわけです。

その一つがGoogleMapの埋め込みです。

実装するだけならネットで拾ってコピペすれば可能ですが、今回はタイトルにあるように「実務に学ぶ」とありますので単純ではありません。

縛りというか要件を何点か挙げておきます、課題と思ってもらえればいいです。

GoogleMapにマーカーの複数表示
データフォーマット「json」の使用
検索ボタンの実装
情報ウィンドウの実装

それぞれ説明しますね。

GoogleMapにマーカーの複数表示

通常マーカーの設置は一つだけですが、

支店、店舗ごとにマーカーを設置しなければならない、なんてことも少なくないのでマーカーは複数設置してみましょう。

建物を10挙げます、以下をマーカーに設定してください。

北海道	札幌市時計台
北海道	さっぽろテレビ塔
東京	東京タワー
東京	スカイツリー
大阪	あべのハルカス
大阪	通天閣
兵庫	神戸ポートタワー
兵庫	姫路城
京都	清水寺
京都	二条城

データフォーマット「json」の使用

データと処理を分けて行うことが目的です。

なんじゃそりゃ？と思った方は調べてください、それが勉強になります。

先ほど挙げた建物に関する情報、つまりデータをjsonに保存します。

jsファイル内に同じようなデータ、配列をずらーーっと記述することがないようにお願いします。

なぜ分ける必要がある？

一つの情報に対してなら分ける必要はないかもしれません、しかし、情報が10,100といったように増えたり変更しなければいけない時に直接記述していたのでは効率が悪いからです。理由を挙げればたくさんあります。

jsonで困ったときは下記を参考にどうぞ、結構ドンピシャかもしれません。

【初心者向け】JSでJSONが読み込めない!?エラーの原因はこれ

【超簡単】jQueryでJSONを読み込む方法【コピペOK】

jQueryでJSONを読み込み配列に入れ直す方法【簡単実装】

検索ボタンの実装

検索ボタンとなるものを、GoogleMapとは別にマークアップで作成します（マップの上にでも）

検索ボタンのイメージ

このボタンにはクリックすることで対応のエリアにマップ移動する機能を持たせます。

実装することで、大まかなエリアをスクロールさせずに移動することができるようになります。

デフォルトは先頭の北海道にしておきましょう、ボタンに関してよくわからないという方は下記を参考にどうぞ。

【jQuery】クリックで状態が切り替わるボタンを実装する【初心者向け】

各エリアの座標はだいたいでいいです、下記のようにでもしておきましょう。

北海道をクリック	札幌市時計台に移動
東京をクリック	東京タワーに移動
大阪をクリック	通天閣に移動
兵庫をクリック	神戸ポートタワーに移動
京都をクリック	清水寺に移動

情報ウィンドウの実装

情報ウィンドウとは吹き出しの事です。

イメージしにくいという方はこちらを参考にどうぞ、GoogleMapAPIの公式です。

表示されているマーカーをクリックすることで、詳細情報が吹き出しで見れるようにします。

最低限表示しなければいけない情報は3つ。

名称（例：東京タワー）
エリア（例：東京）
詳細はこちらボタン（例：公式サイトかwikiにリンクさせる）

こんなとろこですかね。

要件は以上になります。

今回で得られるスキル

GoogleMapAPIを通して得られるスキルをまとめました。

jqueryを使ったクリック処理
jsonファイルの使い方
GoogleMapの実装方法
GoogleMapのカスタマイズ方法

細かく挙げれば他にもありますが、たいだいこんなところでしょうか。

自身のサイトに作成物として上げたり、埋め込めばそれだけで面接の際にアピールできる武器となります。

実務でも使える知識なので頑張って完成させてみましょう。

以上になります。

Twitterでも情報を発信していますのでフォローよろしくお願いします。

不明な点があればコメントからお願いします、もちろんTwitterからでもOKです。