2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル - Qiita
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル環境構築TypeScriptライブラリReact TL;DR いろいろ書いていますが、一番書きたかったのは最初のライブラリと最後のReact Componentのプロジェクトの作り方ですね。ぱっとnpm installして、最初から型定義ファイルが入っていて、@typesを持っているライブラリを探したり、自分で.d.tsを書いたりしなくてもいい世界がやってきて欲しいな、という気持ちから書いています。 ここで紹介したTypeScript環境構築はすべて、自分用にYeomanのテンプレートとして作成したので、以下のジェネレータをインストールして選択したらそれでおしまいです。 @shibukawa/typescript (npmには公開していないので、checkoutしてビルドしてインストール
.mjs とは何か、またはモジュールベース JS とエコシステムの今後 | blog.jxck.io
Intro 長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、 .mjs という拡張子が採択された。 この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装していく上での作法が見えてきたことになる。 合わせてエコシステムが対応していくことで、長年の夢だった JS のモジュール化を進めていくことができるだろう。 ES Modules 徐々に揃いつつある ES Modules(ESM) の仕様は TC39 で行われており、その仕様については主に以下のような部分になる。 import や export と行った構文 module 内はデフォルト strict mode module でスコープを閉じる module 内の this は undefined etc 逆に以下は TC39 での策定範囲外となる どう Module を読
すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ
javascriptの開発では、sassやtypescriptなどのコンパイル、minifyやautoprefixerでの最適化、依存関係を解決しbundleするなど多様な工程があるので、属人化・職人依存を避けるためにタスクランナーでの自動化が昔から当たり前に行われています。 webpackはこの手のツールのデファクトです。webpackはタスクの自動化支援ではなく、なんでもjsにまとめるという仕事をうまくやる事に特化しています。gulpやbrowserifyで行なっていたようなタスクの自動化はnpm scriptで十分やん、という割り切りを感じます。 なんでもjsで扱えるようにするので、cssや画像やhtmlもjs内にロードでき、設定が煩雑になりにくくなります。 webpackのloaderという仕組みがjsへの組み込みや最適化をうまくやってくれるのですが、どういうものか検証していきまし
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID
ElectronでGyazoっぽいUIを実現する - Qiita
Electron (旧atom-shell)を使えば、JSやモダンなWeb技術を活かしてクロスプラットフォームなPCアプリを作ることができる。 APIが充実していて、Webページをただ移植しただけの単純なアプリだけでなく、割と手の込んだUIも実現できるかもしれない。 たとえば、Gyazoのようなスクリーンショットを撮るための領域選択のUIを作ることができる。 実装方法 画面の全体に透明なウィンドウを作って、その上の透明なWebページでmousedownなどのイベントにあわせて必要なUI要素を描画する。 https://github.com/uiureo/electron-crop-rect/blob/master/main.js app.on('ready', function () { const Screen = require('screen') const size = Scree
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
一人React.js Advent Calendar 2014 - Qiita
React.jsについての基本的なところを書いていきます！ 公式読めばわかるようなことが多いですがReact.jsに興味をもつきっかけにでもなれば...。 v0.12.1で確認しています。 こっちは一人で書くように作ったものなので書きたい人はVirtualDOMに書くといいと思います。 (書く人がいなくて1人で書いているわけではない) この記事は古いので下記の更新情報も参考にしてください http://blog.koba04.com/post/2015/03/05/react-js-v013-changes/ http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/ http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ http://blog.koba04.
LGTM画像作成ツールのLGTM Editorを作ったぽよ〜〜 - uzullaがブログ
「やったー JS で LGTM ジェネレターできたよー！ #HTML5 #File_API」 http://blog.hateblo.jp/entry/2014/02/10/193257 http://ochinchin.org/~udonchan/lgtm_gen/ これがとてもいいなと思ったけど、数字を毎回いれるのが結構だるかったのでめんどくて放置してたEaselJSの勉強のために作った。 （LGTM.inみたいなサイトを作りたいとも思っている） どこにあるの？ http://s.cfe.jp/lgtm/ 概要 Javascriptで全部動作しています。 文字をドラッグで移動できます。 あとはパクりです、大変もうしわけない。 20140211 17:40追記 DnDアップロード、URL指定ロードを追加した iPhoneとかでもうごかせるようにカーソルを追加した やりたいこと Fontを
お手軽に画像の読み込みをハンドリングする、今どきな方法 - latest log
2008年のエントリ http://d.hatena.ne.jp/uupaa/20080413/1208067631 のリニューアル版です。 (ε・◇・)з o O ( 2018年頃にでも、もう一度調べて書きたいと思います。
普通のrailsアプリにbackbone適用して思った事 - lxyuma BLOG
普通のrailsのwebアプリにbackboneを埋め込んでみて思った事等を書く。 賛否あるかもだが、あくまで個人的な意見。 １）ウチの現場でBackboneを使うべきか否か？ どこも初めに考える事。 大規模になったら使えとか、Single Page Applicationなら使えとか、色々意見あると思うが、 今時の普通のwebアプリならjsガリガリ動くので、迷わずBackbone使っていいと思う。 ※単調なB向けの基幹システム作ってるとかは例外として。 どこで使う？ 別に全てのpageでBackbone使う必要は無いけど、 フォーム送信系で色々js動かす所とか、検索条件指定、絞り込みとか、 画像/詳細表示、LightBoxとか、 こういう所でjsガリガリ書かないと行けなくなったら Backboneでモジュールを整理していけばいいと思う。 実際使ってみてどうだったか？ before 元々、
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方Read less
クライアントサイドMVCには何が必須? - はこべにっき ♨
最近何度かクライアントサイドMVCフレームワークであるところの、Backbone.jsを使ってコードをかいたりしていたので、その時に感じたことをまとめて Kyoto.js で話してみました。 発表資料 "何がMVCをつなげているのか" Backbone.jsではMVCの各層をつなげるために、Backbone.Eventsというオブジェクトが用意されています。Backbone.jsのModelとViewのインタラクションは、ベースになっているBackbone.EventsによるObserverパターンによって実現されています。実際にBackbone.jsでコードを書いてみると、便利な機能はいろいろあるもののBackbone.Eventsの存在がMVCを実現するのに重要であることがわかります。 そこつきつめると、Backbone.EventsのようなObserverパターンを簡単に実現できるよ
Tincrを使って、Chrome Developer Toolsでの変更をソースコードに反映する
--> tree app app ├── 404.html ├── favicon.ico ├── index.html ├── robots.txt ├── scripts │ ├── main.js │ └── vendor │ ├── jquery.min.js │ └── modernizr.min.js └── styles └── main.css Chrome Developer ToolsのTincrタブでProject Typeを選択、Http Serverの場合はルートディレクトリの設定のみ。 Enable Loggingにチェックを入れておくとConsoleタブにログが出てくる。 Content for url http://localhost:8000/scripts/main.js matches local file /Users/tnishibayashi/d
データを分かりやすくスタイリッシュに可視化できるJavascriptライブラリ「D3.js」
どんなに情報をまとめても、それを可視化して見ている人にうまく伝えるのは至難の技です。そんな時にデータをスタイリッシュかつ見やすいグラフにしてくれるのが、様々なデザインのJavascriptがダウンロード可能なライブラリ「D3.js」です。 D3.js - Data-Driven Documents http://d3js.org/ D3.jsを使って作ったグラフの事例を公式ギャラリーから見ることが可能で、これらのグラフにもとになる素材(スクリプトのソース)がGitHubで入手可能です。 Gallery · mbostock/d3 Wiki · GitHub デザインの一例は以下から。 ◆:Bubble Chart 作成例によっては、ページに直接コードが記載されているものもあります。 ◆:Four Ways to Slice Obama’s 2013 Budget Proposal - In
Meteor.js - naoyaのはてなダイアリー
http://www.meteor.com/ で公開された Meteor.js を少し触ってみました。TechCrunch なんかでも話題になっていましたね。 Meteor.js は JavaScript によるウェブアプリケーションフレームワークですが、クライアントサイドでもサーバーサイドでもない、"Isomorphic" なフレームワークです。 コンセプトとしていくつか特徴があるのですが、その最たるものは "Reactive Programming" で、モデルやセッションなどのストレージを更新するとその更新内容がリアルタイムに、そのアプリケーションを開いている全クライアントに伝わるようなアプリケーションを簡単に作ることができます。 この辺は実例を見るのが早いです。 http://www.meteor.com/examples/leaderboard ここにある動画では、あるブラウザで
Understanding MVVM - A Guide For JavaScript Developers
April 10, 2012 MVVM (Model View ViewModel) is an architectural pattern based on MVC and MVP, which attempts to more clearly separate the development of user-interfaces (UI) from that of the business logic and behaviour in an application. To this end, many implementations of this pattern make use of declarative data bindings to allow a separation of work on Views from other layers. This facilitates
JSもついに最初の言語として推奨できるようになったぞ！というBusterJSの紹介
自己紹介 ども。KAYACでJS書いてる@kyo_agoです 最近はスマホ環境で色々JS書いてます 今回はかなり内容に主観が入ってます
Scaling Isomorphic Javascript Code | Nodejitsu Inc.
Nodejitsu has joined GoDaddy We are excited to join GoDaddy to help spearhead their largest Node.js product: Website Builder. Please read our blog post to learn more about customer transition plans and our continued support for Open Source within the node community. Want to know all the details? Read the full blog post or read the GoDaddy Announcement. Other popular posts - Scaling Isomorphic Java
JavaScript最新動向 〜WebSocket編〜
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS
複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量（2.3KB）スクリプトを紹介します。 Head JS [ad#ad-2] 下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS 外部JSファイルの読み込み JavaScriptの管理 CSSのサポートが異なるブラウザへの対応 HTML5非対応ブラウザへの対応 スクリーンサイズに合わせた表示 Dynamic CSS CSSを特定のページのみに CSSをブラウザごとに指定 外部JSファイルの読み込み 通常、複数のJavaScriptファイルを外部ファイルとして読み込ませるとブロッキングが生じます。 そのブロッキング解消し複数のファイルを並列
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
