私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
Rails の フロントエンド周りの未来予測 - ボクココ
ども、@kimihom です。 Rails の Sprockets や Uglifier などが最新の JavaScript に追従していないという理由で、Rails 標準のやり方から外れて最新のフロントエンドツールを追い求める系の報告が多い。一部では完全に Rails の Asset Pipeline から外れて、Gulp などに移行する話もよく聞く。確かに現行の Rails のフロントエンド環境で開発すると、let や クラス構文をまともに使えない(エラーになる)ため、最新の構文に対応した JavaScript フレームワークはほとんど使えないのは大きな問題として残り続けている。 最新版である Rails 5.1 から、ようやく jQuery からの脱却とフロントエンド周りの最新化、つまり Yarn や Webpack の導入が検討され始めている。これに期待されている方も多いのではない
さよなら CoffeeScript - mizchi's blog
prototype.js が jQuery に置き換えられた時、開発者が気づいたのは、自分に本当に必要だったのはprototypeのメソッド拡張などではなく、クエリエンジンだったということ。 coffeescriptが当初、熱狂的に支持された背景はなんだっただろう。今思えば、それはアロー記法とクラス構文だったと思う。 javascriptの関数型への憧れ、prototypeベースの限界 javascript は断じて関数型言語ではないが、他の言語と同じぐらい関数型言語に憧れていたのも、また事実だろう。しかしビルトイン関数が高階関数を要求するデザインにしては function というキーワードはながすぎたし、その function が暗黙に作り出す this スコープの複雑な振る舞いも開発者の悩みの種だった。「あらゆる関数スコープで状態を持つことが"できすぎる"」という割れ窓だった。 ES5
フロントエンドが嫌い
ウェブフロントエンドの技術の進歩と興亡の速度には目を見張るものがある。 browserifyが生まれ、Gruntが生まれ、Gulpが生まれた。 そしてその全てが死んだ。 Webpack, Babel, Flow, 今栄えている技術だってそのうちに死ぬだろう。Reactだって例外ではない。 一部はもう死につつあるし、少し前にあれだけ持て囃されたTypeScriptも今や消えつつある。Coffeeは全エンジニアから嫌われた。 そんな万華鏡のように目まぐるしく変わる情勢に追い付かんと研鑽を続ける者等がいる。アーリーアダプターを自称し最新技術のケツを追いかけQiitaにクソを垂れ流す彼らこそ我らがイケイケウェブフロントエンジニアである。 最新技術に目を凝らし、やれ新たなこれイケてるだの古臭いあれはイケてないだのと宣いチュートリアル記事を量産する彼らであるが、彼らの存在は決して無駄ではなく、生まれた
2017年、新規にJavaScriptを書くならどんな設計をするか｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
この記事はJavaScript Advent Calendar 2016の記事です。 今回は、2017年、新規にJavaScriptを書くならどんな設計をするか、というテーマで書いてみようと思います。2017年といっても、しばらくはこんな感じのアーキテクチャでやってきましたので、どんな構成でJavaScriptを設計してきたかという方が正しいかもしれません。基本的にはSPAをベースとしています。 また、最新のイケてる技術バリバリ使ってやるぜ、というよりは、堅牢で、はやりが変わってもメンテができるということを意識してみました。 DOMのレンダリング Virtual DOMを代表とした、DOMのレンダリングを行うライブラリをなにか採用します。特に理由がなければReactでいいと思います。Virtual DOMではありませんが、AngularでもDOM管理においてはさほど違いはありません。この2
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
Web開発が捗るFirebase入門！JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、Webサービスなどを開発する際に、ユーザーの管理や識別などで必要になる「ユーザー認証」機能を、できるだけシンプルに作ってみたいと思います。 利用するのは、さまざまなバックエンド機能を提供するGoogleの【 Firebase 】です！ 非常に多機能なサービスですが扱いはとてもシンプルで、簡単なコードを覚えてしまえば誰でも活用できるはずです！ 自分でサーバーを用意する必要もなく、基本的な機能は無料で使えるので今すぐ始められるのも特徴と言えるでしょう。 ■始め方！ 今回は、「メールアドレス」と「パスワード」でログインする一般的な「ユーザー認証」ページの作成に挑戦してみましょう！ そこで、まずはFirebaseにアクセスして新規にプロジェクトを作成します。 好きな「➀プロジェクト名」と、自分の「➁国名」を指定します。 すると、プロジェクト
JavaScriptにフレームワークが必要な理由 - Qiita
JavaScriptにはむしろもっと抽象化がもたらされるべき - Qiitaという記事で、もう少し踏み込んだ話を書いてみました。 某所でReact.js界隈の人に聞きたいというフレームが発生したのだが、はてなブックマークでコメントしたらIDコールされたので、反論をここに書くことにした。(最近は技術系記事はQiitaにしか書いてないので)。 あくまで僕が考えるなので、JavaScript界の人達が本当はどう思っているかはわからない。そもそもJavaScriptを本格的にさわり始めたのごく最近なので、JavaScript界では異端かもしれない。 元記事では論点(感情)が複数ごちゃまぜになっていたので僕は辛口のブコメを書いたのだが、論点をごちゃ混ぜにするのは意図的にやってるのならばただの詭弁だ。なので、まずは元の記事での論点を整理する。 jQuery (or フレームワーク?) 言語採用 Rea
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
『Ameba OwndのSEOを支える技術 for AngularJS』
こんにちは、サーバーサイドのエンジニアをやっているoinumeです。今回は昨年8月ぐらいから作っていたAmeba Owndというサービスで行ったSEO対策について紹介します。 AmebaOwndって？ブログ機能を備えたスタイリッシュなデザインのWebサイトを簡単に作成できるサービスです。 香川真司オフィシャルサイトスターバックス コーヒー オフィシャルブログなどのサイトがAmeba Owndを利用して作られています。 アーキテクチャユーザーさんがWebブラウザでアクセスするページについてはAngularJS + REST API(Nginx + Go)で作られています。一方でGooglebotなどのクローラーからのアクセスの場合は、受けたリクエストをNginxがPrerender CacheというシステムにProxyして、このPrerender CacheからHTMLを返すようにしています
JavaScriptのプロトタイプからオブジェクト指向を学ぶ - Qiita
JavaScriptの「プロトタイプ入門」 JavaScriptはオブジェクト指向です。 クラスという概念はないため、 擬似的なクラスの表現を使ったパターンがあります。 ただ今回はそちらではなくプロトタイプベースの説明をします。 その前にコンストラクタについて知らない人はこちらへ。 JavaScriptのクラス？コンストラクタ？ プロトタイプって？ そもそもプロトタイプってなに？ 実は、、プロトタイプとは「オブジェクト」のことなんです。 そして感覚としては親だと思って大丈夫です。 親の能力は子にも受け継がれている。。的なニュアンスですね。 （まぁ意味合いはちがいますがw） prototypeプロパティ ここで新規に関数を生成してみましょう。 そうするとprototypeプロパティが自動で作成されます。 このように関数を生成した時点で、 proto.prototypeプロパティが自動で生成さ
JavaScriptフレームワーク比較用サンプルアプリ 「TODO-Module-Marionette」を作る - フルスタックエンジニアに
今回は前回作ったTODO-Module-BackboneにMarionetteを導入していきます。 Backboneは薄いライブラリなので、オレオレ実装になってしまうことが多いです。 Marionetteを導入するとBackboneのベストプラクティスに乗っかれるので、大規模アプリには非常に有用です。 例えば 自動で描画をしてくれるので、自分でrenderメソッドを定義する必要がない ビューの管理をしてくれるので、破棄し忘れてゾンビViewが生まれる危険性が減る ヘッダー領域・メイン領域などを管理するRegion機能がある などさまざまなメリットがあります。 前回の記事 www.full-stack-engineer.com デモアプリとソースコードはこちらに公開しています。 TODO-Module-Marionette ソースコード 前回同様このクライアントアプリの動作確認にはAPIが必
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
今話題の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
第1回 JavaScriptの基礎を見直す | gihyo.jp
連載のはじめに みなさんこんにちは、今回より「聞いたら一生の宝、プログラミングの基礎の基礎」 の連載を担当させていただく本橋佑介です。 本記事では、広く利用されている技術から新しい技術まで、基本的な部分を現場のエンジニアの声を取り上げつつ解説していきます。習得している方にとっては振り返りとなり、また今から学ぶ方にとっては同じ疑問にぶつかった方の意見が参考になれば幸いです。 現場のエンジニアの声は私が開発に携わっている技術系QAサイトteratailから抜粋しています。 第1回では、現在では様々な環境で利用されているJavaScriptの基礎をteratailの初心者投稿とともに振り返っていきます。 JavaScript JavaScriptは主にウェブブラウザを実行環境とし、動的なウェブサイト構築などに利用されてきました。 また、今ではNode.jsをサーバサイドで利用することが増え、
CoffeeScript基礎文法最速マスター - undefined
CoffeeScriptの文法について理解していないとこが多かったので、自分の覚書もふくめまとめてみました。 基本 CoffeeScriptはJavaSciprtにコンパイル可能な言語 CoffeeScriptはインデントでブロックを表現する 行末の;(セミコロン)は不要 数値表現、四則演算はjavascriptと同様 コンパイル $ coffee -c hoge.coffee 例えば hoge = "hogehoge" console.log hoge は以下のようなjavascriptにコンパイルされます (function() { var hoge; hoge = "hogehoge"; console.log(hoge); }).call(this); 無名関数で括りたくない場合は $ coffee -cb hoge.coffee とします。 ログ出力 console.log "h
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事 （追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ
io.jsについて知っていること - from scratch
今、Node.jsに起きてることを語る上で、io.jsは避けて通れない話題でしょう。 今回のNode.js アドベントカレンダー 2014の締めを飾るために、このio.jsについて僕が知っている限りの事をまとめて書くことにします。 io.jsを知り、今後"Node"がどうなっていくのかを皆で一緒に考えていきましょう。 またこの一連のio.jsのfork騒動はOSSという特殊なプロジェクトをどう進めていくのがハッピーなのかを知る一つの教材だと思います。 OSSに関わっている皆さん、今回も長いですが、最後まで読んでもらえると幸いです。 io.js とは何か Node.jsのForkです。次のNode.jsの安定版になる、v0.12をForkしています。「アイ・オー ジェイエス」と読みます。名前の由来は木星にある四番目に大きな衛星の名前から取られました。*1 Nodeを使っている人のことをnod
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails 5.1.0.beta1はどのようにモダンなJavaScript開発を実現しているのか？ // Speaker Deck
Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron