皆さんは「調べ物してぇ〜！！！」と気が狂ったように思い悩んだことがありますか？
僕は2分に一回ぐらいあります。
さて、今回はいろいろと思うこともあり、前々回にご紹介しましたもっともっと紐解きたい「HTML」。名前の意味を知ったなら、今度はそのルールを理解しよう。の記事の続きではなく、意外と難しい調べ物のコツを紹介したいと思います。
弊社は主にwebに関する製作会社ですが、僕のようにフロント業務を担当していると、html、css、javascript…だけではなくブラウザやOSの特性やスマホやタブレットの画面仕様、さらにはASPやオープンソースソフトウェアの構造や仕組みなど、webに関する様々な知識を頭に入れておかなければなりません。
しかし、我々は森羅万象を知り尽くした超人ではないので、わからないことは調べなければなりません。
その調べ方にもコツがあるのです。これを知っているか知らないかで業務効率が変わってくると思われます。
そして、今回お話する内容はインターネットで検索する際のコツを述べようと思います。
はじめに
僕は精神論なんか大っっっ嫌いなんですが、
それでも一部、ほんの一部理にかなっている部分があると思います。
それは、根気よくというものです。
例えば、htmlとcssを学びたての初学者が陥りがちなfloat崩れる問題。
縦に並べた要素を横に並べたいとき使うcssのプロパティfloatですが、そのまま対象の要素にfloat:left;などを適用してしまうと、もしその要素の下に更に別の要素が存在していた場合、その要素が迫り上がってきてレイアウトが崩れてしまう…などという経験を誰もが経験したことがあるのではないかと思います。
その時にどう解決したらいいのか。
webに限ったことではないですが、何かを習得する時、
自分で解決する能力があるに越したことはないと思うのです。
さて話を戻しますが、このfloat問題。皆さんならどう解決しましょうか。
単純に「float 崩れる」と検索した場合。
多くはclearプロパティやclearfixについての解説があるでしょう。
そしたら次の疑問はclearって？clearfixって？という疑問が出てくるかと思います。
そうしたら次は「css clear」や「clearfix 仕組み」など検索するのではないでしょうか。
はじめに伝えておきたいのは、『インターネットで検索をかけてもすぐに答えには行きつかない』という前提です。
それっぽいことを見つけても、それが正しい情報とは限らない。
単純にケースにそぐわない情報を載せている場合もありますし、そもそも情報が古い場合もある。
簡単に答えが見つかるなら、皆こんなに苦労はしません。なんなら世の中には技術力に溢れた人でいっぱいになってしまいます。
数分以内に欲しい解答が見つかれば万々歳、検索かけて一発でたどり着ければ超々ラッキーです。
なので、調べ物が何にせよすぐ見つかるわけないということを念頭に入れておいてほしいのです。
つぎに
さて、件のfloat問題ですが、
一例として表示が崩れているから「float 崩れる」で検索
↓
clearプロパティやclearfixなどの単語が出てきたから「css clear」や「clearfix 仕組み」
などで検索し、そうしたら次はやたらと出てくる「回り込み」や「親の高さ」という単語がでてきます。
書き手が簡略化してわかりやすく言語化しようとした言葉の筈なのに、却ってわかりにくくなってしまっているという現象が割とよく起きてしまいます。
そして、「フローティングボックス」や「非不動ブロック」など、聞き馴染みのない言葉に行きついてしまって余計に混乱する始末…。
個人的な所感なのですが技術系の記事はおおよそ閲覧者がある程度の知識を持っている前提が多く、そのため初学者には調べるという行為のハードルが高くなっているのかと思われます。
確かに、記事を書く側からしたら一々説明しなきゃならないのかという煩わしさもあり、分かっている人が見てくれればいいという感覚もあると思います。
だからこそ、初学者にも調べる力が必要なのだと思います。
さらに、つぎに
「マンダラート」というアイデア技法をご存知でしょうか。
3×3の計9マスの正方形を紙に書き起こし、中心のマスにテーマとなる思考や発想を深めたい課題を決め、その周りにある8マスにテーマから連想される単語を記入し、9マス全て埋まったらその記入した8マスの単語から1マスをまたテーマとして選定し、そこから3×3の計9マスを書き起こし、先ほど選んだ1マスの単語を中心に、その単語から連想される単語を残りの8マスに書き起こしていく…というアイデアを思い浮かべるための方法です。
なぜ唐突にこれを説明したかというと、常にこれを脳内で再現できる思考回路を持ち合わせた方が、調べ物をする際に有利になるのではないかと思うのです。
(慣れない内は実際に紙に書き起こしても全然良いと思います)
float問題にしても、
みたいな単語を連想するパターンもあるかもしれません。
そこで考えて欲しいのが
「崩れる」「clear」「回り込む」などの単語を検索したところでで自分の欲しい情報が出てくるのか？
ということです。
「崩れる」「clear」「回り込む」に関しては、htmlやcssだけでなく日常的にも使われている単語なので、
得られる情報は少ないと思われます。
そこで、単語を組み合わせてみましょう
「clear 崩れる」
「clear 回り込む」
まだ有益な情報が検索結果としてでてきそうですね。
しかし、上記の単語で検索しても結局
「回り込み」や「float解除」などの言葉が出てしまいます。
ただ、そこででてきた回り込みや解除などという言葉、初学者が聞いてすぐイメージしにくい単語。
言葉は脳内のイメージに直結しますので、webサイトを構築するhtmlという言語の集まりと、その装飾を担うcssがどういうものかなんとなくわかるとはいえ、webサイトの構造に直結しない単語を並べられても、理解がしにくいと思うのです。
では、どうするか。
つぎにつぎに
上述の例だと、行き着く先は「HTMLの仕組み」か「CSSの仕組み」での検索だと思われます。
そこでまた考えてほしいのが、この二択だとどっちがより求めてる答えに行き着けるだろうということです。
仮に、「CSSの仕組み」で検索をかけたとしましょう。
CSSはHTMLを装飾するもので、扱うにはlinkタグでhtmlに読み込ませて、記述のしかたはこうで‥みたいな記事が沢山でてくると思います。floatの問題を解決するのに、適した情報ではないですよね。
なぜかというと、cssの仕組みを知っても、floatがどういう仕組みかはわからないからです。
もっと正確に述べると、解決したい問題は、floatをかけたことによって崩れているhtml
なので、ここでは「HTMLの仕組み」で検索するのが近道だと思われます。
「HTMLの仕組み」だとHTMLがどういう構造なのか、を知ることで今後のCSSの適用の仕方が理解できるようになります。
つまり、CSSの適用の仕方次第でHTMLがどういう影響があたえられるのかが、CSS単体で学ぶより体系的に理解できます。
ここでいいたいのは、自分が何を解決したいのかを見極める能力が必要ということです。
もっというと
例えば、極端ですが単純に「float 意味」などで調べるとしましょう。
当然、検索結果には
という結果が出てしまいます。
単純に検索エンジンがfloatという英単語の意味を翻訳しようとしたからです。
では、どうすればいいか。
一文付け足すだけで、こんなにも検索結果が違ってきます。
要は、得たい情報を得られるように検索文言や条件を絞ることが大事です。
これを身につけるだけでも、ものを調べるスキルはグンとあがります。
そしてさらに自分が解決したい問題の状態、マンダラート的な考え方で状況に適した単語のチョイスを重ねることで、
自身が知りたい情報により近づけると思います。
まとめ
・検索をしても欲しい情報には基本的にいきつかないと思っておいた方がいい
・検索をするにしても、方法がある
・マンダラートを基準に、知りたい情報を切り分けていったら検索条件がわかりやすい
・何かに特化した分野なら、その固有名詞を中心に検索をかける
といった、ところでしょうか。
この「調べるスキル」はなにもwebに特化したものではなく、世の中の何にだって言えることだと思います。
豚挽肉のキーマカレーのレシピを覚えたいにしても「キーマカレー レシピ」だけでは牛肉や鶏肉を使ったレシピも出てくるでしょうし、スパイスから作りたいなら「キーマカレー スパイス レシピ」などというように絞らないと市販のカレールーを使ったレシピも検索に引っかかってくるでしょう。
ちなみに、冒頭に根気よくと述べましたが、それはイメージ出来なくてもわかるまで調べろという強制的な意味ではなく、わからないことが多いから段階を追って時間をかけてわかっていきたいよねっていう話です。
なので、調べてすぐ出てきた単語がわからなくても全然問題ないと思いますし、その上で、効率的なわかっていく過程があるんじゃないかと思います。
それでは。
