i18nの書き方 from JavaScript - Qiita
続編と、コード自体ではなく、何をすればいいかを書きましたAmazonに見るi18n -「国際化対応」とは何を変える事か Webサイトを多言語化する 最近多言語化に関する仕事をしている関係でi18n(l10n)用のライブラリを色々と見たので、 i18nライブラリによくある使い方を紹介します。 とは言ってもほとんどのライブラリは同じような書き方をするのでJavaScriptを例にします。 ライブラリ一覧 書き方の紹介として使用するものはawasome-javascriptにあるものと、他に気になったものを選びました。 ただし、この記事の目的は「書き方」を紹介するもので「ライブラリ」を紹介するものではありません。 動くことは確認しましたがどのくらいまともに動くかはチェックしていないのでご注意ください。 Polyglot Airbnbが公開するシンプルなライブラリ i18next 色々な環境やフレ
あのライブラリは何故誕生したの?のまとめ - Qiita
はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
Javascript入門 クラス継承、new演算子、プロトタイプチェーン Q&A - Qiita
分からなかったので、備忘録がてら、Q&A形式でまとめてみた。 「どうすりゃいいのか」から始めて「どういう意味なのか」に踏み込んでいったつもりです。 ご意見、ご感想、ご要望、間違いの指摘などございましたら、コメント欄まで。 Q1: Javascriptでは、クラスは関数で作ると聞きました。どういうことですか？ こういうことです。 /* コンストラクタとなる関数。 クラス変数は、this.a = ... のようにして初期化します。 この関数は、通常は何も返しません。 */ function Foo(a){ /* 初期化処理 */ this.a = a; } /* Foo関数をコンストラクタとして作られたインスタンスは、 Foo.prototypeが持つプロパティにアクセスできます。 次のようにメソッドや定数を定義するとよいでしょう。 */ Foo.prototype.func = functi
JavaScript入門 - Qiita
ブラウザに実装されているスクリプト言語 動きのあるウェブサイトにできる ※Javaとは別物 リファレンス mdn javascript 主な構造 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの練習</title> </head> <body> <script src="myscript.js"></script> <script> /* コメント コメント コメント */ // コメント console.log("hello world!"); </script> </body> </html> ※scriptタグは/bodyの直前 変数とデータ型 変数とは データにつける名前 複雑なデータに名前をつけ、それを使って演算や使いまわしができる var msg; 文字列を割り当て
仮想DOMで魂が震えてから一年、仮想DOMとFluxの今 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? なぜ仮想DOMという概念が俺達の魂を震えさせるのか から一年、みなさまどのようなフロントエンドをお過ごしでしょうか。 僕はひたすら過去資産をリファクタしています。 需要の雰囲気 色んな所に書きましたが、去年僕が仮想DOM AdventCalendar をやったのは、「僕自身がproductionで使いたい」ので、「Reactまあいいよね」的な雰囲気を作って外堀埋めるのが目的でした。そして、その目的はおおよそ果たされたと言ってもいいでしょう。ご協力ありがとうございました。 僕自身はKobito for Windows でReactを使って
Webで読めるJavaScript関係の本や記事いくつか - @peccul is peccu
JavaScriptでモジュールを作る方法を幾つか調べていると見つかった本や長めの記事を記録する． 長いので，pdfでダウンロードするか，pdfに変換してDPT-S1に入れた． (ウェブページ→pdf→短縮URL→DPT-S1を楽にするものを作りたい．．．) 長い記事．PDFとして保存した Google流 JavaScript におけるクラス定義の実現方法 Google流 JavaScript におけるクラス定義の実現方法 JavaScript Module Pattern: In-Depth JavaScript Module Pattern: In-Depth 生のJavaScriptでモジュールパターンを表現する話が結構しっかりまとまっていてわかりやすかった． 後発の仕組みを実現しているのかなぁと思っている． 本．PDFがあれば直接．なければPDFとして保存した Learning J
Introduction · ECMAScriptとは何か？
Introduction ECMAScriptとは何か？ECMAScriptの嘘は嘘と見抜けるように results matching "" No results matching ""
do式が実装された - JS.next
概要 ブロック文のようでありながら、かつ中に書かれた最後の式の評価を返すdo式が実装された。 基本 let foo = do { // ブロックスコープを作る let x = 1 + 1 // 中に文(や式)を記述できる x + 3 // 最後に評価された式がdo式の結果となる function fn(){} // 文は評価されない } console.log(foo) // 5 但しfor文やwhile文などは少し注意が必要で、 まず初期化部、条件部、更新部の評価はdo式が返す値にならない。 let bar = do { for (let i = 1; i <= 10; i++) i } // 実際の最後の式評価は (11 <= 10) => false console.log(bar) // 10 そして処理部に何も書かれていない場合でも、undefinedと評価される。 let ba
t_wadaさんが提案するJavaScript速習コースを実際に履修してみた - WEB SALAD
はじめに もう2ヶ月前の話なのですが、日本のTDD第一人者で、最近はpower-assert-jsの開発などJS界隈でも活躍されている@t_wadaさんが、Twitterでこんな提案をされていました。 『JavaScript: The Good Parts』と『WEB+DB PRESS Vol.87 第1特集』のあわせて250ページ未満でES6までの全体像をつかむ速習コースのご提案 http://t.co/doPQ7V4enw http://t.co/NKTGz3syk7— Takuto Wada (@t_wada) 2015, 8月 10 ちょうどこの頃、初めてのgemを作り終え、Ruby以外の言語に対する学習欲が高まっていたので、この提案に乗っかってみることにしました。 本エントリでは、この速習コースを実際に履修した感想と、結果どうなったのかを書きたいと思います。 履修前の状態 ずっと
やはり、お前らのJavaScriptでのリダイレクト実装は間違っている
一見簡単に見えるJavaScriptでのリダイレクト(URL転送)ですが、よく知られた方法にはある落とし穴があり、Googleアナリティクスで正常な解析が行えなくなります。どんな落とし穴があるかと、その回避策について解説します。 なお、こちらの記事は、 SEM Technology - Googleアナリティクスに悪影響を与えずにJavaScriptでリダイレクトする方法 と同じ内容となっています。 はじめに モバイルサイトとPCサイト間のリダイレクトであったり、URL変更に伴うリダイレクトにおいて, .htaccessなどを用いたサーバー側でのリダイレクトが技術上できず、JavaScriptを利用してリダイレクトしているケースをたまに見かけます。 こうしたサイトでは、見た目上は問題なく動作しているものの、実はGoogleアナリティクスなどを用いてアクセス解析を行うと致命的な問題点がみつか
AngularJSのMVWパターンを理解する - Qiita
12/4の記事（AngularJSを使ったWebアプリのアーキテクチャ設計）で書くと言ったまま放置していたので、AngularJSのMVCパターンについて書いてみたいと思います。 AngularJSのMVCについては、12/19のお前のAngular.jsはもうMVCではない。と言われないためのTutorialというすばらしい記事がありますが、本記事ではもう少し抽象的な内容を扱ってみようかと思います。 MVW（Model-View-Whatever）パターンとは MVCパターンには、MVC2、MVP、MVVMなど数多くの派生パターンがあります。 目的は同じなのに派生パターンがたくさんあるのは、それぞれのプラットフォーム固有の問題（フレームワークの違いや、サーバサイドかクライアントサイドかの違いなど）によってMV*の*の役割が異なるからです。 AngularJSは公式ページで"Superhe
AngularJS: The Bad Parts
Hey! If you do front end development, you should know about CatchJS. It’s a JavaScript error logging service that doesn’t suck. Below is a graph over the amount of searches for AngularJS versus a bunch of other Single Page Application frameworks. Despite the flawed methodology, the story seems to be pretty clear: Popularity wise, Angular is beating the shit out of the other frameworks. I spent mos
Railsで昨今のJSのエコシステム(gulpとかそういうの)を使うにあたってこのようにしたというメモ - Qiita
ちょっと前に触ったサービスでRailsサービスでgulpとかbrowserifyとかそのあたりのモダンなJSツールを使いたくて、こんな感じにやってみたというメモです。 おおまかにいうと、gulpでビルドしたものを、asset pipelineに通すというだけ。 こんなことを考えていた 最初はsprocketsをいっそのこと外してしまおうかと思ったんだけど、そのサービスはasset_syncというassetをS3にあげるgem使ってたのと、digestまわりとかあって、それらは解決できなくはないけど、めんどくせえからそこはsprocketsに任せてもいいやと思ったので、結局外しませんでした。 また、JSまわりのツールsprocketsと連携してたりするgemがあったりするんですが、JSまわりツールのバージョンアップの早さにgemがついていけてないと感じたので、我慢して古いバージョン使うのが嫌
さよなら CoffeeScript - mizchi's blog
prototype.js が jQuery に置き換えられた時、開発者が気づいたのは、自分に本当に必要だったのはprototypeのメソッド拡張などではなく、クエリエンジンだったということ。 coffeescriptが当初、熱狂的に支持された背景はなんだっただろう。今思えば、それはアロー記法とクラス構文だったと思う。 javascriptの関数型への憧れ、prototypeベースの限界 javascript は断じて関数型言語ではないが、他の言語と同じぐらい関数型言語に憧れていたのも、また事実だろう。しかしビルトイン関数が高階関数を要求するデザインにしては function というキーワードはながすぎたし、その function が暗黙に作り出す this スコープの複雑な振る舞いも開発者の悩みの種だった。「あらゆる関数スコープで状態を持つことが"できすぎる"」という割れ窓だった。 ES5
ES2015(ES6)な時代だからこそ、ES5を改めて調べたJavaScript初級者のメモ - Qiita
はじめに ECMAScript2015(第6版、通称ES6)が承認され、Babelも登場し、世はまさにES2015時代。なのだけど、JavaScript初級者としてはES5自体をちゃんと把握していなかったりするので、今さらながら調べてみることにした。 間違っている所があれば、ご指摘いただけると大変助かります。 ECMAScript5で追加されたもの ECMAScript5 compatibility tableにて、ES5で追加された機能がどのブラウザに対応しているかが分かる。また、es5-shimというライブラリが、古いブラウザでES5の一部の機能が実装可能になる。 基本的には、IE9以上／iOS7以上、それ以外はモダンなブラウザであれば大抵対応している。 use strict スクリプトの先頭、もしくは関数内の先頭に記載することでstrict modeで実行される。自分が書いているもの
JavaScript の過去と現在、ガチな JS アプリケーション設計
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
ESLintのエラールール。日本語ざっくり解説[可能性あるエラー編] - Qiita
ESLintのエラールール。日本語ざっくり解説[可能性があるエラー編] ※こちらは2015/9/25日の古い記事です。（ESLint v1.5.1 released 22 September 2015） 現時点(2019/9/25)ではESLint v6.4.0です。 最新のドキュメントを読みに行くことをオススメします。 (近いうち新たに加筆してこちらに更新する予定です) よろしくお願いします。 ESLintのエラールール。日本語で「ざっくりしたの」ないのか、と思ってググしても出てこなかったので自分の勉強の為にも書いたよ。 ※使い方はこちら こちらのページで記されているカテゴリーの他にもこういうのがあります。是非参考にしてみてください。(私にとっては大変勉強になりました。。) ESLintのエラールール。日本語ざっくり解説[ベストプラクティス編] ESLintのエラールール。日本語ざっくり
![ESLintのエラールール。日本語ざっくり解説[可能性あるエラー編] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e7385775991f613c822fe6a7b4c54cb19e394fc5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNjQzNzclMkZwcm9maWxlLWltYWdlcyUyRjE1NjEwMjcxMDE_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9YWY3NWEzYjg3NTA2ZjhjZTM5OWE4OTM4NTNhZDVhNmY%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D1572f543905c69d1a432b7b994d93280%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9RVNMaW50JUUzJTgxJUFFJUUzJTgyJUE4JUUzJTgzJUE5JUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgwJTgyJUU2JTk3JUE1JUU2JTlDJUFDJUU4JUFBJTlFJUUzJTgxJTk2JUUzJTgxJUEzJUUzJTgxJThGJUUzJTgyJThBJUU4JUE3JUEzJUU4JUFBJUFDJTVCJUU1JThGJUFGJUU4JTgzJUJEJUU2JTgwJUE3JUUzJTgxJTgyJUUzJTgyJThCJUUzJTgyJUE4JUUzJTgzJUE5JUUzJTgzJUJDJUU3JUI3JUE4JTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9ZGIyNGRhMzY5Yjc1ZGQwMTZiZTI4NWRiY2ZkNWZlNzE%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBNLUlTTyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWI4ODNjYTVhZWVlZTA2OTU1OWExNjRkZTMxM2QyYWRm%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D0e816cea6eded8350d3244bd904a27bc)
AngularJSのngRepeatを"ちゃんと"理解する. - Qiita
はじめに 皆さん、AngularJS使ってますか？ Angularといったら、/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+track\s+by\s+([\s\S]+?))?\s*$/ですよね. /^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+track\s+by\s+([\s\S]+?))?\s*$/がない開発なんて有り得ない！ ......... ...... ... 無駄な前フリはこの辺にしておこう. 冒頭の正規表現は、AngularJSのngRepeatDirectiveのコードから引っ張ってきている. そう、AngularといえばngRepeat, ngRepatといえばAngularといっても過言でないほど、Angular開発
JavaScript と altJS - ペパボのフロントエンドスタンダード
TypeScript について (1) 利用するメリット Java や C# のような文法の altJS です。下記に当てはまる場合は有力な選択肢です。 既存プロジェクトを altJS に移行したいとき JavaScript の文法そのままコピーして使用できるため 静的型付けをしたいとき 現状 TypeScript 一択です 新規の中・長期に渡る大規模プロジェクトのとき 静的型付やインターフェースを利用できるため (2) 利用上の注意 ただし TypeScript を利用する上で注意する点もあります。 コンパイルが遅い 型チェック等があるため、altJS の中でも特に遅めです this の用法が増える クラスのメンバ変数の参照には this.foo と記述します (3) サンプルコード // sample.ts module Saying { export class Greeter {
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
