1：n – DETELU Blog

モノを覚えるトキのコツ。

新しくモノを覚える時、それを身につけるコツがあります。自分は何となくこうしてきたというお話です。

1.知らない言葉をなくしていく

何かモノを覚える時、必ず何かを見て（観て）、聞いて覚えると思います。

よく新しい技術を学ぶとき、なんらかのドキュメントを見ながら、もしくは人に聞きながら覚えていくことが多いのですが、必ずぶつかる壁が「わからない言葉がでてくる」ということ。

わからない言葉が説明に入っていると意味がつかめない。なんとなくわかるけどぼんやりと曇ったかんじになります。例えば「この変数名を変えて」といわれても、「変数名」の意味がわからないと、何を変えたらいいのかわかりません。

僕自身、IT業界にはいったときはほとんど言葉を知らない状態で、さらにはじめは何かを誰かに聞けるような状態ではなく、人が話していることを理解するのに時間がかかることが多かったのです。

そこではじめたのは、技術を身につけるよりも「知らない言葉をなくしていく」ことを意識して仕事をするようになりました。

これは当たり前のようですが、目の前に得たい技術ややらないといけないことが積み重なっていると、そちらをどうにかしようとして視野が狭くなり、言葉がどうのなんてあまり気にしません。あまり理解できなくてもそれができるかどうかが重要になってしまいがちになります。

そうなると理解できるような情報ばかりを探し、わからない言葉が多いものはマニュアルを読む気もしません。当然知っている言葉が少ないと、その分情報を得る場所はどんどん狭くなり、自分の理解できるもの・知らない言葉があまりない情報を見つけることにかなりの時間を費やすことになります。

その結果、言葉を知っていれば20・30分もあればできるようなことも、言葉を知らないと調べるだけで1時間なんてあっというまにすぎてしまい、それができるころには数時間がすぎている、なんてこともありました。

なので未経験に近い状態で仕事をしてる人には、今は「技術を身につける」よりもまず「知らない言葉をなくしていく」ことに力をいれるようにすすめています。

これが案外、すっとできる人が少ないのですが、遠回りに感じることが多いのでしょう。
ですが『急がばまわれ』です。まず自分が知らない言葉をどんどん覚えるようにしましょう。

2.とにかく多くの本で目次を確認する

プログラムの技術書を読む、マニュアルをを読む場合、一から順番に読みながら身につけていっている人もよくみかけます。これもいいことなのですが、仕事で多くのことをこなしていく中ではあまりおすすめできません。

無駄に時間がかかりすぎる場合が多いのです。

そこでおすすめする方法は「とにかく多くの本で目次を確認する」ということです。多くの本で目次を確認するということは、大雑把にいうと「できることをたくさん知っておく」ということです。

技術書やマニュアルにはたいていの場合「目次」がついています。この目次だけを覚えていくのです。目次にはその内容の要約されたタイトルがついています。例えばPHPやJavascriptなどの本で目次に「時間を表示する」と書かれてあるということは「PHPやJavascriptでは時間の表示ができる」ということです。

それを覚えておくのです。そしてPHPならでPHPのきるだけ多くの本の目次だけに目を通すようにします。偏った情報しかのっていない、また目次が大雑把すぎる、という本だと全体が把握しにくいので1冊より2冊、2冊より3冊とどんどん目次を確認していきます。

中身はあまり見ません。さらっと目を通し、できるんだなということだけを確認します。実際に「時間を表示する」ことが必要になったときに、内容にしかっり目を通し方法を確認し実際にプログラムをつくります。

目次を次々見ていくとPHPではこういうことができる、Javascriptではこういうことができる、ということがなんとなくわかってくるので、あとはそれを実際に使う時がきたら本を開き実際の記述方法などを覚えていくようにします。

そうすることで覚える情報が少なくてすみ、なおかつ広範囲のことを網羅しやすくなります。

時間を表示するといっても方法はいくつかあり、他のことも一緒に一からいちいち覚えていっていると、だんだんとその方法を覚えるだけで頭と時間がいっぱいいっぱいになってきます。経験や知識が乏しい状態では必要・不必要に関わらず何でもかんでも網にかけて拾ってしまいやすいので、変にあれもこれも覚えようとしてしまいます。

はじめのころはとにかくなにか身につけねば！と、具体的な方法ばかりを覚えようとしてしまいがちですが、まずは「目次」にしっかり目を通し、できることの確認だけしていきましょう。

実際いろいろな技術に少しずつ慣れてくると、「できるかどうか」を広範囲で知っているだけでも、いろいろな「勘」が働くようになります。「これをするためには[あれ]と[あれ]とを使えばいけるな」とか、実現可能かどうかを判断しやすくなります。

もちろん実際にプログラムを書いたり自分自身で経験していくことは重要です。しかし多くのことを隅々まで覚え自分自身で経験していこうとすると、どれだけ時間があっても足りなくなってきます。

「中身はなくても引き出しの数だけは用意しておく」。引き出しがないと中身をいれることもできません。まずは知っておくことで引き出しをつくり、必要があるときに実際にプログラムを書いたり自分自身で経験しその方法を身につけ中身をいれていくといった具合です。

長々となりましたが、これは自分の少ない経験上の話です。十人十色で人によっていろいろやり方はあると思います。覚えたいこと、やりたいこと、やらないといけないことは日々増えていきますが、なにか自分にあったルールややり方をつくって、いろんなことをカタチにできるようになりたいものです。

jQueryを使ってみよう。(基本編セレクタ２)

jQueryセレクタは属性値で指定することもできます。
(属性値とはHTMLタグの性質を表す値のことです。例えば「<img width=”300″ …>」のwidth(属性)に指定された300が属性値です。）
属性値を指定する場合は「$(“[width]“).…」と[ ]で囲みます。

早速試してみましょう。（たくさんあるのでざっくりと紹介していきます。）

まずは属性のみで指定してみます。属性「href」が指定されているものに対し処理を行います。

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryを使ってみよう。(基本編 セレクタ2) - サンプル１</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function (){
	//属性「href」が指定されているものすべて
	$("[href]").css({"color":"#ffffff","background":"#CC0000"});
});
</script>
</head>
<body>
<a href="http://www.detelu.com">DETELUホームページ</a><br>
<a href="/blog/">DETELU BLOG</a><br>
<a href="http://www.yahoo.co.jp">Yahoo!</a><br>
<a href="http://www.google.co.jp">Google</a>
</body>
</html>

サンプル１

「href」が指定されているAタグ、リンクがすべて「白文字で赤の背景」になっています。

次に属性「href」に「/blog/」と指定されているものに対し処理を行います。

… 省略 …
	//属性「href」に「/blog/」と指定されているものに処理
	$("[href=/blog/]").css({"color":"#ffffff","background":"#CC0000"}});
… 省略 …

サンプル２

「DETELU BLOG」のリンクだけが「白文字で赤の背景」になっています。
「[href = /blog/]」と指定することで「href」に「/blog/」のもの、という意味になります。

今度は逆に属性「href」に「/blog/」と指定されているもの以外に対し処理を行います。

… 省略 …
	//属性「href」に「/blog/」と指定されているもの以外に処理
	$("[href!=/blog/]").css({"color":"#ffffff","background":"#CC0000"}});
… 省略 …

サンプル３

=の前に ! をいれると否定を意味します。
なので「href!=/blog/]」は「href」が「/blog/」でないもの、という意味になります。

サンプル３では「DETELU BLOG」のリンク以外が「白文字」になっています。全面背景が赤になっているのは、属性「href」に「/blog/」と指定されているもの以外に対し処理を行うため、すべてのHTML要素（bodyなど）にも処理が行われているからです。

次は2ついっしょにいきます。
「href」の属性値が「/」で始まるもの、「co.jp」で終わるもの、に対し処理を行います。

… 省略 …
	//「href」の属性値が「/」で始まるもの、「co.jp」で終わるもの、に対し処理
	$("[href^=/]").css({"color":"#ffffff","background":"#CC0000"});
	$("[href$=co.jp]").css({"color":"#ffffff","background":"#0000CC"});
… 省略 …

サンプル４

=の前に ^ をいれると〜で始まる、=の前に $ をいれると〜で終わる、を意味します。
サンプル４では「DETELU BLOG」が赤、「Yahoo!」と「Google」のリンクが青の背景になります。

最後に「href」に「detelu」を含むものに対し処理をする方法です。

… 省略 …
	//属性「href」に「detelu」を含むものに対し処理
	$("[href*=detelu]").css({"color":"#ffffff","background":"#CC0000"});
… 省略 …

サンプル５

=の前に * をいれると〜を含む、という意味になります。
サンプル５では「DETELUホームページ」のリンクだけが「白文字で赤の背景」になっています。

今回は以上ですがこのような様々な指定を組み合わせることで、細かくいろいろな処理を行うことができるようになります。
また前回と今回ご紹介した以外にも様々な指定方法があります。

下記の「All About」のJavaScriptページに、サンプルと一緒に紹介されているわかりやすいページがあるので興味がある方はマニュアルページとして活用してみて下さい。

jQueryのセレクタ基本 – ［JavaScript］All About

API/1.2/Selectors – jQuery JavaScript Library（本家ドキュメント）

jQueryを使ってみよう。(基本編セレクタ１)

さて前回jQueryをダウンロードしましたが、今回は実際にjQueryを使う際に必要になる基本セレクタについてを勉強します。

まずセレクタとは何なのかを簡単に説明します。
下記のようなHTMLがあったとします。

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryを使ってみよう。(基本編 セレクタ１)</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
</head>
<body>
<p>Pタグのみの指定です。</p>
<p id="idtxt">Pタグに「id=idtxt」を指定しています。</p>
<p class="classtxt">Pタグに「class=classtxt」を指定しています。</p>
</body>
</html>

このPタグ内のテキストの色をそれぞれ変更する場合、例えばCSSで下記のように指定すると思います。

p {
color: red;
}
p#idtxt {
color: blue;
}
p.classtxt {
color: green;
}

CSSではPタグのみの指定、ID名を割り当てて指定、Class名を割り当てて指定、という風に記述します。

jQueryでもCSSのようにHTMLタグ、ID名、Class名を指定し該当するものに対して処理を実行する、といった記述をします。プログラムで何か処理をする場合、何処に対して何をしろ、という命令を記述します。「何処で何をする」の「何処で」にあたるもの、これをセレクタと言います。（以下セレクタと呼びます。）

それでは上記のCSSをあえてjQueryで記述してみます。

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryを使ってみよう。(基本編 セレクタ１)</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function (){
$("p").css("color","red");
$("p#idtxt").css("color","blue");
$("p.classtxt").css("color","green");
});
</script>
</head>
<body>
<p>Pタグのみの指定です。</p>
<p id="idtxt">Pタグに「id=idtxt」を指定しています。</p>
<p class="classtxt">Pタグに「class=classtxt」を指定しています。</p>
</body>
</html>

サンプル

「$(“p”).〜、$(“p#idtxt”).〜、$(“p.classtxt”).〜」と$(“”)内にHTMLタグ、ID名、Class名を記述し、次にフォントカラーを赤にする、という記述になります。「何処で=$(“p”).」「何をする=css(“color”,”red”)」といった感じです。

またセレクタを複数指定することもできます。「,」カンマで区切るだけです。

$("p#idtxt,p.classtxt").css("font-size","24px");

このようにセレクタの記述方法は、これを知ってないと始まらない！っというとても重要な要素です。CSSを触る方であればすぐにピントくると思うのですが、CSSを触ったことのない方は少し戸惑うかもしれません。上記のサンプル等を少し自分で書き換えてみたり、いろいろ試してなれて下さいね。

次回も引き続きセレクタについて勉強していきます。