JavaScriptができたら工夫の幅が広がるけど、プログラミング基礎から勉強するのもなぁ…。と尻込みしてしまうことはありませんか。今回は、HTML/CSSデザイナーに向けて、JavaScriptの始め方をご紹介します。あなたの手助けになりますように。
ほんの少しでも、JavaScriptを知ってみると楽になる
この記事を読んでくれる方には普段HTML/CSSを使っている方が多いと思うのですが、業務の中で「ほんのちょっとこういう工夫できない？」と以下のようなことを持ちかけられた経験はないでしょうか。
▼inputをマウスオーバーしたときにだけ、入力補助の文章を出してほしい
▼inputでテキストを入力し終えたあとに、入力済みなら背景色を緑、未入力なら赤に変えてほしい
▼スクロールに合わせた要素のフェードインを独自のアニメーションにしてほしい
こういうときに「HTML/CSSだけではちょっと難しい」と困ってしまうと思います。また「ライブラリの導入はできても、そのカスタマイズは難しい」という方もいるでしょう。コミュニケーションが上手な方ならうまく仕様を調整したりして回避するかもしれません。
こういうシーンで「ほんの少しで良いので JavaScriptがわかると手助けになるかもしれませんよ」というのが本連載の主題です。
「プログラミングは難しい」と閉じようとした方、少しだけ付き合ってくれると嬉しいです。というのも、本連載は...
- あくまで「HTML/CSSがわかっている上で、効果的なことを少しだけ学ぶ」というアプローチを紹介します
- 「変数とは」「1から100まで数字を足しましょう」のような話から始まりません。HTML/CSSをいじって遊ぶような方針で進みます
- 未来の可能性を伝えるので「ちょっとやってみようか」と思って欲しいための内容です
基礎から学ばなくてもいい？
JavaScriptはとても身近な言語です。パソコンでブラウザを開くだけですぐ試すことができ、しかも無料です。そして、多くの人がイメージする通りプログラミングのコードを書くお仕事は“時に過酷”にもなり、それゆえに報酬も高くなる傾向が強いです。
ただ、どんな人もいきなり凄腕のプログラマーになることはできないので、少しずつ理解して実力を上げる必要が出てきます。このとき、「プログラミングを基礎から学ぼう」というアプローチだと、ゴールに対して入り口が遠すぎてしまいます。そのため「何のためにこれを学んでいるのか…」と、考えてしまう方が多いと感じます。
この連載を通して「少しずつ進めるステップ」を掴んでいただき、意欲を持った学習に役立てていただきたいです。
お仕事においては「要望をスムーズに実現していく」ことが価値になることは多いです。少しずつ要望へ応えられるキャパシティを増やしていくと次のお仕事にもつながりますし、単価など条件の向上にも繋がるはずです。ポイントを抑えた上で時間やコストをかけられる意識になったときには、ぜひ本格的に学ぶことにチャレンジしてみてください。
少しだけ操作してみましょう
次回は実際にJavaScriptで画面を操作するコツを紹介しますが、今回も少しだけ操作してみましょう。推奨するブラウザはGoogleChromeの最新版ですが、そのほかのブラウザでも同じように実現できるはずです。
■画面のCSSをJavaScriptで操作してみる
今皆さんがご覧になっているエンジニアスタイルのWebページで遊んでみましょう。パソコンなどのブラウザ一つでできるので、ぜひ操作してみてください。
文章中ではエンジニアスタイルの「Pythonの自習でつまずいたら（https://www.r-staffing.co.jp/engineer/entry/20231006_1）」の内容を使いますが、今読んでいるページでも同じことができますので読み替えて操作してみてください。
ブラウザの機能に「開発者ツール」というものがあります。ウィンドウの右上のボタンから、[その他のツール→デベロッパーツール]と選びましょう。
そうすると画面の右に（下に出る方もいるかもしれませんが同様です）新しい操作パネルが開くはずです。このパネルにはいくつかのタブがあるのですが、下図の赤枠で示した[Console]という箇所を選択してください。
準備ができたら、以下の内容をコピペして、Consoleパネルの最後の行のところに貼ってエンターキーを押してください。
document.querySelector('h1').style.border='solid red 3px';
するとタイトルにあたる箇所に赤い枠が付くはずです。うまくできたでしょうか。
ほんの一行ですが、簡単な操作をJavaScriptのコードで実現できました。結果として、以下のようなstyle要素を追加して書いたのと同様の効果が発生しています。
<h1 style="border: solid red 3px;">
■少し意味を確認しておきましょう
document.querySelectorはカッコに続けてCSSセレクタを指定すると、画面からマッチする要素を一つ選択してくる機能（関数：functionと言います）です。CSSセレクタを使ったことがある方は多いでしょう。この内容をpやheaderなどに変えると「画面上の別の要素も変更できる」と予想できると思います。
続く.style.borderは、style属性のborderを指しています。そのborderに対してsolid red 3pxとして値をセットしました。ドットで繋いでいるところが気になる方がいるかもしれません。
イメージとしては以下のような情報の階層構造をたどっています。h1要素の持っている値（属性：プロパティと言います）の階層をたどっている、と考えるとわかりやすいでしょうか。
- [h1の要素]
- id 属性
- title 属性
- style 属性
- border 属性
- backgroundColor 属性
- margin 属性
- …他にもたくさんある
勘のいい方は「borderを他のものに変えたら色々できるのでは？」と気付かれたと思います。その通りで、この箇所を変えるとさまざまなスタイルの操作が可能になります。
スタイル名指定の名前ルール
スタイルの内容を色々と試そうとしたときに、名前づけにルールがあることを覚えておいてください。これはCSSとJavaScriptの文法の違いにうまく合わせるための処理だと考えると良いでしょう。
例えば background-colorを指定しようとした場合には、ハイフンのところで大文字区切りに変えてbackgroundColorとします。実際に先のh1タグを対象にすると以下のようなコードになります。
document.querySelector('h1').style.backgroundColor='yellow';
今回はここまで。上記の操作は画面を更新すると元に戻ってしまいます。ちゃんとした画面を作る場合にはこれでは役に立たないので、次回以降で対応しながらコツなども学んでいきましょう。
今回のまとめ
- HTML/CSSだけだと難しいことをJavaScriptで実現できる場合があり、できることが広がります。
- ブラウザの開発者ツールを利用すると、開いているWebページをJavaScriptで操作できます。
契約社員、客員研究員、フリーランスなどさまざまな立場で開発現場を経験。フロントエンド、バックエンド開発、チームリードやOJTの育成担当まで幅広くこなしてきた。現在プログラミングトレーニング事業を行うサークルアラウンド株式会社を立ち上げ、経営や現場開発を行いながらOJT経験をもとに後進の育成に励み、個人や法人に向けたプログラミングのトレーニングを行っている。ノウハウのコンテンツ化にも取り組んでおり、著書に『ステップアップJavaScript』（翔泳社）がある。
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
