Webデザイン制作をするうえで、動きのあるサイトは少しレベルが「上」に感じます。サイトを見ているとき、メニューが折りたたまれていたり、画像のスライドショーが設置されていたりすると、「かっこいいな」「面白いな」「どうやって作るんだろう」と思っている方もいるかもしれません。
翔泳社では12月15日（火）、そうしたWebサイトに動きをつけられるjQueryの入門書『jQuery標準デザイン講座』を刊行しました。今回、本書の刊行に合わせて、著者の神田幸恵さんにインタビューをお願いし、本書の特徴やjQueryを学ぶときのコツをうかがいました。講師業で培われてきた神田さんのノウハウがふんだんに盛り込まれた本書、jQueryが気になっている方はぜひインタビューをご覧いただければと思います。
また、本書が抽選で5名に当たるプレゼントキャンペーンも実施していますので、ぜひ最後までお付き合いください。
Webデザインにはまったく興味がなかったのに……
――神田さんはいま講師業やセミナーをされているとうかがいましたが、そもそもWebデザインを仕事にするきっかけは何だったのでしょうか。
神田：私はもともと大学卒業後にCG系の学校に通って勉強していました。ですが、1年勉強したあと「なんか違うな」と感じて困っていたんです。大学卒業後に「もう1年遊ばせて」と親に頼んで通っていたので、もう就職するしかなくて……。担任に相談してみたところ、Webデザインの会社を立ち上げたお知り合いの方を紹介してもらいました。「CGに興味がないなら行ってくれば？」と。
でも、実を言うとWebデザインには本当に興味がなかったんです。というのは、その頃のHTMLでは、ネット回線も細くてゲームや映像はとても表現できなくて、CGの仕事のほうがきらきらしている感じがあったんですよ。せっかくCGを1年勉強したという思いもあって、触りで2、3か月働いて気に入らなければ辞めるつもりで仕事を始めました。そのくらい興味がなかった世界なんです。
そんなふうに嫌々Webデザインを始めたわけですが、意外に向いていたみたいです（笑）。入社して初めてプログラミングをやってみたら、面白いと思えたんですよ。それまで学んだことで使えるのがPhotoshopとIllustratorしかなかったので、JavaScriptなどは現場ですべて学びましたが、もしかしたら3か月で辞めなくていいかもしれない……と思っていたら、なんだかんだで今日まで続けてこられました。
――そこからなぜ講師業をされるようになったのでしょうか。
神田：独立してフリーランスで仕事をしていたとき、自分の学校に恩返しというわけではないですが、先生もやりたいなと思ったんです。当初は制作と講師の比率は9:1くらいで始めたんですが、だんだん講師業が面白くなってきて、そのウェイトを増やしていきました。
現在は専門学校の講師として、jQueryだけでなくWebサイト制作に関わるもの一式、HTMLとCSS、Photoshop、Illustratorも教えています。
また、そこからのご縁もあって、転職を考えている社会人の方、自活したい女性など、仕事に結びつくスキルとしてWebデザインを勉強したい方向けのセミナーを始めました。コワーキングスペースを自分で借りて行なっているので、半年や1年という単位ではカリキュラムを組めませんから、1日でできることを教えています。ちょっとHTML、ちょっとCSS、そしてその中で「ちょっとjQuery」というのもあったわけです。月1回で順繰りにやっていたところ、担当編集の諸橋さんに見つけていただき、それがきっかけで本書を執筆することになりました。
本書もそうなんですが、名前を出すことで自分の仕事にレビューや評価がつくじゃないですか。だから、名前を出すことにものすごく躊躇しました。でも、出してみたらさまざまなご縁が生まれたり、ほかの仕事が増えたりしたんです。去年の自分を振り返ると、勇気を出していろいろ始めてみて偉かったと思いますね。去年のいま頃は、まさか本を出しているとは絶対に想像もしていなかったですね。
学生やセミナー受講生のつまづきどころを想定した内容に
――本書はどういう方を対象にしていますか？ 講師業が活かされているところもあるのでしょうか。
神田：講義では毎回対面で教えているので、学生がどこで引っかかるのか、どういうことをやりたいのか、なんとなく掴めるようになるんですよ。ですから、学生や私のセミナーに来てくれる方を想定して書きました。
学生だといろいろ詰め込んで学んでいきますが、社会人だと時間も少ないので順番に学んでいきますよね。Webデザインの場合、とりあえずHTMLとCSSをやって、その次に触るのがjQueryのプラグイン、というパターンが多いです。ただ、出来合いのプラグインを自分のサイトに入れてみても、そのサイトのソースコードと相性が悪かったり思いどおりのものにならなかったり……。結局皆さん、実はプラグインのほうが遠回りだということに気づくんですよ。で、自分で本を買ったりネットで探したりして自力でjQueryを書こうとする。そうすると「$」や「function～」といった見慣れないコードがいっぱいあって分からない、となってしまうわけです。
――jQueryを学び始めた方はどこでつまづいてしまうのでしょうか。
神田：よく英文法に例えて説明するのですが、初めは単語から覚えていくんですよ。jQueryの「セレクタ」や「メソッド」は、英語でいうと名詞や動詞です。次はそれを使ってI am a boy.など簡単な短文を作っていく。jQueryなら簡単なサンプルプログラムですね。そこまでは誰でも楽しそうにやっているんですが、いきなりそれを応用して何か複雑なものを作ろうとすると、20分くらいで雲行きが怪しくなってきます（笑）。
なので、本書ではまず簡単な文法と簡単なサンプルから、少しずつ学んでほしいなと思っています。英文法のように、構文と主語・述語が分かれば、そこから簡単な文章を作れるようになって、そうしたら長文を書いてみましょうというステップを辿ってもらえます。
また、jQueryはHTMLやCSSと違ってデリケートで、セミコロンが1個ないだけでもまったく動作しなくなります。ブラウザの検証ツールを使えばエラーの原因を教えてくれますが、エラーメッセージはすべて英語なので、英語が苦手な方だと拒否反応があります。なので、最初の入り口を上手に作らないと、苦手意識が消えなくて永遠に嫌いになってしまうんですよ。ちょっとずつちょっとずつステップアップしながら先に進められるように気を遣いました。
jQueryを学ぶ最初の入り口を最も丁寧に解説する
――僕もHTMLとCSSはそれなりに分かりますが、jQueryとなると……という1人です。最初にくぐる入り口を間違った可能性もありますね。本書だとどの章が入り口にあたるのでしょうか。
神田：「Chapter02 jQueryの文法」のLESSON 03と04です。基本的な文法をLESSON 03でかなり手厚く書いています。構文を学んだあと、名詞・動詞的な語彙を増やしていくようにしていて、どんどん表現を豊かにするために形容詞・副詞的な語彙を学べるようにしています。
本書で使われているjQueryの主語・述語はすべてLESSON 03に登場しています。本書を読み通す場合には、いちいち別の資料で調べなくても、この章を押さえておけば大丈夫です。繰り返して開くページになるんじゃないでしょうか。
LESSON 04ではJavaScriptの最低限必要な事柄を説明していますが、ここもやはり苦手な方がとても多いので、私なりに丁寧に解説しました。この二つのLESSONで、本格的に学ぶための道具立てができるようにしています。
その後、学んだ語彙を組み合わせて形になるものを作りましょう、というのがChapter 03以降ですね。制作するサンプルには、アニメーションするメニューやスライドショーなど、どれも最近のWebサイトでよく見かけるような見栄えのいいものを選びました。
Chapter 03では短文で簡単に作れるものを紹介していて、Chapter 04ではもう少し複雑になります。Chapter 05ではJavaScript本来の仕組みも使っているので、またちょっと難しくなります。Chapter 06や07では計算や構造など、論理的な思考を必要とするものを作っていきます。後ろのサンプルほど難度は高くなっていきますが、全部手を動かしながら読み通してほしいですね。
jQueryの解説書には、プログラミングの基礎や文法に注力している本や、逆にプラグインをたくさん使ったサンプル集のような本はたくさんありますが、本書のようにプラグインを使わずに自力でjQueryのソースコードを書きながら、見栄えのするサンプルを作って学べる本はほかにあまりないので、手を動かして楽しく学びたいならおすすめです。
独学でも美しいソースコードを目指してみる
――本を読んで独学するうえで、直接教わるのと違う難しさはありますか？
神田：エラーを見つけるのがたいへんですね。例えば、たった1文字のエラーは自分ではなかなか見つけられません。学校だと友達や講師が見てくれますので、そこをどう乗り越えるかは課題かもしれませんね。一度つまづくとほったらかしになって、戻ってきてもらえないこともありますが、そうならないように工夫はしました。
例えば、最初から最後まですべてソースコードを書いてから、さあ動かしてみましょう、といっても動くことはほとんどないんですよね。全部書いてからエラーを探すのはとてもたいへんなので、本書ではできるだけ手順を細かく分けて、ソースコードに書き加えた構文がどういう動作や表示になるかを一つ一つ確認しながら進めていく形にしています。
同じ動作でも実装の方法はいくつかありますが、本書ではなるべく少ないソースコードとメソッドでできる方法を紹介しています。独学だととりあえず動くものが作れても、ソースコードに無駄があったり、もっと楽に書けたりするものも多いので、美しいソースコードになるように学んでみるのもいいと思います。
みんなで技術を共有できたら楽しい
――ここまでお話をうかがって、神田さんは教えることがとてもお好きなのだと感じました。最後に、今後のご自身の目標を教えていただけませんか？
神田：個人的には、Web制作は女性支援にすごくいいと思っています。女性の社会参画がまだ充分整備されていない中で、女性が自宅で子育てをしなければならない場合でも、Web制作ならうまく仕事を取れれば、自宅で作業ができますからね。それにデザインの配色、造形は女性のほうが上手なときもあります。
私のセミナーには、けっこう重いものを背負っている方もいらっしゃいます。離婚してこれから仕事を見つけようとしている方や、両親の介護をしながら仕事をしないといけない方……。そうした方々がWebデザインをできるようになれば、自活できるようになるかもしれません。本書を通じてその支援ができればいいですね。
あと、地方だと本は届きますが、セミナーみたいなものはほとんどなくて最新情報がなかなか手に入れられないこともあるので、そういうところに呼んでもらえるようになればいいなと。みんなで技術を共有できたら楽しいなと思いますね！
抽選で5名に書籍プレゼント！
『jQuery標準デザイン講座』の刊行を記念して、プレゼントキャンペーンを実施します。ご応募いただいた方の中から抽選で5名に本書をプレゼントいたしますので、下記リンクの応募フォームに必要事項を入力のうえご応募ください！
【応募締切】 2016年1月7日（木） 23:59
【当選発表】 当選者のみに、後日メールにてご連絡いたします（1月下旬予定）
募集は締め切りました
