JSが苦手なWebデザイナーに贈る たった2つの克服のコツ

このエントリーをはてなブックマークに追加
シャノン nishino です。
最近、わたくし部署異動しまして、テストの人からサポートの人になりました。
なんのサポートかというと、ウチの製品(Shanon Marcketing Platform)を売ってくれる人向けのテクニカルなサポートを行うことになりました。
是非是非よろしくお願いいたします。

さっそく今回、制作部署向けに JavaScript のお勉強会を実施しましたので、その時に使ったプレゼンテーションを紹介します。




JavaScriptを克服するたった2つのコツ?

今回のプレゼンテーションは技術者向けではなく、制作部署のWebデザイナー向けに作成しました。
なので、以下の人を対象にしています。
  • HTMLやCSSはなんとなく分かるけど、JavaScriptはやったことない人
  • 過去にJavaScriptに挑戦したけれども、さっぱり分からなくて挫折した人

私が提案するコツは以下の2つです。
  • いつ・なにを・どうする?
  • エラーメッセージを読む
これだけです。
以下に簡単に解説します。

コツ1:いつ・なにを・どうする?

「いつ・なにを・どうする?」といきなり言われても何のことやら、、ですが、これは、JavaScriptの要件を定義するのに必要な3つのことを表しています。

Web制作を行う際に、クライアントからの要件を制作物に反映させる必要がありますが、この時に要件が明確になっているとは限りません。
「もうちょっとわかりやすくしてよ」
こんな感じで、何か改善して欲しいということは分かりますが、具体的にどうすればいいのかわからない要件が往々にしてあります。

こういった場合に、「いつ・なにを・どうする?」を明確にすることにより、制作物へ要件を反映させることができます。
たとえば、最初にすべてを画面に表示すると内容が多すぎて分かりにくい場合は、最初(いつ)は詳細(なに)を非表示にしておいて(どうする)、ボタン(なに)をクリックされたら(いつ)詳細(なに)を表示する(どうする)。
といったことです。

「いつ?」は、初期表示時、イベント時、サブミット(送信)時の3パターン

jQueryでは、$( function() { ... } ) 内に以下の内容を記載することで、「いつ処理するか?」を指定できます。
  • 初期表示時を指定する場合は、$( function() { ... } ) 内に特に指定はいりません。
  • イベント時(クリックなど)を指定する場合は、$( function() { ... } ) 内に
    $("xxx").click( function() {...})
    と書きます。
  • サブミット(送信)時を指定する場合は、$( function() { ... } ) 内に
    $("form").submit( function() {...})
    と書きます。

厳密には「初期表示時」も「サブミット時」もイベントですが、要件を詰めるうえで時系列に上記3つのパターンで考えるのが実用的です。

「なにを?」は、jQueryのCSSセレクタで指定

jQueryでは、HTML内の「なんの要素?」を指定する方法としてCSSセレクタを使用できます。
よく使うCSSセレクタとして以下を紹介しました。
  • .class (指定したclass名がある要素を指定します)
  • #id (指定したid名がある要素を指定します)
  • ko mago (指定した子(ko)孫(mago)要素で構成される要素を指定します)

「どうする?」は、jQueryに用意されているメソッドを組合せ

jQueryでは、上記で指定した要素に対して「どう処理する?」を指定するためのメソッドが用意されています。
よく使うメソッドとして以下を紹介しました。
  • hide() …非表示にします
  • show() …表示します
  • val(値)…valueの値を設定します
  • css(プロパティ, スタイル)…プロパティにスタイルを設定します
  • attr(キー, 値)…キーに値を設定します
  • addClass(クラス名)…classにクラス名を追加します

コツ2:エラーメッセージを読む

どんなに経験豊富なプログラマーでも常にエラーを発生させずにコードを書くことは不可能です。
ブラウザにはJavaScriptのエラーメッセージを表示させる機能がありますので、このエラーメッセージを読むことにより、誤りに気づき、正しいコードに修正することができます。

時には全く意味不明なエラーメッセージを読まされることもありますが、alert()関数を使って何度もエラーの箇所を繰り返し調べるうちに、きっとJavaScriptを克服している自分に気づくことでしょう。

まとめ

今回、JavaScriptの入門的な内容として、要件定義のための「いつ・なにを・どうする?」
また、制作を完成させるための「エラーメッセージを読む」をコツとして紹介させていただきました。

実践的なJavaScriptを書けるようになるまでには、今回紹介したjQuery以外のライブラリを使用したり、画面遷移を伴わないajaxといった技術が必要になるかもしれませんが、考え方として上記の2つのコツは有効だと思います。

がんばろー
次の記事
« Prev Post
前の記事
Next Post »
Related Posts Plugin for WordPress, Blogger...