秋のJavaScript祭 in mixi 〜秋のJavaScript収穫祭〜 の当男子寮です。 https://javascript-fes.doorkeeper.jp/
「ホームページ屋さん」とJavaScriptの未来。
秋のJavaScript祭 in mixi 〜秋のJavaScript収穫祭〜 の当男子寮です。 https://javascript-fes.doorkeeper.jp/
春からはじめるモダンJavaScript / ES2015 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
Facebook製のJavaScriptテストツール「Jest」の逆引き使用例 - Qiita
はじめに みなさん、日頃JavaScriptのテストはどのように行っていますか？ 昨今ではAngularJSやReactJSを始め、JavaScriptのフレームワークやライブラリを使用してのフロントエンドの開発が当たり前のようになってきております。 ではそのフロントエンド、JavaScriptのテストはどんなツールを使っていますか？ mochaやpower-assert、chai、Karma、Jasmine等を組み合わせて使用してテストしているでしょうか。 前置きが少し長くなりましたが、Facebookが開発したオールインワンな「Jest」というツールのReactでのHowto的な使い方から実際のテストでの使用例を交えて紹介したいと思います。 ちなみにこのJest、最近リリースされて話題になったパッケージ管理のYarnでも使われています。 対象バージョン Jest:22.0.4 Reac
サーバサイドレンダリング、してますか?
サーバサイドレンダリング、してますか? ~ 憧れのIsomorphic JavaScript ~ Meguro.es #6 2016/10/13 http://meguroes.connpass.com/event/39081/
セミコロンは省略？人気スタイルガイドに学ぶJavaScriptのコーディング規則
インデントにタブとスペースのどちらを使うのがいい？ JavaScriptにセミコロンは付けるべき？ JavaScript Standard Styleを使えばそんな論争にけりがつくかもしれません。 最近、注目を集めている@ferossのJavaScriptスタイルガイド、JavaScript Standard Styleを紹介します。チーム内での開発が円滑になり、プログラミングがより楽しくなります。 JavaScriptスタイルガイドのコーディング規約は、タブとスペースのどちらが良いかといった不毛な議論を無くし、コードに一貫性を持たせてくれます。JSLintやJSHint、ESLintといったLinterで使用できる多くのスタイルガイドのうちの1つです。 もしLinterが分からなければ、SitePointの記事『A Comparison of JavaScript Linting Too
ReactでもDOMの木構造はつらいよ問題 - しゅみは人間の分析です
nippo.wikihub.io r7kamura Commented on 2016-09-01 何も考えずにReact, Redux使うような気はするのだけど、Reduxを使わない場合は各位どうやってState管理してるんでしょうか？ 親コンポーネントがstateとメンバ関数を持っており、子コンポーネントはpropsかcontext経由でその値を参照しながら描画とイベントバインディングを行っています。 日報で疑問を書いたら、id:r7kamuraさんが答えてくれた。 immutable.Recordに状態とロジック押し込んでそいつをContainer Componentのthis.stateに入れておく設計とか。 — 下京区 (@non_117) 2016年9月1日 facebookが想定してるのはこの用途かな。 DOMサブツリー間で状態の共有が発生するか、設計段階で予見するの難しそう
JavaScript の難しさとは何か - mizchi's blog
JSの学習コスト高いかという問題、言語のコア自体はシンプルだが細かい == とかのハマりどころが多いのと、言語機能自体がシンプルすぎてエコシステムを理解してモジュールを扱うところに辿り着くのが大変、という問題に分類できる— 現場の声 (@mizchi) 2016年8月15日 jQueryの学習コストは、DOMはツリーなんだよという概念の獲得と DOM API の抽象サブセットを覚えるというだけで、2016年現在は jQueryによるUI設計論(ここが高まるとBackboneとかその辺)みたいなものに手を出す必要がないなら、そんなでもないんだろうな— 現場の声 (@mizchi) 2016年8月15日 Reactが難しいと言われる場合、仮想DOMという概念がやや難しい、というか非常にCS的なアルゴリズムとデータ構造が背景にあって、その上で単純なトップレベルAPIとアルゴリズムを理解してないと
JavaScript中級TIPS - Qiita
文字列リテラル HTMLを含む文字列を生成する際に便利なため、囲む時はシングルクォート'hoge'がよい セミコロン 末尾にセミコロンをつけなくても解釈してくれるが、バグを生む可能性があるのでセミコロンはつけるように習慣化する ES6のclass記法のメソッド末尾にはセミコロン不要 同値比較 基本的に===をつかう。==だと寛容過ぎる解釈のため、バグを生むことがある。 短絡評価 hogeFuncの引数にtrue相当の値が入ってきた場合、 ||の右側は読まれない。 hogeFuncの引数にfalse相当の値が入ってきた場合、 （false, null, undefined, NaN, "", 0） ||の右側を読みにいく。
プロセスをしょうもないErrorで落とさないように頑張る
Le document présente un extrait de code JavaScript impliquant des requêtes HTTP et la gestion des erreurs. Il montre comment faire une requête à une URL et comment gérer les erreurs potentielles via des blocs try/catch. L'exemple inclut également un middleware pour gérer les erreurs dans une application Express.
jQuery + Flux という選択肢 - peroli Developer's Blog
2016 - 05 - 27 jQuery + Flux という選択肢 JavaScript Front-End こんにちは、 SKAhack です。普段はMERYのWebフロントエンドを主に書いています。 今回はMERYのフロントエンドで採用している jQuery + Flux という構成を紹介してみたいと思います。 なぜReactではなく jQuery か 普通はReact + Fluxで語られることが多いですが、MERYでは JavaScript の ソースコード の大半が jQuery に依存しており、簡単には jQuery を捨てられない状態です。 また、Viewの変更をする２つのライブラリを 共存 させるのも良くないですし、MERYのサービス特性上、現時点で1画面を頻繁に書き換えるような処理は少ないこと、ReactがサポートしていないIE8など古いブラウザもサポートしているとい
Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ
Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap Version 3 to 4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 4で変わった点 Bootstrapのファイル構造 Bootstrap 4のインストール グリッドシステムのアップデート リセットは、「normalize.css」から「reboot.css」に classの変更とアップデート タイポグラフィ テー
初心者ツクラーの為のJavaScript入門 - トモタカラボ
要約 JavaScript、難しいと思いませんか? プログラミングなんて、やったことがない。難しくて分からない。そんな人の為に書きました。 01 はじめに この記事は、ツクールMVに適したJavaScript入門を紹介します。主に以下の人が対象です。 プログラミングって何だか分からない。if文? for文?? 何ですかそれは??? これからJavaScriptを学ぼうと思っている ツクールMVでJavaScriptプラグインを作ってみたい でも、何を揃えれば良いのか、踏み出し方がわからない ツクールMVでJavaScriptプラグインに触れるにあたり、いちばん簡単な説明書のつもりで書きました。JavaScriptプログラミング学習前の、必要な前提知識・ツール・書籍を紹介します。 02 奥深きJavaScript界への第一歩 RPGツクールMVには、JavaScriptプラグイン機構が搭載
2015年までにWebのフロントエンドが辿ってきた道 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 背景 僕が本格的にWebのエンジニアになったのは2014年頃からで、早いものでもう丸2年ほど経ってしまうことになります。 Webに転向してからは主にフロントエンドエンジニアとして勤務してきました。 よく言われることですが、最近のフロントエンドの趨勢は本当に早いです。 最初はキャッチアップに苦労したことを覚えています。 しかし段々と新しい何かを覚えることは苦でなくなり、今はこの流れに身を置くことが楽しいと思えるようになってきました。 激動の趨勢の中で、Webのフロントエンドエンジニアが口にするパラダイムは日ごとに変化しています。 この記事
WEB ブラウザで起きた JavaScript のエラーをサーバに送りたい - BattleProgrammerShibata
本記事は1分で実現できる有用な技術 Advent Calendar 2015の4日目の記事です。 WEB アプリケーションを開発していると「ユーザのブラウザで起きたエラーをサーバに送って DB に収集したい」という要望が出てきたり、外部からお願いされたりすることがあります。 こういう場面で、「どうやればいいのん」と悩む方は少なくないようです。 このような場合にはイベントハンドラの onerror を利用すると便利です。 エラーハンドリングしたい対象のコードより先に呼ばれる位置で、次のようなコードをぺいっと貼っ付けておきましょう。 そうそう、try-catch している場合には onerror に引っかからないので、そういった場合には個別に呼び出してください。 window.onerror = function(errorMsg, fileName, lineNumber) { var er
「はしれ！コード学園」ってマンガがいいかもしれない。 - 攻めは飛車角銀桂守りは金銀三枚
今日見つけた「はしれ！コード学園」ってマンガをご存知でしょうか？ たま〜に「Google Adsense」かなんかの広告に表示されてます。 はしれ！コード学園 現在第３回まであるようですが、IT業界の人はなんか笑えるんじゃないでしょうか。 https://codeiq.jp/magazine/2015/10/30057/codeiq.jp https://codeiq.jp/magazine/2015/10/31456/codeiq.jp https://codeiq.jp/magazine/2015/11/33256/codeiq.jp わたしは仕事で「Javascript」使っているのでやっぱり「JSちゃん」を推しておきましょか。 ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング (NextPublishing) 作者: 田中賢一郎出版社/メーカー:
Electronを使ってJavaScriptでデスクトップアプリを作る
はじめに こんにちは。デスクトップアプリケーションを手軽に作りたいと思ったことはないでしょうか？ 普段Webアプリケーションを開発している場合、 デスクトップアプリケーションを作ろうとすると、開発言語やライブラリがWebアプリケーションとは違うので、別な知識が必要になるのと複数のプラットフォームで動くものを作ろうとすると大変ですね。 そこで、今回はWebアプリケーションのKPTBoardのJavaScriptとCSSのコードを一部流用と修正して、Electronで動かしてみました。 Webアプリケーション版のKPTBoardと違う点 今回はWebアプリのデスクトップクライアントアプリではなくて、単体で動くデスクトップアプリとして作ってます。 複数人には対応してないです。 投稿した内容は、データーベースではなくてアプリのlocalStorageに保存されます。 Electronとは http
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2年運用したサービスのフロントをReactで書き換えたい話
漢は黙ってjQuery
