エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

【DAY12】コーディング後の品質を担保するテスト【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY12課題】コーディング後の品質を担保するテスト

DAY12の課題は「コーディング後の品質を担保するテスト」です。

 

品質保証、テストに関する用語の確認

品質保証、テストに関する用語の確認です。

W3Cとは?

W3Cとは、WEB関連のルールを決める団体です。

HTML、CSSのルールも彼らが決めています

※例えば「どういうタグを使うと、ウェブブラウザでどう表示するか」とか

正式名称は「World Wide Web Consortium」。WWWで用いられる技術の標準化、相互運用性の確保を目的とする団体です。HTML、URI、XML等の技術もW3Cで標準化されました。

1994年10月に発足し、現在はマサチューセッツ工科大学計算機科学研究所(MIT/LCS)、慶應義塾大学、欧州情報処理数学研究コンソーシアム(ERCIM)がホスト機関として共同運営しています。世界各国のベンダー、プロバイダ、研究機関、政府など、約450の組織が会員として活動に参加しています。

インターネット用語1分解説~W3Cとは~ - JPNIC

 

Validation(バリデーション)は2種類ある

Validation(バリデーション)という言葉は、プログラミング(テスト)をやっているとよく聞く言葉ですので、覚えておくと良いです。

 

文脈によって使われ方が違うのですが、

「ルールに沿っているか確認すること」

あるいは

「ユーザが何かを入力した時の内容をチェックすること」

です。

 

【バリデーション1】ルールに沿っているか確認すること

今回使ったW3Cチェックツールは前者ですね。

W3Cのルールに沿っているか確認するものでした。

 

【バリデーション2】ユーザが何かを入力した時の内容をチェックすること

前者の「ルールに沿っているか確認する」の延長線上の考え方として、後者の「ユーザが何かを入力した時の内容をチェックすること」があります。

 

プログラミング言語(JavaScript、PHP、Pythonとか)の時に使う「バリデーション」という言葉はこちらを指すことが多いです。

 

例えば、何らかの入力をした時に、使ってはいけない文字をチェックする…みたいな話です。

 

HTMLで考えると、フォーム(ユーザ入力欄)にバリデーションを入れるべきです。

例えば、メールアドレス欄に「@も入っていないただの文章」を入れられても困りますよね。

なので、ユーザ入力に対して「入力した内容が問題ないか」を確認するための処理(バリデーション)を入れます。

HTML5だと色々あるみたいです↓

qiita.com

 

WindowsでSafariを使う方法はありません(公式には)

WindowsでSafariを使う方法はありません。

超当たり前のことですが、一応整理しておくと

  • 【OS】Windows、Mac
  • 【ウェブブラウザ】Safari、GoogleChrome、IE

という感じ。

で、MacとSafariはApple社が作っているんですね。

 

AppleによるWindowsへのSafari提供は終了

以前は、AppleがWindows用Safariを提供していましたが、現在は提供終了とのこと。

support.apple.com

 

Windows上の仮想環境でMacOSを動かすのはライセンス違反かも?

Windows上の仮想環境でMacOSを動かすことは、VMWareという仮想環境を作るソフトを使えば可能です。

つまり、Windowsの中のソフトウェアで「Macの環境」を再現し、その中で「Safari」を起動するという方法です。

 

ただ、Appleの規約によると、そもそもWindowsコンピュータに、MacOSを入れるのはライセンス違反な感じがします(詳しくは読んでいませんけど…)。

仕事で使うならMacのPCを買うのが無難かと思います。

 

画像のAltは設定しておきましょう(SEO的にも)

画像のAlt属性(オルト属性)は設定が必要です。

「Alternative」=「代替」という意味ですね。

検索エンジンは画像の中身を理解していないので、「この画像は○○だよ」と伝えるために必要です。

※あと、視覚障害者の方がサイトを読む時にも使われます。サイト内の情報をテキストで読み上げるので、Altに書かれた内容が読み上げられます

 

Googleの公式サイトではこのように書かれています。

悪い例(代替テキストがない): <img src="puppy.jpg" alt=""/>
悪い例(キーワードの乱用): <img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/>
良い例: <img src="puppy.jpg" alt="puppy"/>
最も良い例: <img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>

Google 画像検索に関するおすすめの方法 - Search Console ヘルプ

例えば、犬の画像なら「子犬」と書くべき。

更に言うならば「ダルメシアン子犬のフェッチ」とまで書くべきです。

今回の「WEBコーディング」ではマストではありませんが、SEO的には必要になりますね。

 

【余談】

去年、Googleの公式イベントに参加しました(抽選受かりました)。

その中でGoogleのエンジニアの人が「画像のAlt属性設定は大事だよ」とも言っていましたね↓

www.arupakano.com

 

以上、デイトラDAY12の解説でした。

言い忘れましたが、はにわまんさんの記事を元に、自分用の品質チェックシートをエクセルなどで作ると良いと思います~。

 

www.engineer-step.com