Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
JavaScriptの循環importを図で可視化してみた - Qiita
先日、JavaScriptファイルのロード中に、循環importによる初期化エラーが出て困ったので、図をつくって可視化してみました。 生成物は一番下にあります。 JavaScriptにおける他ファイル参照 ブラウザ上で動くJavaScriptコードを書くうえでは、奇妙な制約が多々あります。 言語自体が奇妙な場合も多いですが（本当に多い！）、他ファイルのimport的な機能は、もともと「ブラウザが通信してソースファイルをダウンロードしないといけない」という都合もあるため、なかなかに無茶な仕組みになっています。 そもそも最近までimport自体が存在しなかったので、適当なライブラリで専用の記法を使うか、トランスパイラで糖衣構文に変換するという手法が用いられています。 2015年のECMAScript2015（ES6）でようやくimportという構文が仕様に入りましたが、今のところどのブラウザも
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
JavaScriptで継承を使わないプログラミングスタイル - JavaScript勉強会
JavaScriptでは「継承による差分プログラミング」はモダンではない、という意見がありました。 なるほど、「継承による差分プログラミング」を使わないスタイルもあるんですね？（参考になります） JavaScriptのオブジェクト指向プログラミング OOPのアンチパターン SOLID原則 オブジェクト指向の基本機能 データ構造としてのオブジェクト デメリット メリット PACアーキテクチャー マイクロサービス指向アーキテクチャー JavaScriptのオブジェクト指向プログラミング jsstudy.hatenablog.com オブジェクト指向って便利なの？ - JavaScript勉強会 うへええええ継承による差分プログラミングとか現代に言わないでくれよ。しかも「JSはプロトタイプベースのOOP」を初めとして間違いが多いぞ 2017/03/27 09:42 b.hatena.ne.jp
JavaScript開発はこれ1つでOK！超お手軽にWebアプリを作れる全部入りコードエディタ「Gomix」の使い方大公開！ - paiza開発日誌
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です！ バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。 【 Gomix 】 以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。 ■基本的な使い方！ それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう！ まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコード
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
Java 上の JavaScript エンジン Nashorn で Java ライブラリを使う - A Memorandum
Nashorn スクリプトから外部 Java ライブラリを使うのは意外と面倒です。 Nashorn の基本的な使い方は以下を参照ください。 blog1.mammb.com ここでは、Nashorn スクリプトから Ivy を使い、外部の Java ライブラリを使う方法を紹介します。 クラスパス の指定 Nashorn スクリプトで外部 Java ライブラリを使うには、jjs コマンドに -cp オプションでクラスパスを設定します。 $ jjs script.js -cp external-lib.jar Nashorn スクリプト内部で shebang で指定することもできます。 #!/usr/bin/jjs -cp external-lib.jar // ... しかし外部ライブラリが複数必要な場合、jjs ではクラスパスのワイルドカードインポートに対応していなかったり(たぶん)、依存ラ
アマゾンのトラッキングIDが付いたURLを簡単に生成する方法（MakeAmaLink Bookmarkletを使う）
アマゾンのトラッキングIDが付いたURLを簡単に生成する方法（MakeAmaLink Bookmarkletを使う） 背景 アマゾンアソシエイトを使っている。 問題 アマゾンの商品ページから、簡単に自分のトラッキングIDが付いたURLを生成したい。 解法 アマゾンの商品ページで、以下のMakeAmaLink Bookmarkletを使う。 MakeAmaLink Bookmarklet 注意：以下は hyuki-22 のトラッキングIDが付いていますので、自分用に修正してお使いください。 Source function start() { var id = 'hyuki-22'; var url = location.href; if (url.match(/\/(?:d|dp|ASIN|product)\/([^\/]+)/)) { var asin = RegExp.$1; promp
薄いフレームワーク指向の Web クライアントサイドプログラミング - Hatena Developer Blog
こんにちは、Web アプリケーションエンジニアの id:nanto_vi です。先日開催された Kyoto.js #12 において、「薄いフレームワーク指向の Web クライアントサイドプログラミング」と題した発表を行いました。とある Web アプリケーションの開発にあたって、JavaScript による GUI プログラミングにどう取り組んだかという話になります。当日のスライドの内容に口頭で伝えた内容を加え、以下にまとめます。 前提 SPA ではない そこまで覚悟しなくてもよい 薄いフレームワーク指向 cf. ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011 開発期間が決まっている Web アプリケーションを新規開発するにあたり、クライアントサイドをどう実現するか。ここでは開発期間が決まっているというのが大きな要因となり、チームメンバーの
JavaScriptで機械学習の実装 4 SCW – Rest Term
前回 JavaScriptで機械学習の実装 3 AROW に引き続きオンライン学習アルゴリズムを試しています。Node.js勉強中なのでJavaScriptを使ってこつこつ学んでいきましょう。 今回は SCW (Soft Confidence Weighted Learning) と呼ばれるアルゴリズムを扱います。 SCW (Soft Confidence Weighted Learning) 2012年に提案された、CW (Confidence Weighted Learning)と前回紹介したAROW (Adaptive Regularization of Weight Vectors)の特徴を備え持つ手法です。SCWはCWと同様に重みベクトルの各重みが正規分布に従って生成されていると考えます。 SCWのアルゴリズムは以下のようになっています(元論文から引用)。 μが信頼している重み、
Java の上の JavaScript エンジン Nashorn の基本 - A Memorandum
Nashorn とは Java から Nashorn を使う Java オブジェクトを渡す JavaScript の関数を Java から呼び出す JavaScript のオブジェクトを Java から呼び出す JavaScript 内で Java クラスを利用する JavaScript と Java の型 文字列 数値 配列 リストとマップ ラムダ Java クラス・パッケージのインポート JavaScript で Java インターフェースを実装する JavaScript 関数を Java インターフェースの実装として利用する スクリプトを事前コンパイルする Nashorn で REPL する jjs でシェルコマンドを使う nashorn をシェルスクリプトとして使う 例えば まとめ Nashorn とは Java7 までは JavaScript スクリプティングエンジンとして Ri
HTML・CSS不要！JavaScriptだけでWebアプリの開発を実現するオンラインエディタ「MagiXJS」の使い方を解説 - paiza times
どうも、まさとらん（@0310lan）です。 今回は、簡単なコードでインタラクティブなWebアプリやゲームなどを作れる「オンラインコードエディタ」のご紹介です！ HTMLやCSSを書く必要がなく、さらにJavaScriptを簡単・安全にプログラミングできる「CoffeeScript」で記述できる完全無料のツールです。 【 MagiXJS 】 簡単に扱えるように設計されているので、Web開発を勉強している初心者の方や、初めてWebアプリを作ろうと考えている人にもオススメですよ！ ■「MagiXJS」とは？ まずは、「MagiXJS」の基本的な使い方も含めて、どのようなサービスなのかを見ていきましょう！ サイトにアクセスして、そのまま下方向へスクロールするか、画面上のアイコンをクリックします。 すると、Webアプリを開発できる専用の「コードエディタ」が表示されます！ 左画面でプログラミングを行
【2017年版】ブラウザ上で使えるJavaScript開発＆実行環境Webサービスの厳選まとめ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、これからJavaScriptを学習しようという人や、ちょっとしたプロトタイプを開発したい人に向けて、オススメの「オンラインコードエディタ」を厳選してご紹介しようと思います！ 選んだ基準としては…、 SSL対応のWebサービス JavaScriptの実行環境が備わっている 作成した「コード」や「作品」の公開が可能 面倒なログイン不要ですぐに使える 無料で利用できる …などの点を重視しながら、誰でも「ブラウザ」さえあれば今すぐ使えるモノをまとめてみたので、ご興味ある方はぜひ参考にしてみてください！ ■Webページとしても公開できる実用的なエディタ！ 【 PLAYCODE 】 「PLAYCODE」は、まだ新しいサービスですが、JavaScriptプログラミングの学習はもちろんのこと、ちょっとしたプロトタイプの開発に最適なコードエディタと言える
2017年版、5分でわかるJavaScript入門(ES6対応版) - paiza times
こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 今、一番身近なプログラミング言語といえば、間違いなくJavaScriptです。 JavaScriptは、インターネット利用に必須のウェブブラウザ上で動作する唯一のプログラミング言語です。 プログラミングを学ぶ時も、いつも使っているブラウザ上で動作させることができて結果が見えるため、興味を持って始めるやすい言語かと思います。 JavaScriptには、広く使われていること、活発な開発、インターネットとの相性の良さ、非同期プログラミング、仕様が標準化されていること、オープンソースでの実装があること…などなどの特徴があり、今や以下のような様々な用途でも使われるようになっています。 ウェブブラウザ(Chrome, Firefox, Internet Explorer...) サーバアプリケーション(Node.js, Ex
Merry X(ma)ss (Shanon Advent Calender 2016 - 25日目)
Uncategories Merry X(ma)ss (Shanon Advent Calender 2016 - 25日目) Merry X(ma)SS (Shanon Advent Calender 2016 - 25日目) こんにちは，こんばんは，メリー・クリスマス，開発エンジニャーの t です． 顔認識から始まり，テスト，PM，子育て，開発プロセス，VR, AWS, RoboHon, Golang etc. と多種多様なテーマを技術部他総出演で展開してきた Shanon Advent Calender 2016 も無事最終日となりました． 最終日，25日は Merry XmaS と掛けて 2016年に出会った XSS の話で締めたいと思います． はじめに ひとくちに XSS といっても色々有りますが，主に DOM based XSS と呼ばれるクライアントサイド（ブラウザ）で起こる
BiwaSchemeのためにCPS(継続渡し形式)でマージソートを実装した話 - yhara.jp
本記事は言語実装 Advent Calendar 2016の最終日の記事です。話題が多岐に渡っていて楽しいアドベントカレンダーでしたね。前日はEgisonのリーマン幾何学用記法の話でした。 BiwaSchemeは筆者が作っているJavaScriptによるScheme実装です。先月の話ですが、list-sortという関数を修正し、比較に使うScheme関数を受け取れるように改善しました。BiwaSchemeは中間言語方式(VM方式)かつライブラリを全てJSで実装するという方針になっているため、実装に少し工夫が必要でした。本稿ではそのことについて解説します。 中間言語方式 JavaScriptでScheme処理系を実装する場合、いくつかの方針が考えられます。 インタプリタ方式 (S式を一つずつ読み、評価する) コンパイラ方式 (プログラム全体を等価なJavaScriptに変換する 中間言語方式
JavaScriptライブラリを使った超簡単チェスゲーム開発入門！ブラウザ上でCPU対戦が可能！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptによる簡単なゲーム作りに挑戦するため、「チェス」をテーマにした開発チュートリアル記事となっています。 「なんだか難しそう…」と思うかもしれませんが、簡単な手順で実現できるJavaScriptライブラリを活用するので誰でも最後まで楽しめると思います。 また、後半には「CPU対戦」機能も組み込んでいくので、チェスやゲーム開発にご興味ある方は、ぜひトライしてみてください！ ■必要なファイルを準備しよう！ まずは、チェスの骨組みを簡単に構築する方法として「chessboard.js」というJavaScriptライブラリを使ってみましょう。 【 chessboard.js 】 「chessboard.js」を使うと、チェスで遊ぶための「駒」や「ボード」を簡単にWeb上へ描画することが可能で、駒を動かす際のアニメーションやマウス
知らなきゃ損する！Web開発で絶対使いたくなる、人気のJavaScriptライブラリ8選と導入方法を公開 - paiza times
どうも、まさとらん（@0310lan）です。 今回は、毎日のように誕生する新しいJavaScriptライブラリの中から、思わず使ってみたくなるようなオススメのライブラリを厳選してご紹介しようと思います。 そのままWebアプリとして活用できそうなモノから、コードの書く量を大幅に減らしてくれたり、ユーザー体験を一気に向上してくれるモノまで、幅広いジャンルをまとめていますので、ご興味ある方はぜひ参考にしてみてください！ ■入力された内容を自動検証する！ 【 Cleave.js 】 フォームなどでよく使う「inputタグ」で、何が入力されたかを検証して意図しないデータ入力を簡単に防ぐことができるのが「Cleave.js」です。 使い方は非常にシンプルで、例えば「電話番号」を入力する「inputタグ」があったとします。 <input type=”tel” id=”input-tell” /> 「in
2017年に注目しておきたい、JavaScriptのライブラリのまとめ | コリス
数多くあるJavaScriptのライブラリの中で、どれを勉強すればいいか判断することはなかなか難しいものです。いくつかのライブラリは放置され衰退し、またいくつかは急速に成長し、広範囲に採用されることがあります。 jQueryやReactは多くの人が知っているでしょう。 2017年に注目しておきたい、急成長しているJavaScriptのライブラリを紹介します。 D3.js ビッグデータは成長産業で、データ ビジュアライゼーションも同じくらい重要になっています。グラフ作成やマッピングのライブラリはたくさんありますが、D3.jsほど目立つものはほとんどありません。このJavaScriptライブラリはSVGやCanvasの要素と連携して、Web上のグラフ、チャート、動的なビジュアライゼーションをレンダリングします。 D3.jsは完全に無料で、JavaScriptで構築された最も強力なビジュアライゼ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
