ぷよぷよプログラミングとは プログラミング学習環境『Monaca Education』において、セガが展開するアクションパズルゲーム『ぷよぷよ』をプログラミング学習できる教材です。 製品版と同じ画像素材を利用して、世界中で使われるコンピュータ言語を使い、プロが使う開発環境で本物のプログラミングをお楽しみください。 本コンテンツは無料でご利用いただけます。
![【公式】ぷよぷよeスポーツ×プログラミング](https://cdn-ak-scissors.b.st-hatena.com/image/square/4e4f4363f59b104be9893952d07f1df01145c761/height=288;version=1;width=512/http%3A%2F%2Fpuyo.sega.jp%2Fprogram_2020%2Ffacebook02.jpg%3F20201224)
一部修正しました Udemy で React コース公開してます。(絶対 Udemy の 1200 円割引価格にはしないので、このリンクから買ってもらうのが一番お互いに得です。) Udemy React + Redux コース 本発表における Modern JavaScript とは何か Phase 1 として以下の環境での開発ができれば Modern JavaScript に入門できたものとする。 Webpack, Parcel 等の module bundler による "module system" の活用。 ES2015+ や TypeScript といった "Compile to JS *1" の使用。それに伴う Babel によるトランスコンパイルツールの使用。 ESlint, Prettier といった集団開発における、ソース品質安定のためのツール の使用。 ここまでのツール
まじな話をすると、N予備校のプログラミング入門コースやるのがオススメ。 https://www.nnn.ed.nico 一日8時間勉強時間があるなら、だいたい一ヶ月で終わる内容。 月額1000円だけどしっかり勉強すれば一ヶ月の無料期間中に終わると思う。 もともとN高等学校のノンプログラマーの生徒をWebエンジニアとして就職させるために作られたカリキュラムで講師曰く去年はこれで二人エンジニア就職を決めたらしい。 内容も相当親切に説明していて、プログラミングで何か作るだけじゃなくて、就職に必要な環境構築やセキュリティまでみっちりやる。 http://qiita.com/sifue/items/7e7c7867b64ce9742aee#%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88%E3%82%92%E3%82%82%E3%81%A8%E3%81%AB
こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます!! この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣
フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、
(訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。) モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。
どうも、まさとらん(@0310lan)です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか? Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います! ■多機能な「写真ギャラリー」を組み込めるライブラリ! ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
NerdyDataというソースコード検索エンジンを最近知りました。 通常の検索エンジンは、タグを取り除いたページ内のコンテンツが検索結果に表示されます。けれど、NerdyDataは、サイトにある生コードを検索することができます。 これを、使うことにより、コードの具体的な利用例なども見ることができ、便利だったので紹介です。 photo by Ruiwen Chua NerdyDataとは NerdyDataは、世界中の1億4000万サイト以上のソースコードの中から、HTML、CSS、JavaScriptのコードを直接検索できる、ソースコード検索エンジンです。 Nerdyという単語は、あまり聞き慣れなかったので「どういった意味だろう?」と調べてみたら以下のような意味でした。 オタクっぽい A系, エー系, 秋葉系, アキバ系 おそらく、いい意味でPCオタク向けのデータが詰まった、ギーク御用達の
編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから photo credit: nyuhuhuu via photopin cc 「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第6回目のテーマは「JavaScriptの基礎」です。 前回は「これからプログラミングを学び始める方へ」というテーマでお送りしました。今回はより具体的にプログラミングを学んでいただくために、JavaScriptについてご紹介していきます。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した
JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの? モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',
11/7発売予定の書籍「ノンプログラマのためのJavaScriptはじめの一歩」のはじめにと1章が先行して技評のWebサイトで公開されました。 はじめに 1章 1章はイントロ的なところで、JavaScriptを学ぶ前にJavaScriptの動かし方やデバッグツールの使い方について解説しています。 また、本書籍の2章以降で解説するスライドショーのサンプルプログラムも1章で登場するため公開されています。次のようにボタンを押すと次の画像に行くというだけの、簡単なサンプルプログラムです。 {::nomarkdown} {:/nomarkdown} 技評のWebサイトからも実際に試すことができます。 JavaScriptのソースはこんなかんじです。全体で90行程度、コメントや空行を除くと40行程度です。 /** * 簡易スライドショー * * nextボタンを押したときに画像を切り替える簡単な *
どうもこんにちは。 Aiming で東京開発グループのゼネラルマネージャをやっている小林です。 8月に mobage と Yahoo! モバゲー で ロードオブナイツ というシミュレーション RPG をリリースさせて頂きました。 そして、先週、 Yahoo! モバゲー版の PC ブラウザ専用デザインをリリースさせて頂きました。 今回リリースしたものは元々 Unity で作られていた iOS アプリ版 Lord of Knights を HTML5 で書きなおしたものです。 (今は Android 版 もあります) HTML のポチポチゲーをネイティブに移植したというのはよく聞く話ですね。 ですが、逆にリッチなネイティブアプリを HTML5 に移植し、かつスマフォブラウザと PC ブラウザで同じものを動かすなんてのは前例が見当たりませんでした。 技術的ハードルが高かったことに加えて期日がタイ
昨日 @bekkou68 さんに「前島さんってどうやってRubyやRails関連の情報を収集しているんですか?」って聞かれたのでまとめてみます。とりあえず海外のブログ限定で。日本ブログ編は気が向いたらやります…。 RailsCasts 有名すぎて説明不要かもしれませんね。毎週2つ(うち1つは有料購読が必要)の Rails 関連動画をアップロードしてくれているサイトです。良質な情報を定期的に届けてくれるすばらしいサイトですね。1ヶ月9ドル払って有料購読する価値は間違いなくあると断言できます。動画中で紹介しているライブラリの情報もすばらしいですが、コード例もかなりRailsっぽく綺麗に書かれていて大変参考になります。 RubyFlow いろいろなRuby開発者のブログの更新情報をまとめたブログ。簡単な紹介文に各ブログのリンクがくっついているような形式です。日によってばらつきがありますが、だいた
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
Meteorとは? Meteorは、2012年4月に彗星のように登場した、新たなアプリケーションプラットフォームです。この原稿の執筆時で、バージョンは0.3.6とされており、まだまだプレビュー版の域は超えていません。また、現状ではUNIX環境(MacOS Xを含む)でしかうまく動作しないようです。 しかし、Webアプリケーション開発をとことんまで素早く、楽に行えるようにするためのさまざまな仕組みが盛り込まれていることから、登場直後からかなりの注目を集めています(公式サイトには、「1日か2日でプロトタイプを、2~3週間で製品レベルのアプリを構築できるようにする」とあります)。 MeteorはMITライセンスに基づくオープンソースプロジェクトとして、Github上で公開されています。現在4人の開発者がフルタイムで開発に従事しており、1年以内に1.0をリリースする予定だとされています。 M
これは週末やりたいな−。と思った@HIROCASTERでございませう。 いまどきのRubyとRailsの学び方として取り上げたことのあるCode Schoolが今週末だけ無料開放されるようです。 みんなが考える、ちょっと退屈なオンライン学習とは一線を画すコンテンツですので、ぜひやってみてください。 Rubyの基礎からRuby on RailsやjQuery, Backbone.jsのオンラインコースまで全て無料です。 正確には 5/18 18:00 〜 5/20 23:59(東部夏時間) 日本時間を計算すると 5/19(土) 09:00 〜 5月21日(月) 14:59 です。 おすすめコース無料コースのRails for Zombiesがおもしろいのですが気になったコースをピックアップします。 Anatomy of Backbone.js – Code School Backbone.j
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト! 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
JavaScript でアニメーションを作る アニメーションとは何? ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの? setInterval の意味が分からない こんな感じで書けないの? <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く