初心者でもほぼ無料でJavaScriptを勉強できるコンテンツ16選 -
Photo by dotConferences こんにちは。谷口です。 プログラミングをこれから学ぼうとしている方で、「JavaScriptを使えるようになりたい！」という方は多いと思います。 JavaScriptは実行環境が主にWebブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられます。（JavaScript - Wikipedia） Webサービスの作成・運用をする機会がある方には必要不可欠なJavaScriptですが、これから勉強を始める方の中には「プログラミング経験ゼロなんだけど、一体どうやって勉強したらいいの……？」と思っている方も多くいらっしゃるのではないでしょうか。中には「エンジニアではないんだけど、仕事でJavaScriptを触る機会があるから覚えたい！」という方や、「初心者だけど、なるべくコス
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
ソースコードに隠された謎を説きながら冒険を進めろ! ゲームでプログラミングを学べるhackforplay / shi3z:電脳ヒッチハイクガイド:電脳空間カウボーイズZZ(電脳空間カウボーイズ) - ニコニコチャンネル:生活
ダンジョンに潜る・・・チッ、ドラゴンだ。 こいつのファイアーブレス(火焔の息吹)が邪魔で先に進めない。 魔法を使うしかないようだ。 ハッカーだけに許された魔法を・・・ ソースコードを開き、該当する部分を書き換える。 さあて、ドラゴンのブレスはどうやってとめるのかな・・・ ここか・・・・ まったく、凄いゲームが現れた。 hackforplayがそれだ。 どういういきさつで産まれたかはわからないが、enchant.jsを使っていることは確かだ。 このゲームでは、最初から意図的にバグやソースコード上の罠が仕込まれている。 ゲームを進めるためには、バグを少しずつ修正しながら前に進むしかない。 このバグが、またうまくできていて、丁寧にバグをとっていく過程でプログラミングの基礎的なことが自然に学べるようになっているのだ。 この教材を作ったのはDaiki Teramotoさん。 たぶん面識はないが、こん
AngularJS: AngularJS 2.0
As we’re starting into the implementation of AngularJS 2.0, we thought we should put pen to paper and give you some insight into how we’re thinking about the design and why we’re making the changes we are. We’re sharing it with you now so you can help make the right choices. AngularJS 2 is a framework for mobile apps. It is for desktop as well, but mobile is the hard bit that we will get right f
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
jQuery 入門
jQuery で高品質なウェブサイトを制作 このサイトでは jQuery を使って高品質なウェブサイトを作る方法についてまとめています。 ちなみに、先に言っておきますが、このサイトは jQuery の完全なリファレンスではありません。 私が実際に業務でウェブサイトを構築するに当たって、よく使うもの、便利だと思うものを中心に掲載しています。 jQuery の利点はまた他のページで説明しますが、大きく分けて３つ挙げられます。 ひとつは jQuery がブラウザによる違いを吸収することによって、あなたの開発を容易にすること。 二つ目は極めて便利なファンクションが利用可能となること。そして三つめは優れた UI をもつライブラリが直ちに利用できることです。
PhantomJS - Scriptable Headless Browser
Important: PhantomJS development is suspended until further notice (more details). PhantomJS is a headless web browser scriptable with JavaScript. It runs on Windows, macOS, Linux, and FreeBSD. Using QtWebKit as the back-end, it offers fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG. The following simple script for PhantomJS loads Google homepag
HUBOT | Hubot is your friendly robot sidekick. Install him in your company to dramatically improve employee efficiency.
Hubot (note: it's prounounced hew-bot) A Customizable, Life Embetterment Robot Commissioned by GitHub View Hubot's Documentation (Learn about getting started, etc.) View Hubot's Source Code(via http://github.com/github/hubot/.) What is Hubot? Hubot is your friendly robot sidekick. Install him in your company to dramatically improve employee efficiency. No seriously, what is Hubot? GitHub, Inc., wr
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」:phpspot開発日誌
Editr - HTML, CSS, JavaScript playground 自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」。 いつでもどこでもブラウザがあれば開発ができるスタイルにするための鯖設置型エディタ。 コードハイライト機能がついているため、編集もしやすく、編集結果もすぐ見られるので学習用にもいいかもしれませんね。 関連エントリ Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」 前ブラウザのブラウザハックまとめ「Browserhacks」 ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 CSSのブラウザ対応状況が一発で分かる「BrowserSupport」 ブラウザ上での音声再生に使えるシンプルプレイヤー「Audio5js」
（大学の授業を除いて）プログラミング歴10ヶ月だけど小説投稿サイトDenkinovel作りました - from __future__ import katryo
こんにちはかとりょーです。 うごく小説投稿サイトDenkinovelというWebサービスを作りました。 現在β版としてテストユーザー募集中です。どうかみなさん、使ってみてください。Twitterアカウントをお持ちなら、すぐに登録できます。 どういうWebサービス？ 背景変化・BGMなどの演出のある小説を投稿できる小説投稿サイトです。 ノベルゲームみたいな小説が簡単に作れて、すぐに公開できます。 よくある小説投稿サイトみたいに、掲示板形式でずっと文章が続くのではなく、1ページ分だけの本文が表示されます。 クリック、スクロールにあわせて本文がフェードイン、フェードアウトしていきます。BGMを流したり、挿絵での演出もできます。 （背景画像はきまぐれアフター様よりお借りしました） いちど見てみれば感覚はつかめます。こちらから試してみてください。 ノベルゲームみたいですが、けっしてゲームではありませ
JavaScript - MDC
JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子Numbers and stringsRepresenting dates & times正規表現インデックス付きコレクションキー付きコレクションオブジェクトを利用するクラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターInternationalizationJavaScript モジュール中級編Advanced JavaScript objectsAsynchrono
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
Eclipse 3.4のインストールと日本語化 ～Eclipse 3.4入門～
魅力的に進化したEclipseを今こそ使ってみませんか？ Eclipse（イクリプス、または、エクリプス）の元になったアプリケーション開発ツールを米IBMがオープンソースコミュニティに寄贈したのは2001年でした。そして、Eclipseの魅力に取り付かれた私が翔泳社からDESKTOP REFERENCE「Eclipse辞典」を出版したのが2006年です。その後も進化をし続けたEclipseは、今では初心者から上級者まで、どなたにでもお勧めできる「素晴らしい道具」になっています。また、たくさんのプログラミング言語やツールに対応し、目的に応じて形を変えられる「万能工具」と呼べる存在になりつつあります。しかも、多くの方の参画のおかげで、オープンソースに見られやすい「敷居の高さ」はEclipseにはありません。 今こそ、Eclipseを使ってみませんか？ Eclipseとは？ Eclipseは誰で
prototype.js v1.5.0 の使い方
それは何？ prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。 もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。 加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。 ここで提供する例とリファレンス
GWTとYahoo!のAPIを使って画像検索アプリ！ － ＠IT
前回「JavaをAjaxに変換するグーグルのGWTを使ってみよう」では、Google Web Toolkit（以下GWT）の概要を紹介しました。 GWT最大の特徴は、JavaでAjaxが開発できることです。Ajaxアプリケーションのクライアント側をJava言語で開発し、それをピュアなHTMLとJavaScriptに翻訳する「Java-to-JavaScriptコンパイラ」というユニークな技術をコアとした開発手法にあります。 具体的なAjaxアプリケーションを実際に作成することで、GWTのプログラミングやウィジェットあるいはリモート・プロシージャ・コールの機能といった本質的な要素へと迫っていきましょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RxDB - JavaScript Database | RxDB - JavaScript Database
jQuery・Ajax実践サンプル
Greasemonkey - Mozilla Firefox まとめサイト