サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
wp-p.info
みなさまどうもおはこんばんにちは。 さて続きまして、呼びだされたタイミングのカレントオブジェクトを参照できる『this』(ディス)ってやつについて色々とやっていきたいと思います。 これ、めっちゃ便利なのでバッチリ使い方を覚えてしまいましょう。そんでもって『this』を使わないと構築できない処理も存在してたりしてなかったりするので結構必須項目のような感じになってます。 あと他の言語でも『this』のような仕組みは用意されていたりするのでございますが、JavaScriptの『this』の挙動はちょっと特殊かもしれません。なので他の言語、特にクラスベースな概念で設計がされている言語に精通している方は混乱してしまわないように要注意でございます。 というわけでやっていきましょう。とりあえずの『this』の使い方はこんな感じです。 this; 普通に『this』って記述するだけでOKです。オブジェクト
みなさまどうもこんにちは。 続きまして少し高度なCSS文法について勉強していきましょう。 当サイトのCSS入門編で紹介したセレクタの記述方法は要素を直に指定するのみでした。こんな感じですね。 p { color: red; } p.test { color: blue; } p#test { color: aqua; } セレクタ指定の方法は色々な記述方法がありますが、まず『◯◯要素の中にいる◯◯要素に対してCSSデザインを反映させる』方法を紹介します。 記述方法はとても簡単でいずれかの要素を記述した後に半角スペースを空けてさらに要素を記述すればOKです。以下のような感じですね。 p span { color: red; } 上記の場合はp要素の中にいるspan要素のみデザインを反映させることができます。HTML要素で考えると以下のような感じです。 <p><span>ここはデザイン反映され
みなさまどうも。 これまでの記事でざざっとどどっとクラスとかインスタンスとかについて解説してきました。しかし、肝心な概念とか使い方とか使い分けとかそういうところの解説がまだでしたので、今回は初心者の方がハマりがちなその部分についてやっていきましょう。 「関数とクラスの使い分け」とか「クラスという概念の利便性」とかがよく理解できなくて何年も悩んでしまってる、という方も実際多いので結構重要な項目になりますね。 これは関数で作った処理と、クラスで作った処理を見比べてみるのが手っ取り早いので以下のサンプルを見てみて下さい。同じような処理を関数のみとクラスのみで作ってみました。 func testFn() { let n = 1 + 1 print(n) } testFn() // 『2』が出力されます。 class TestClass { let n : Int init() { n = 1 +
みなさまどうもこんにちは。 続きまして『document.querySelector()』というのを紹介したいと思います。呼び方は「どきゅめんと」は省略されて「くえりーせれくたー」と呼ばれるのが一般的です。 これまで当サイトでは『document.getElementById()』や『document.getElementsByTagName()』などを紹介してきましたが『document.querySelector()』はCSSセレクタでHTML要素を指定することが可能です。 この『document.querySelector()』は比較的最近ブラウザに実装された関数(メソッド)になります。ちょうどHTML5が登場したあたりぐらいでしょうか。なのでIE7、IE6とかだと動かないです。IE8は一応動かすことができるのですが、たまにバグが出たりするので使う時はちゃんとそのソースコードが動いて
みなさまどうも。続きまして引数とか『可変長引数』(かへんちょうひきすう)とか『arguments』(アーギュメンツ)とかについてやっていきましょう まずJavaScriptにおいての引数の挙動について軽く確認していきます。JavaScriptの引数はかなり自由に構築することができ、引数の個数も特に意識する必要なく使用することができます。 以下のサンプルを見てください。 var f = function(x, y, z){ console.log(x); console.log(y); console.log(z); }; f(1, 2, 3); // 数値『1』、『2』、『3』が出力されます。 上記のサンプルは仮引数の『x』、『y』、『z』を出力するだけの簡単な処理ですね。 3つの引数を出力する関数となっていますが、規定数以下の引数を渡して実行させても、逆に規定数以上の引数を渡して実行させ
みなさまどうも。続きまして『strictモード』(厳格モード)について色々とやっていきたいと思います。 『strictモード』とはより厳格でシビアなJavaScriptとしてレンダリングさせるためのモードで、『strictモード』でJavaScriptを実行させるとやってしまいがちなミスや曖昧な実装をエラーとして拾ってくれるようになったり、今後想定されるであろうJavaScriptの基準で構築できたり、処理によっては通常モードよりも少し高速に処理できるようになったりと通常のJavaScriptとは違った感じで動作するようになります。 その反面、色々と制約が増えてしまったり、記述が増えてしまったりとデメリットもかなりあったりしますので『strictモード』を導入するかしないかは好みが別れるところになりますね。著者の体感では企業全体の3%くらいは導入してるんじゃないかなーって感じです。 (´-
みなさまどうも。 前回はオブジェクトについて色々とお疲れ様でした。引き続きオブジェクトに関係する処理『for...in文』(ふぉーいんぶん)をやっていきたいと思います。 『for...in文』は『for文』と同じような感じで繰り返し処理を実行できる構文です。『for』文は配列の各要素に対しての繰り返し処理が主な使い方でしたね。それに対して『for...in文』はオブジェクトの各プロパティに対しての繰り返し処理となります。 ではやっていきましょう。 まず記述方法ですが以下のような感じになります。 var x = { "hoge": 0, "hoge1": 1, "hoge2": 2 }; for(var elem in x){ console.log(elem); } 上記はまずオブジェクト『x』を定義し、適当にプロパティを作成しています。 そのあとに『for(var elem in x){
みなさまどうもこんにちは。 続きまして『setTimeout()』と『setInterval()』について解説していきたいと思います。 こちらは時間差で処理を実行させたり、時間ごとの繰り返し処理を構築することができる関数(メソッド)になります。早速使い方をみていきましょう。 まずは時間差を設けて処理を実行させることができる『setTimeout()』です。読み方は「せっとたいむあうと」でOKです。 記述例はこんな感じになります。 function hoge(){ alert("3秒経ちました!"); } setTimeout(hoge, 3000); これを実行させると3秒後に関数『hoge』が実行され、アラートダイアログが表示されます。 記述方法は、まず『setTimeout();』と記述します。これが基本となる関数(メソッド)ですね。問題は引数です。 『setTimeout()』の最初
ではこれらの解説をしていきます。上の表の『基準となる位置』という言葉を覚えておいて下さい。 まず『static』という値についてですが、これは通常の配置にするという値で、各HTML要素の『position』プロパティの初期値は『static』です。 ちょっと注意点ですが、通常の要素に対して『top』、『bottom』、『left』、『right』プロパティを効かせることはできません。『top』、『bottom』、『left』、『right』プロパティを反映させるには『position』プロパティに『static』以外の値を設定する必要があります。これ忘れやすいので要注意です。 『static』に関してはこれまで色々と扱ってきた通常の要素に戻す、という値なので解説はいらないですね。 続いて『relative』という値の使い方を勉強していきましょう。 これは通常配置される場所から『top』、『
みなさまどうもこんにちは。 初めましての方ははじめまして、どこかの記事でお会いした方はまたお会いできて光栄でございます。 こちらJavaScriptの中級編となります。ちょっと難しい内容まで踏み込んでいきますのでHTML、CSS、JavaScriptの基本的な知識が必要になってきます。当サイトの場合ですとHTML入門編、CSS入門編、JavaScript入門編あたりをお読み頂いた後に読み進めて頂ければテンポよく進められるような気がします。 ではいきましょう。 まずJavaScriptの『オブジェクト』というものを使用してみたいと思います。『オブジェクト』とは直訳すると『物』になるのですが、『データのあつまり』と覚えてしまったほうが調子良いかもしれません。 JavaScriptでは『連番が付けられた変数(データ)の集合体』である『配列』という概念がありますが、『オブジェクト』とは『独自の名前
とある日、銀歯が取れてしまった会社の同僚さんが「畜生ぉ、持って行かれたぁぁぁ!」と叫んでいました。かっこよかったので今度マネしてみようかと思います。 というわけでみなさまどうも。 続きまして要素名から要素を特定してみたいと思います。 当サイトのJavaScript入門編で『document.getElementById()』を紹介しました。こちらはid名から要素を取得し、操作できる関数(メソッド)でしたね。 同じようなノリで要素名(タグ名)から要素を取得する関数が用意されています。その名も『document.getElementsByTagName()』でございます。現場での呼ばれ方は結構色々ありますね。そのまま「げっとえれめんつばいたぐねーむ」と呼ばれたり、名前が長ったらしいので「要素名から取得するあれ」なんていう抽象的な感じで呼ばれることもあります。 注意すべきは『Elements』で
みなさまどうもこんにちは。 今回でJavaScript中級編最後の項目となります。ここまでお付き合い頂き誠にありがとうございました。 では『参照渡し』について解説していきたいと思います。こちらもかなりややこしい項目となりますが頑張ってください。 まずJavaScriptにおいての全ての要素は大きく分けて『プリミティブ』と『オブジェクト』に分けられます。『プリミティブ』については別の記事で詳しく解説をしていきたいと思いますが、とりあえず数値や真偽値のような根本となる値のことだと思って下さい。 『オブジェクト』についてはこちらの記事で解説した通り、名前のついたデータの集まりとなります。JavaScriptでは配列も一種の『オブジェクト』となります。関数も一種の『オブジェクト』です。 そしてJavaScriptでは要素を代入させた際の処理に『プリミティブ』と『オブジェクト』で大きな違いが存在しま
というわけでみなさま大変お疲れ様でございました。こちらがCSS入門編最後の記事となります。 これまで色々CSSの基本について勉強してきましたが、大分CSSというものの扱いに慣れてきた頃ではないでしょうか。 CSSはそこまで複雑な言語というわけではありませんがちょっとややこしいことも多いです。ですので慣れないうちは戸惑ってしまう事も多いかと思いますがめげずに頑張って頂ければ幸いでございます。 というわけで総まとめです。忘れてしまった項目などあれば確認しちゃってください。 基本的なCSS文法 基本的なCSS文法の記述例は以下。『*』(アスタリスク)を使うと全ての要素を対象にすることができる。『*』で指定されたセレクタを『ユニバーサルセレクタ』と呼ぶ。 p { font-size: 18px; font-weight: bold; } * { color: red; } CSS文法の構造や名前な
この記事を書いているのは夏真っ盛りな時期なんですが、なんだか今日は寒いです。デスクワークを2x年続けてると気温の変化についていけず困ったもんでございます。 というわけでみなさまどうも。 前回は『変数』について色々とやりましたね。ちょっと地味な記事が続いているので今回はちょいとPHPの強力さとか便利さを紹介したいと思います。 その名も『インクルード処理』でございます。これ超便利です。ちなみにこれは正式な名前じゃないです。私が勝手に呼んでるだけです。 (´-`).。oO(とはいうものの、『インクルード処理』といえば大体伝わる気がします...) 『インクルード』(include)とは直訳すると「含める、入れる」って意味になり、プログラミングにおいての『インクルード』は『他のファイルに記述した内容を取り込む』という感じの意味になります。これは正式な言葉です。違ってたらすみません。 さて、当記事をお
みなさまどうもこんにちわ。 ここまでとてもお疲れ様でした、次回が総まとめとなりますのでPhotoshop入門編は当記事が最後の項目となります。 では『切り抜きツール』と『トリミング』についてやっていきましょう。 『切り抜きツール』はその名の通り今現在表示している画像(レイヤー)をくり抜くツールです。前の記事で解説した選択範囲でくり抜く挙動と似ていますが、切り抜きツールではカンバスごと切り抜く感じになります。 では適当に画像なんかをPhotoshopで開いてみてください。開けましたら左側のツールバーに注目してみましょう。真ん中の上あたりに以下のアイコンがあるかと思います。 これが切り抜きツールです。そしたら切り抜きツールを選択した状態で画像(レイヤー)の上をクリックしてみましょう。すると以下のような状態になるはずです。 枠がでてきましたね。切り抜きツールはこの枠にそって切り抜いてくれます。枠
みなさまどうも。 続きまして『無名関数』(匿名関数)についてやっていきましょう。超重要項目となります。 これまでの当サイトの記事で『無名関数』はすでに何度か出てきています。今回の記事ではもうちょっと奥深くまで解説していきたいと思います。まずは『無名関数』を代入して関数の定義を行うことについての解説から始めます。 これまで紹介した関数定義の方法として大きく『関数宣言』と『関数式』(関数リテラル)がありました。 ※ネーミングについては正式に決まっているものではないので参考書などで違っている場合があります。 関数宣言は以下のようなパターンで、 function hoge(){ // ここに処理 }; 関数式は以下のようなパターンになります。 var hoge = function(){ // ここに処理 }; これまでの当サイトで紹介しているほとんどのサンプルソースでは初心者の方に分かりやすいよ
みなさまどうもこんにちは。 続きまして隣接した要素を指定したりしなかったりしてみましょう。 隣接した要素を指定するには要素と要素の間に『+』を記述します。 このような感じですね。 h1 + p { color: red; } <h1>タイトルだよ!</h1> <p>ここはh1要素のとなりだからデザインが反映されるよ</p> <p>ここはh1要素のとなりにいないからデザインが反映されないよ</p> サンプルをみてみる。 h1要素のとなりにいるpタグのみデザインが反映されます。『+』を使用して記述されたセレクタを『隣接セレクタ』といいます。 注意点ですが、隣接セレクタという名前がついているので『+』を使用して記述すれば隣り合っている全ての要素に対してデザインを反映できそうな気がしますが、実際は隣接した次の要素に対してのみデザイン反映の対象になります。手前の要素は対象外になっちゃいます。 <p>
みなさまどうもこんにちわ。 続きまして『即時関数』というものを解説していきたいと思います。即時関数とは以下のようなものです。 (function(){ // ここに処理 })(); ぱっと見、括弧だらけでわけ分からないですよね。しかし、この記法は非常に強力なので絶対に覚えるようにしてください。構造が分かればそんなに難しいものではありません。 この『即時関数』はその名の通り『即時実行される無名関数』となります。即時実行できる無名の関数とはつまり、『グローバルの名前を全く潰さず、ローカルのスコープを作り出しそのまま処理を実行することができる』という事になります。なので超便利です。 では記法を確認していきましょう。まず前回の記事の『無名関数』を思い出してみましょう。『function(){}』ってやつですね。前回の記事でもちょろりと解説しましたが、JavaScriptでは冒頭に『function
みなさまどうもこんにちは。 続いてJavaScriptからHTML要素を取得して色々操作してみましょう。 まずはid属性から要素を特定してデザインを変更してみます。id属性についてはCSSで使ったことあるかと思います。あれを使います。 まずはHTMLをかきかきします。 <p id="test">初めてのJavaScript勉強中だよ!</p> 適当にp要素を書いてid名に『test』とふってみました。 こちらをJavaScriptで色々操作してみます。 JavaScriptでHTML要素を操作する際は最初に要素を特定して取得する必要があります。というわけで取得するところから始めましょう。 JavaScriptでid名から要素を特定して取得できるとっても便利なメソッドは『document.getElementById()』というメソッドです。すんごくよく使います。 ちょっと名前が長ったらしい
その他にもイベントハンドラは多数存在しています。英語になってしまいますが以下のmozillaさん(Firefoxを作っているみなさま)の公式リファレンスサイトを参考にすると良いです。 https://developer.mozilla.org/en-US/docs/Web/Events 注意すべき点がひとつあり、『イベント属性』で記述したときとちょっとイベントの名前が変わっています。『イベント属性』でクリックイベントを登録するときは『onclick』でしたね。『addEventListener()関数』でのイベントハンドラの名前は『click』なので『on』が抜けちゃっています。ここ間違いやすいので注意してください。 続いて第二引数には『function(){}』と記述し、その『{}』の中に処理を追加します。 この『function(){}』は一般に『無名関数』と呼ばれます。前回も登場しま
(´-`).。oO(秋葉原駅のミルクスタンドにある…) (´-`).。oO(みんなの牛乳が大好きです…) (´-`).。oO(皆様も秋葉原にお越しいただいたときにはぜひ…) というわけでどうも。 続いてHTML要素の中身を変更したりしなかったりしてみましょう。 当記事でのHTML要素の中身を変更、というのは <p id="test">初めてのJavaScript勉強中だよ!</p> という記述でいうと『初めてのJavaScript勉強中だよ!』という部分を変更するという事を指すこととします。 JavaScriptで要素の中身を変更するプロパティは『innerHTML』(いんなーえいちてぃーえむえる)、『innerText』(いんなーてきすと)、 『textContent』(てきすとこんてんと)の3つがあります。 使い方は同じような感じで以下のようになります。 ※innerHTMLの場合 <
みなさまどうも。いかがお過ごしでしょうか。 前回は文法について学びました。続きましてCSSの記述方法、ようするに記述場所のことですね。これについて学んでいきましょう。 CSSの記述方法については タグのstyle属性に直に記述する方法 styleタグを使用して記述する方法 外部ファイルのCSSを読み込ませる方法 の3つの方法があります。 少しサンプルを見て確認して行きましょう。詳しい記述方法は次の記事から解説していきたいと思います。 HTMLタグのstyle属性に直に記述する方法はこのような感じになります。 <p style="font-size: 18px;">ここのフォントサイズが18pxになります</p> HTMLファイルに直に記述する事を「インラインで記述する」と言ったりします。プログラミングの世界でのインラインは『埋め込み』という意味で使われています。よく使用される言葉なので覚え
みなさまどうも。いかがお過ごしでしょうか。 続きまして『擬似クラス』について勉強していきましょう。 擬似クラスはとっても強力なセレクタの記述方法です。コンテンツ作成の幅が どーんと広がるのでバッチリ覚えてしまってください。 CSS2の時点で存在している擬似クラスは以下のものがあります。 :hover :active :link :visited 昨今のCSS3では擬似クラスがかなり追加されたのですが、当記事では上記の4つについて解説していきます。 まずどういったことができるのか、ということですが以下の要素にカーソルを当ててみてください。カーソルというのはみなさんがマウスとかタッチパッドとかを動かすと連動して動く矢印みたいなやつのことです。 ここにカーソルを当てる カーソルが当たると文字色が変更になったのが確認できたと思います。これは擬似クラスの『:hover』を使用して実装できます。 さら
みなさまこんにちわ。 続きまして『関数』(かんすう)とか『引数』(ひきすう)とかやっていきましょう。あ、引数は「いんすう」じゃないです。「ひきすう」と読みますので注意です。 今回からインラインで書くか、それとも外部JavaScriptファイルに書くかこちらから特に指定はしない方向でやっていきたいと思います。ご自身で書きやすい方で自由に決めてしまってください。 ※ちょっと自身ないなぁという方はこちらの記事を再度読み返してみると良いかもしれません。 では話を戻しまして「まず関数ってなんなんだぜぇ」ってお話ですが、一般に関数とは引数のデータを受け取りそこから何らかの処理を行う一連の処理群のことを指します。引数とは関数実行時に渡す値の事です。 と、こんな感じで言葉で説明されてもよく分からないですよね。 なので関数の概念についてはちょっと置いておいて、先に関数を作るための記述方法を確認していきましょ
みなさまどうもこんにちは。 初めましての方は初めまして、どこかの記事でお会いした事がある方はまたお会いできて光栄でございます。 こちらJavaScriptの入門編でございます。ようこそおいでくださいました。というわけで早速JavaScriptについての概要を色々解説させていただきます。 まず読み方なんですが、JavaScriptは「ジャヴァスクリプト」と読みます。(「ジャバスクリプト」かな?) 続いて「JavaScriptってナニソレ?」ってお話なんですがJavaScriptをブラウザに組み込むと、みなさんが今まで勉強してきたHTMLやCSSと違い、計算をしたり要素を操作したりと色々な動的アクションを追加できるようになります。 ちょっと実際に体験してみましょう。 ここをクリックしてみてください。 アラートダイアログのポップアップが表示されたと思います。 次にここをクリックしてみてください。
みなさまどうも。いかがお過ごしでしょうか。 続きまして『return文』というものを使ってみましょう。 『return文』を使用すると関数(メソッド)が実行されたときにどの値を返すか指定することができます。そしてそれと同時にその関数の処理も終了させることができますので非常によく使われる構文になります。 プログラミング言語では『値を返す』という表現をされることが多いです。『値を返す』とは『(演算式に)演算結果を返して(教えて)もらう』といった意味になります。 少し数学を思い出してみましょう。以下のような計算式があったとします。 1 + 2 これは『1 + 2』なので答えが『3』になるわけですが、プログラミングでは「『1 + 2』の演算式(計算式)は『3』を返す」という表現をします。 数学における『演算式(計算式)』が『関数』で『答え』が『値』に該当するような感じですね。 ちょっとした言葉のニ
お使いのブラウザはJavaScriptが実行できない状態になっております。 当サイトはWebプログラミングの情報サイトの為、 JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。 JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。 ウェブプログラミングポータルへようこそ。 当サイトはプログラマーやクリエイターの皆様の為の情報サイトです。 当サイトに掲載している情報は 商業利用、個人利用問わずフリーとなっておりますのでご自由にご利用下さい。 当サイトご利用の際に発生した事故、損害等はこちらでは一切責任を負いません。 当サイトへのリンクは全てフリーとなっております。 当サイトの執筆、管理等は合同会社アキバクリエイションが行なっております。
お使いのブラウザはJavaScriptが実行できない状態になっております。 当サイトはWebプログラミングの情報サイトの為、 JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。 JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
このページを最初にブックマークしてみませんか?
『Webクリエイターの為の情報サイト | Web Programming Portal』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く