2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
第1回 Webフロントエンド開発勉強会 〜ToDoアプリ作成〜 - Qiita
第1回「Webフロントエンド開発勉強会」では、ToDoアプリ作成 を実装することを目的とし、そのために必要な HTML、CSS、JavaScript の説明をしていきます。 また、JavaScript は ES5 を対象とし、第2回で ES6 にも少し触れる予定です。 環境構築 今回の開発で作成するファイルは HTML、CSS、JavaScriptとなり、いずれもテキスト形式のためお好みのテキストエディタで編集できますが、今回は Visual Studio Code を使って説明します。 こちらの記事を参考に環境の構築をしてください。 Visual Studio Code でフロントエンドの開発環境を構築してデバッグする HTML HTML は Webページの構成をタグと言われるパーツで組み立てる役割をします。 タグは基本的に<タグ名></タグ名>のように開始タグと終了タグで他のタグを囲う
ゼロから始めるJavaScript生活 - Qiita
（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
ステップバイステップでより深いJavaScriptの学習ができる·new2JS MOONGIFT
new2JSはWebベースのJavaScriptレクチャーソフトウェアです。 プログラミングは実際に手を動かしてみないと覚えられるものではありません。それをコードを使ってレクチャーしてくれるのがnew2JSです。JavaScriptを覚えたい方におすすめです。 最初のページです。まずRunボタンを押します。 説明文と、その下に実行結果が表示されます。後はnextボタンを押していきます。 数値の型が出ています。 文字列、真偽値の型など。 入力を行った判定もできます。 他にも色々なレクチャーが受けられます。 new2JSはJavaScriptを一歩一歩覚えていくというよりもある程度JavaScriptを把握しているユーザがより深くJavaScriptを習得していくのに便利なサービスと言えます。なぜこんな仕様なのか、そう思ってしまう所もきっとあるでしょう。 new2JSはJavaScript製の
グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる
グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる 学習内容は全部で以下の7つのレベルに分かれており、17本のビデオと、レベルごとに用意された、実際に自分で操作して解いてみる75以上の例題から構成されています。レベルをクリアするとバッジがもらえるようになっています。 Level 1: Getting Started & Basic DOM and Styles Level 2: Advanced DOM and Styles Level 3: Working With the Console Level 4: Debugging JavaScript Level 5: Improving Network Performance Level 6: Improving Performance Level 7: Memo
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
プログラミング経験者が JavaScript を学ぶためのリソース - フリーフォーム フリークアウト
移転しました http://please-sleep.cou929.nu/20110721.html
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
JavaScript Patterns
TypeScript - All you ever wanted to know - Tech Talk by Epic LabsAlfonso Peletier
node.js ハンズオン資料 — node.js hands-on v1.0 documentation
node.js ハンズオン資料¶ このドキュメントは node.js をハンズオンを通じて学習するためにまとめた資料集です． プログラミングの基本を知っている Unix コマンドの基本を知っている JavaScriptの基本を知っている ことを前提に、node.js 上で動作するプログラムの作成を通じて、node.js を学習していきます。 最新版 ソース オンライン log 2010/10/30 絶賛作成中． 非同期IOメソッドを使う まで完了． 入れてほしいコンテンツがあれば @yssk22 まで．
YOUもCSSプロパティ覚えてJavaScript楽しんじゃいなよ - 三等兵
YOUもJSやっちゃいなよー！ジースジュニア(ジースJr.)に入っちゃいなよー！ええ？どんな活動をするかって？そりゃ決まってるよー、歌をうたったりダンスしながらJavaScriptのコーディングするんだよーアーハー！ さあ今日からキミもジースジュニアの一員だよー！やっぱりダイナミックが売りだからね！最新最先端技術（笑）のDHTMLやるよー！ダサイHTMLじゃないよー！死語じゃないよー！最低限これ覚えておくとジースジュニアとしてダイナミックに活躍できるプロパティ覚えたらどうかなーウーハー！ プロパティはここから選ばさせてもらってるZE☆ http://css-happylifezero.com/property/ ダイナミックに使いがちなCSSプロパティ の前にちょっと注意。moonshellというの使ってみました。横▲んとこ押すと実行されます。あとちょっと読み込みに時間かかるかもしれません
JavaScript基礎文法最速マスター - gifnksmの雑多なメモ
続々と増え続ける基礎文法最速マスターシリーズ(あまりにも増えてきたので他の言語記事へのリンクは別の記事に移しました)。 JavaScript 版は誰も書いていなかったようなので書いてみます。こういう解説記事的なものを書くのは初めてなので変なところがあったら指摘して頂けるとありがたいです。 JavaScriptの基礎概念についての解説はこちら：JavaScript基本概念最速マスター - TechTalkManiacs 1/31 23:58追記 コメント欄のos0xさんのご指摘を基に一部追記・修正を行いました。 2/2 2:52追記 switch文・正規表現・例外処理について追加しました。 2/2 6:44追記 コメントでfavrilさんにご指摘頂いた点(typo & コメント・サンプル追加)を修正・加筆しました。 2/2 7:15追記 トラックバックでLiosKさんにご指摘頂いた点(cal
JavaScript基本概念最速マスター - TechTalkManiacs
プログラミング言語の文法をまとめた最速基礎文法マスターが流行っていますが、それだけだと物足りないので少し視点を変えてJavaScriptという言語の基礎となっている概念について簡単にまとめてみようと思います。(基礎文法についてはこちらを参照してください) (20010/2/4 記述ミス Typoなどを修正しました) JavaScriptの基本概念 JavaScriptの基本となる概念は次の二つです。 連鎖指向 全てがオブジェクト 連鎖指向はプロトタイプチェーンやクロージャ、全てがオブジェクトであるという性質は連想配列やプリミティブ型などの性質に関わってきます。 連鎖指向 JavaScriptでは変数、オブジェクト、メソッドなどのリソースの利用において鎖のようにリソースを定義や宣言できるポイントが連なり、一番近くの宣言や定義に基づいてリソースの内容が決定される、という仕組みが採用されています
amachang - JavaScript 入門
プログラミングのこつ 無駄な名前を極力使わないこと。意味単位に名前空間を細かく階層的に分離すること。 ここで言う名前空間とは 名前空間とは、一つの名前が一意のものを表す空間。例えば、大きな目で見れば、日本語は自然言語の名前空間である。また、専門用語なども名前空間と考えることが出来る。 日本語 { コンニチワ = 挨拶 : : } 中国語 { ニーハオ = 挨拶 } 英語 { ハロー = 挨拶 } また、名前空間は重なり（優先順位）を持つ 同音異義語などの言葉は、それぞれの細かい名前空間の重なりによって一意のものに特定されると考えられる たとえば、「コイが好き」と言った場合 池に関する名前空間 { コイ = すいすいパクパク } チャライ話題に関する名前空間 { コイ = ドキドキきゅんきゅん } お茶に関する名前空間 { コイ = にがーい } 名前空間の優先順位を考えると、一意の意味を知
JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ:phpspot開発日誌
JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ 2009年08月18日- JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ。 ここ最近で巡回したもので便利そうなチュートリアルを以下にまとめてみました。 沢山あるので使えそうなものだけ覚えておくとよいかもしれません。 Quick Tip ・Resizing Images Based On Browser Window Size ブラウザサイズによって画像のサイズを変えるjQueryチュートリアル Horizontal Sub-nav with CSS & jQuery - Subnavigation Tutorial - CSS Tutorial - jQuery Tutorial 水平サブナビゲーション実現のためのjqueryチュートリアル Making
アイコン付きタブが可愛いアニメーションメニューを実装するチュートリアル:phpspot開発日誌
jQuery Tabbed Interface / Tabbed Structure Menu Tutorial | Queness アイコン付きタブが可愛いアニメーションメニューを実装するチュートリアル。 次のような美しいUIと共に、クリックするとアニメーションしながらメニューが切り替わるナビゲーションの作成チュートリアル。 デモページ HTML,CSSの構成についても分かりやすく解説されています。 JavaScriptはjQueryを使って実装されているみたいです。 サイトのサイドメニューとして置くと、スペースが有効活用できるだけでなく、オシャレ感を出すことができそうです。 関連エントリ 滑らかにアニメーション動作してナビゲーションにも使えそうな1KBのアコーディオンＵＩ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 デザインの参考になるユニークなナビゲーション集 j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/kent_ocean/items/3025263c0539000290ff
http://jsrecipes.org/
apple.com風の超クール検索候補窓作成チュートリアル＆サンプル:phpspot開発日誌