2020年にJavaScriptフレームワークをちゃんとはじめるために。｜榊原昌彦
結論を先に書くと、2015年あたりの混沌としたJavaScriptフレームワーク戦争は終わりを迎え、メジャーなフレームワークはどれも成熟してきているので、使いたいフレームワーク使ってください。 ただ技術選定においてはどれかひとつを選ばないといけないというリアルはあるので、理解を深めるための視座をいくつか紹介したいと思います。 JavaScriptフレームワークの簡易比較有名かつドキュメントが日本語化されており、入門書もでているJavaScriptフレームワークにはAngular、React、Vueがあります。 で、それぞれの違いなのですが、すごくシンプルに言ってしまうと、HTMLとJavaScriptの関係がそれぞれ違います。 ・ Angularは、HTMLとJavaScript（TypeScript）を分割してかきます。 ・ Reactは、JavaScriptの中にHTMLを書きます。
JSONってなにもの？
JSONとは何か? JSONとはJavaScript Object Notationの略で、XMLなどと同様のテキストベースのデータフォーマットです。 その名前の由来の通りJSONはJavaScriptのオブジェクト表記構文のサブセットとなっており、XMLと比べると簡潔に構造化されたデータを記述することができるため、記述が容易で人間が理解しやすいデータフォーマットと言えます。 なお、JSONは2006年に「RFC 4627（http://www.rfc-editor.org/rfc/rfc4627.txt）」として公開されています。 例としてXMLとJSONで同じデータを記述したものをリスト1とリスト2に示します（図1）。 リスト1のXMLではすべての情報をタグで囲んだテキストノードとして記述していますが、XMLでデータを表現する場合、データの記述方法として属性とテキストノードの使い分けが
JavaScriptで振り分けてスマホサイト完成！ (4/5)
スマートフォンとPCの振り分け ここまでできたらいよいよサイトの公開です。今回は、スマートフォンサイト用に「iphone」というサブドメインを割り当てました。 作成したファイルをWebサーバーにアップロードすれば一応完成ですが、スマートフォンサイトのURLをユーザーに入力してもらうのは現実的ではないので、iPhone/AndoridからPCサイトにアクセスしたときには自動的にスマートフォン専用サイトに振り分けるようにしましょう。 iPhone/Androidからのアクセスを判別して専用サイトに振り分けるには、JavaScriptやPHPなどのプログラム言語か、Webサーバーの設定を利用します。今回はもっとも手軽なJavaScriptを使って振り分ける方法を紹介します。まず、端末の振り分けのときに利用するのが、「ユーザーエージェント」と呼ばれる情報です。 ユーザーエージェントとは ユーザーエ
2/2 サブウインドウを開く方法！閲覧者に不便をかけない小窓とは [ホームページ作成] All About
サブウインドウを開く方法！閲覧者に不便をかけない小窓とは(2ページ目)サブウインドウを開く方法！閲覧者に不便をかけない小窓とは。JavaScriptを使えば、ウェブページを表示しているウインドウとは別のサブウインドウを開くことができます。しかし書き方によっては弊害があります。それらの問題をすべて解決したサブウインドウの開き方や、そもそも別ウインドウを開かずに済ませる代替手段をご紹介。
![2/2 サブウインドウを開く方法！閲覧者に不便をかけない小窓とは [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/90a20b491ede784e03ef0ee616b12efec3eadfdd/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F1%2F6%2F201702031527%2Ftopimg_original.png)
Particletree » Lightbox Gone Wild!
IntroductionIn user interface design, a modal window (sometimes referred to as a modal dialog) is a window that blocks input to other windows. It has to be closed before the user can continue to operate the application and are frequently an element of Multiple Document Interface (MDI) applications or desktop applications like Windows or OS X. One of their purposes is to prevent the software from b
ウェブクリエイターへの道 | Lightbox 2 でサムネイルを拡大表示
***** 準備 ***** １．まず、Lightbox 2のページから、zipファイルをダウンロード、解凍します。 Lightbox 2をダウンロード ２．画像の用意。 ３．lightbox.jsとlightbox.cssの画像を指定しているフォルダを変更します。 images/loading.gif → 画像フォルダパス/images/loading.gif ***** HTMLの記述 ***** ４．表示するhtmlのcssを設定します。 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen,tv" /> ５．<header>の中に、下記を追記します。 <script src="js/prototype.js" type="text/javasc
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
新しいウィンドウで表示させる際の指定一覧
【リスト】 <form> ここは、おすすめ！ → <input type="button" value="Tatsuya's Home Page" onClick="window.open('http://www.red.oit-net.jp/tatsuya/index.htm')"> </form> <form> ここは、おすすめ！ → <input type="button" value="Tatsuya's Home Page" onClick="window.open('http://www.red.oit-net.jp/tatsuya/index.htm')"> </form> 【説明】 新しくウィンドウを開くのは、window.open() を使います。 open( ) のパラメータにURLを指定すれば新しいウィンドウを作ってそこにリンク先をロードします。 例）
JavaScript/ウィンドウ/ウィンドウの大きさを変更する - TAG index
ウィンドウの大きさを変更するスクリプトです。 （例：ボタンのクリックでサブウィンドウの大きさを変更する） メインウィンドウのソース <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function disp(url){ window.open(url, "window_name", "width=300,height=200,scrollbars=yes,resizable=yes"); } // --> </script> </head> <body> <p><a href="example_sub10.html" target="window_name" onClick="disp('example_sub10.html')">サブウィンドウを開く</a></p> </
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
We Ain't Seen Nothin' Yet. : Google Analyticsに自動で外部リンクへの移動もトラッキングさせるようにするJavaScriptライブラリ「ga-external.js」
http://bizcaz.com/archives/2006/09/19-231447.php
Window.Resize JavaScript