JavaScriptの基本的な書き方
JavaScriptの基本的な書き方（2-1/p24）
See the Pen p24 by r.shimizu (@r_shimizu) on CodePen.
まず、JsのコードをHTMLのファイルに組み込むのはスクリプトタグのタグの役目です。
<script>Jsのコード</script>
上記のtype属性を見てください。旧来のHTMLでは、style要素とscript要素には、type属性を指定する必要がありました。
HTML5の場合はデフォルトのtype属性がJavaScriptなのでtype属性を特別記載する必要はないそうです。
HTML5からは、type属性を省略することができます。
上のコードは、下記にも書き換えが可能。
これは、スクリプトコードの外部化で書き換えています。
helloEx.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script src="helloEx.js"></script> </head> <body> </body> </html>
helloEx.js
document.write("hello world");
上記の実行結果は、code penでの実行結果と同じです。
コードの外部化のメリットは
外部スクリプトとインラインスクリプトを併用する場合の注意点
外部スクリプトとインラインスクリプトを併用する場合、以下のような書き方はできません。
上記の実行結果は、「hello world3」だけです。src属性を指定した場合、scriptタグ配下のコンテンツは無視されからです。
スクリプトタグを記述する場所は3つです。
- 『body要素の中（任意のどこか）』
テストするときとかこれが多いらしい。
- 『bodyタグの閉じタグの直前』
これが一般的らしい
- 『head要素の中』
Jsのルールに、関数を呼び出すためのscriptタグよりも、定義する関数のscriptタグを先に記述しないとダメ！っていうのがあるためです。
たとえば、bodyタグ配下で呼び出す必要がある関数は事前にheadタグ配下で読み込んでおく必要がああったりします。
この記述する場所というのが結構重要になってきます。最近のJavaScript業界ではbodyタグの閉じタグの直前にscriptタグを記述するのが一般的な作法となっています。
その理由としてすべてのブラウザではJavaScriptを読み込んで処理している間は他のレンダリング(HTML要素の読み込み)を中断するという処理になっているからです。
HTML5から非同期で読み込みできるasync属性などが追加されましたが、そういった特別な事をしていない限りほぼ全てのブラウザで同じようにレンダリングが行われます。
例えばhead要素にJavaScriptを書いてしまうとJavaScriptが読み込まれた瞬間には、ページを構成している全てのHTML要素の読み込みが終わっておらず、何かHTML要素を操作するJavaScriptが記述されていた場合は『要素が読み込まれた後に処理を実行して！』という記述を追加しないといけません。
bodyタグの閉じタグの直前にJavaScriptを記述すればほぼ全てのHTML要素が読み込まれた状態でJavaScriptの読み込みを始めることができるのでスムーズな処理を構築することができます。
アンカータグにスクリプトを埋め込む 〜JavaScript擬似プロトコル〜
リンクをクリックした時にダイアログを開きたい場合が、という場合に使います。
ちょっとしたスクリプトを埋め込む方法ですが、以外と利用するので覚えておきます。
See the Pen p29 by r.shimizu (@r_shimizu) on CodePen.
Javascript 言語としての4つの特徴
2016年の8月1日の今日、Javascriptを基礎から勉強してみようと思います。
なぜこの言語から勉強をするかというと、8/22からフロントエンドエンジニアとして働くからです。
また、フロントエンドエンジニアこそ、Javascript（今後Jsって略します）って言語を操れないとダメらしく、
その割には、できていないし、できると良いことがたくさんありそう、ということもあってこの言語を選定しました。
フロントエンドエンジニアって？という疑問があれば、ここをご覧ください。
すでに、1冊の書籍を読み終えて、もう一段難しい本で本格的に学ぼうととう段階です。
最初に読んだ本は下記の本です。
この本は、何となくの理解で、Jsを読み進められ、実装もできて、分かりやすい説明もあって、良かったです。
そして、これから8月20日までに読んでみようと思うのが、下記の書籍です。
JavaScript本格入門 ～モダンスタイルによる基礎からAjax・ｊQueryまで
自習も兼ねて、この書籍にあることプラスαで書き進めてみようと思います。
まず、Jsの言語としての4つの特徴は大きく、４つあります。
スクリプト言語である
これは要するに、プログラムの記述や実行を簡単に行うことができることです。
また、非常に多くの場合、スクリプト言語はインタープリタ型言語であり、コンパイラ型言語に比べて実行までの処理の手間がかからないという特徴を持っています。
また、Jsはオブジェクト指向的な構造も持ち合わせていて、再利用性、保守性に富んだコード記述がしやすいそうです。
でははぜ、オブジェクト指向を持ったプログラミング言語が、再利用性や保守性が高いかについては、今わからないし、別途じっくり考えたいので、書きますね。
インタプリタ型の言語である
上にすこし書いてしまいましたが、Jsはインタプリタ型の言語です。
ちなみに、Jsに書き方が似てるswiftという言語は、コンパイル型の言語です。
この2つの違いを知るのにこの記事が良かったので、メリット・デメリットなどの要点のみ、まとめます。
コンパイラ（実行形式プログラム実行）の長所・短所
長所
- 高速に実行される
- 特別なソフトウエアが入らず、単独で実行できる（コンパイルされたプログラムは、exeファイルのことかーと思った。）
短所
- プログラムの中身の仕組みがわからない（商売するには好都合）
- 内容を簡単に変更できない（商売するには好都合）
- プログラムを慎重に作る必要がある
- コンパイラシステムは比較的多がかりになる
3.に関して。
そもそもソフト開発において、完璧なプログラム作成は基本無理です。
基本は、何度か動作チェックして、エラーがないかを確かめます。これをデバックと言います。
基本はコンパイル時にエラーが見つけられるけど、実行時に起こることもある、その結果はOSに依存する。
実行時のエラーによって、コンピュータ自体の悪くなってしまうことがあるため、慎重に作成しないとダメ、だけど最近は、そうならないために、実行時エラーまで監視してくれるデバッガーも内蔵された統合開発環境が主流。
だけど、こいつの難点は、4.のごとく、思いことが難点。まさにXcodeがそう。
インタプリタ方式の長所・短所
短所
- 実行速度が実行形式のものより遅い
- 実行に対応するインタプリタシステムが必要
実行速度が遅いというのは、コンパイルされたプログラムと比較して、という意味。
とはいえ、実際はかなりの速度なので、大規模データ処理とかでない限りは、いろんなことに使えます。
大規模な処理をさせない限り、下記の長所が目立ちます。
長所
- プログラムの中身がすぐ見える
- プログラムを変更し実行するのが簡単
- 気軽にプログラムを実験できる
- インタプリタシステムは比較的小規模
リリース後も改修を前提とする用な、グロースハックやスクラム開発体制においては、インタプリタ型の言語があっていて、web業界にて、Jsが採用されているのもなんとなく分かりました。
clearfixに必要なこと
CSSでサイト制作をする際、避けては通れない要素を簡単に書いておきます。
知っておけば、不用意な見た目の崩れを防げます。
擬似要素（Pseudo-elements）
要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。
要素:after { content : 値 ; }
:after擬似要素 は、contentプロパティとあわせて、指定の要素の後に仮想的な文字列や画像を追加することができます。
あと、「:after」要素はインライン要素です。
スタイルシートリファレンス display
要素の表示形式（ブロック・インライン）を指定する
例えば、インライン要素の
に display:block を指定すると、ブロックレベル表示となって前後が改行されて表示されるようになります。
信頼性がだんだん強みに
http://www.yomiuri.co.jp/national/20160303-OYT1T50018.html?from=twwww.yomiuri.co.jp
概要、美容系の医療機関のサイトが、効果を誇張していたり、リスクが分かりにくかったりで、消費者のクレームが増えたので、厚労省が広告配信の規制を検討するというもの。
リスティングやディスプレイ広告に関してはGoogleやYahoo!の規制が効くけど、アフィリエイトでは、そんな規制はほとんどないでしょう。
クレカ、転職やFXと並んで、アフィリエイト高収入ジャンルである美容系の検索クエリはアフィサイトの激戦区です。
美容お悩み系は検索との相性がいいので、消費者の美容医療ＨＰへのクレームは、アフィサイトを信用して申し込んだケースは多いと思います。
目的が、とにかくユーザーを美容医療ＨＰに誘導すればOKなアフィサイトと違い、例えば、オウンドメディアが、目的を達成するための武器として、「信頼性の重視」を選択すれば、ますます強みになるのかなと思いました。
Googleアナリティクスの基本的な使い方 -レポートの見つけ方編-
私は、Webメディアに訪れるユーザーの行動などを分析し、課題を発見して、改善する仕事をしています。そこで、「ユーザーの行動を分析するうえでかかせないGoogleアナリティクスの使い方」について解説していきます。
Googleアナリティクスの使い方がわからないと困っている方は、必見です。
つまづきやすいポイントの1つ＝レポートの見つけ方がわからない
Google アナリティクス（以下、GA）は、Webサイトのアクセス解析を行うことができる無料のツールです。GAは非常に高機能ですが、使い方が複雑で、初めて使う人の中には「見たいデータにたどり着けない」「どうやって設定すれば出るのか分からない」など、うまく使いこなせない人も多いのではないでしょか。
ページ毎に、閲覧数のレポートを出したい…けど、どうすれば？
GA初心者の方で、つまづきそうなポイントとして多くあげられるのが「◯◯ごとの、△△をみたい」けど、見方がわからない、ではないでしょうか？
例えば
- デバイスごとに、滞在時間を見たい
- 検索キーワードごとに、訪問数（セッション）を見たい
- ページのURLごとに、閲覧数（PV）を見たい
など、見たい指標とディメンションの組み合わせは膨大にあり、かつGAで作成されるレポートは、すべて「指標」と「ディメンション」の２つの組み合わせによって構成されています。
指標とディメンションの意味について、詳しくはこちらをご覧ください。
web-tan.forum.impressrd.jp
指標とディメンションの組み合わせが膨大なゆえに、初心者の方は、自分が見たいレポートの見方が分からないという方も多いのではないでしょうか？実際、私も業務にて、「◯◯ごとに、△△のレポートを作って」と、よく言われることがありますが、初めて作る組み合わせであることが多いです。そんな時のために、見たいレポートにたどり着くために「当たりの付け方」を知っておくことが重要となります。
見るべきポイントは②
画像引用：Googleアナリティクス入門：第2回 Googleアナリティクスの詳細設定を使ってみよう - ＠IT
まず、見るべきは、上の画像の②にある「レポートナビ」と呼ばれるところにある下記の３つで、それぞれをわかりやすく説明すると、下記のようなイメージになります。
- ユーザー → どんなユーザーなのか
- 集客 → どこから来たのか
- 行動 → どんなページを見たのか
になります。
例えば、デバイス（スマホやPC）ごとに、滞在時間を見てみたい。と、思った時。ユーザーはどんな端末を使ってアクセスしてくるのか、つまりどんなユーザーなのか、と考えられれば当たりをつけることができるでしょう。
実際の操作手順：ユーザー＞モバイル＞サマリー
そこまでいければ、デバイスごとの滞在時間を見る事ができます。
次に、検索キーワードごとに訪問数を見てみたいと思った時に、どんなキーワードを入力してやってきたのか、つまりどこから来たのか、と考えられれば当たりをつけることができるでしょう。
実際の操作手順：集客＞すべてのトラフィック＞チャネル＞Organic Search
そこまで行ければ、検索キーワードごとの訪問数は見れます。
もちろん、見たいデータが上記のような当たりの付け方で辿り着けないこともあります。しかし、日々分析を繰り返している私の経験上、高確率で見たいデータに辿り着けました。ご興味のある方はぜひ一度試してみてください。
CSS（属性セレクタ / CSS3セレクタの「:not()」）
擬似要素・擬似クラス
CSS3セレクタで追加された「:not()」
W3Cでは「E:not(s)」という風に説明されています。日本語で説明すると、「sでないセレクタを持つE要素」という感じになります。
使い方の簡単なサンプル
これって、CSSに「p:not(:hover)」が無ければ、すべてが半透明になります。
「p:not(:hover)」がつくと、pタグの中でホバーされてないやつが半透明になる。
という意味です。
こちらのページにnotセレクタについて深い考察があるので是非
weboook.blog22.fc2.com
あと、ここに結構まとまって書いてあった。
www.htmq.com
cssのfloatを解除する方法 〜あこがれの2カラムレイアウト〜
この記事は、さらに読みやすくするため、
下記URLにお引越ししました！
