型安全Storageの実装を通して学ぶ! TypeScriptの型
まえがき TypeScriptの型システムは、他のプログラミング言語にはないユニークな機能を多く備えています。これは、動的型付け言語であるJavaScriptで書かれたコードの振る舞いを(静的)型によってモデル化するという難題に対する答えであり、結果としてTypeScriptの型は比肩するものがないほど強力な表現力を持つことになりました。 TypeScriptの型システムが持つ機能の詳細な解説に関しては、既に素晴らしい記事が星の数ほどあります。しかし、それらの機能をどう応用すれば作りたいものを作れるのか?という知識は、実際にものを実装してみるという活動を通してしか得られないものだと感じます。 そこで、この記事では型安全なStorageラッパーの実装を題材とし、その過程を共有していきます。 想定読者 TypeScriptの型システムの機能に関する知識はあるが、応用方法がいまいちピンとこない方
リファクタリングして学ぶTypeScriptでクリーンアーキテクチャ - Qiita
概要 最近，ASCII Dwangoさんから「クリーンアーキテクチャ」という本が出版されました． そこに書いてある内容は素晴らしいものでした．しかし，実際に組んでみた場合，どういう風に作るのが良いのか？どういう問題があるのか？そういった疑問が湧いてきました．そこで， 実際に非クリーンアーキテクチャのコードをリファクタリングしていくことで，クリーンアーキテクチャの要点を感じる． という試みです． クリーンアーキテクチャとは ここでは簡単にしか説明しませんが，実際に本を読んで勉強することをお勧めします． 「クリーンアーキテクチャ 達人に学ぶソフトウェアの構造と設計」のp200によると フレームワーク非依存：アーキテクチャは，機能満載のソフトウェアのライブラリに依存していない．これにより，システムをフレームワークの制約で縛るのではなく，フレームワークをツールとして使用できる． テスト可能：ビジネ
Shows
AI is suddenly everywhere. Do you need to go and get a shiny machine learning degree to remain competitive? John Maeda says not to worry. He’ll show you how to cook delicious dishes into your coding repertoire with his new show - Mr. Maeda’s Cozy AI Kitchen. Find out how you can use GitHub Copilot, an add-on that is powered by AI, to get helpful suggestions when writing code or documentation. This
日経有料記事の類似記事を無料で読めるChrome拡張をES6+Webpackの最小構成でつくった - Qiita
require('babel/register'); module.exports = exports = [ require('./config/webpack'), ]; import config from './index'; const globals = config.get('globals'); const paths = config.get('utils_paths'); const webpackConfig = { entry: paths.src('entry'), output: { path: paths.project(config.get('dir_dist')), filename: 'main.js' }, plugins: [], module: { preLoaders: [ { test: /\.js$/, loader: 'eslint', i
SkyWay MultiPartyを使ってグループチャットを作ろう
SkyWay MultiPartyを使ってグループチャットを作ろう 本間 咲来（NTTコミュニケーションズ） 連載2回目の今回は、7月28日にリリースされたライブラリ、SkyWay MultiPartyのチュートリアルをお届けします。 SkyWay MultiPartyは、一言で言うと多人数によるビデオ・テキストチャットを『簡単に』作るためのライブラリです。 本ライブラリを使用することで、グループビデオチャットやテキストチャットを、 ほんの20行程度のJavaScriptコードで実装をすることができます。 サンプルコードを用意していますので、手元で実行しながら進めてみましょう。 10行ビデオチャット 以下のスクリーンショットをご覧ください。 まずはこのような複数人が参加できるビデオチャットシステムを、10行程度のJavaScriptコードで実装してみましょう。 サンプルコードを以下に記載し
MacからiPhoneに遷移させよう - クックパッド開発者ブログ
こんにちは。モバイルファースト室の中村(@_nkmrh)です。 突然ですが、Mac上で探したレシピをすぐiPhoneで見られると便利だと思いませんか？ 先日リリースしたiOSクックパッドアプリではそれが出来るようになりました。 とても便利なのでぜひ活用してください。 ※ 実はこの便利機能、次のバージョンで一旦取り下げ、問題を解決したあとで再度導入することになりました。以降の記事で事情を説明します。 Mac OS X YosemiteがインストールされたMac、iOS 8がインストールされたiPhone 5以降、iPad 第4世代、iPad Air、iPad mini、iPad mini Retinaディスプレイモデル、iPod touch 第5世代でご利用いただけます。 MacとiPhoneに同じiCloudアカウントを設定して下さい。 これがその様子...。 Mac上のSafariでクッ
ユーザとユーザを多対多で関連付けるモデルを共通化する - Hidden in Plain Sight
思いのほか前回のRailsプチ・デザインパターンの紹介に反応があったので、こういう小ネタも出していったほうがいいのかな、ということで第二弾。 ソーシャル系アプリだと、ユーザとユーザを関連付ける多対多のモデルがたくさんでてきます。たとえば、一般的なところではフォローとかブロックとか足あととか。さらにデーティングサイトになると、ウィンクだったり、Secret admirer（こっそりlikeするけど両思いだったらおめでとうって通知がくるってやつ）だったり、いろいろなモデルがこのパターンにあてはまります。 この場合、「AがBをフォローしている」「BがAをフォローしている」「AとBがお互いにフォローしている」という3つの状態があるわけですが、相互フォローの状態は「AがBをフォローし、かつBがAをフォローしている」と読み替えてSQLでも記述可能なので、以下ではシンプルに単方向のグラフで全てを扱うもの
結婚式二次会用に Node.js x ブラウザでタイピング対決アプリを作ってみた - 凹みTips
はじめに 先月、友人の結婚式の二次会でタイピング対決をしたいとの企画を、幹事の友人から受けました。面白かった要件としては、 二人の顔を 2 台のカメラで映したい タイピングしてる様子をリアルタイムで見たい というものです。これをサーバは Node.js で、クライアントはブラウザで作成しました。エントリ書いてもいいよ、と許可を頂いたので、今後似たような依頼を受けた方のご参考になるように、エッセンス部分をご紹介します。 （追記：2013/11/20） 幹事さんも記事を公開されました： http://tjun.org/blog/2013/11/wedding-typing/ やったこと ホスト PC 側で新郎新婦それぞれの PC からのログインを待ち受けします。イイ感じに○で切り抜いてくれるような PNG をイラレで作っておきました。 それぞれの PC からログインしてもらいます。 ログインし
Mini AJAX File Upload Form
In this tutorial we are going to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually. For the purpose, we will combine the powerful jQuery File Upload plugin with the neat jQuery Knob to present a slick CSS3/JS driven interface. The HTML As usual, we will start off with a basic HTML5 document: <!DOCTYPE html> <ht
Emmet CSSショートコード
Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。 私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの記述がより使いやすくなったので、紹介します。 Zen-Codingから使える CSSの展開は、ほとんどのZen-Codingから使えます。 Emmetではさらに使いやすくなりましたが、Emmetは現在開発中のため、不安定な部分があります。不安な方は、Zen-Codingをおすすめします。 プロパティに、ショートコードが用意されており、+でつないで展開(Expand Abbreviation)する形
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
node.jsとjQueryでスクレイピングするウェブアプリの作り方
やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰ セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。 と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。 で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。 今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイ
いろんなJavaScript MVCフレームワークで作られた同一のToDoアプリで違いを学ぶ「TodoMVC」
JavaScriptでMVCの構造を持つアプリケーションを開発するためのフレームワークが10種類以上登場し、この分野が盛り上がっていることは、以前の記事「JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ」で紹介しました。 その各種JavaScript MVCフレームワークの違いを学ぼうというのが、Webサイト「TodoMVC」です。 ToDoMVCでは、AngularJSやBackbone.js、Ember.js、Spine.jsなど主要なMVCフレームワークを用いて開発したToDoアプリをまとめて公開しています。 開発されたToDoアプリはほぼ同一の外観や機能を備えています。これにより、それぞれのソースコードを見ることによって、各MVCフレームワークがどのようなコーディングスタイルを用いているのか、どのような機能を提供しているのか、といった違い
[Android] 起動先アクティビティから結果を送り返してもらう方法
startActivityForResult により起動させたアクティビティは終了したときに 起動元に Intent インスタンス を送る。 これは起動元の onActivityResult に渡されるのでここで返ってきたデータの処理を行う。 起動元のアクティビティ package jp.fernweh; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView; public class StartActivityForResultT
[CSS]タブコンテンツにCSS3アニメーションを少しだけ加えてかっこよくするチュートリアル
JavaScriptを使用しないで、スタイルシートでタブコンテンツを実装するポイントから、コンテンツの切り替えやタブのフォーカス時にちょっとしたCSS3アニメーションを加えるチュートリアルを紹介します。 Demo 4: 垂直型タブ 実装 HTML タブの各コンテンツはdiv要素で、タブはinput要素で実装します。input要素のチェックでタブを切り替えます。 <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">About us</label> <input id="tab-2" type="radio" name="radio-set"
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
JavaScriptをシンプルに書けるCoffeeScript使ってみた
JavaScriptをシンプルに書けるCoffeeScript使ってみた CoffeeScript は JavaScript を Ruby や Python ライクに書けるので、タイプ数が減ったり、コードの見通しが良くなったりといったメリットがあるようです。 この記事では CoffeeScript の基本構文と使い方をご紹介します。 投稿日2012年02月13日 更新日2012年02月13日 変数に var は必要ない では、基本的な構文からみていきましょう。 CoffeeScript num = 3245 console.log num JSなら var num = 3245; と書くところですが「var」も「 ;（セミコロン）」も必要ありません。 2行目の console.log num は console.log (num) とカッコで囲んでも大丈夫です。 これをコンパイルすると次の
jQueryでテーブル（table）を操作する小回り系コード5種
jQueryでテーブル（table）を操作する小回り系コード5種 テーブルを操作するのに大掛かりなことはプラグインがいろいろありますのでそちらを使うとして。 ここでは、わりと細かいことをjQueryでやってみます。 投稿日2011年08月31日 更新日2011年08月31日 html 始めに操作するべきテーブルを用意します。 ごくごく普通のテーブルですね。 html <table class="table01"> <tr> <th>商品名</th> <th>入荷日</th> <th>価格</th> </tr> <tr> <td>椅子</td> <td>2011-08-01</td> <td>¥ 2,800</td> </tr> <tr> <td>机</td> <td>2011-08-08</td> <td>¥ 6,800</td> </tr> <tr> <td>本棚</td
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/exilias/items/f8a4a7bfb8cf3010c0a6
Building an iScroll "Kitchen Sink" | Envato Tuts+