イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
「フロントエンド開発に再入門する」タスクフォースの進め方 | MEDLEY Developer Portal
2017-11-09「フロントエンド開発に再入門する」タスクフォースの進め方こんにちは。開発本部の宍戸です。 メドレーでは定期的に、テーマに沿って組織の技術的な底上げを行うための機会（タスクフォースと呼んでいます）を行っています。そのタスクフォースの１つとして先日、フロントエンド開発力のベースアップを目的としたタスクフォースを行いました。本記事では、その取組みについてご紹介したいと思います。 背景メドレーには現在 20 人弱のエンジニアが在籍しており、その約半数がサーバーサイド出身者です。また普段の開発においては、一つの機能をフロントからサーバーサイドまで一貫して一人が担当するケースが多くあります。サーバーサイド出身者のフロントエンド開発のスキルセットには多少ばらつきはあるものの、普段の開発業務ではレビュー等でそれぞれサポートしつつ開発を行っています。 しかし、フロントエンドの基礎的な部分
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
JavaScriptのフレームワークの選定について
はじめまして。JavaScriptのフレームワークについて質問します。 AngularやEmberやBackboneなどのフレームワークがありますが、 みなさんはどういった理由・観点からフレームワークを選定しますか？ アプリケーションの種別とニーズに応じて選ぶべきだと思うのですが、 例えばどんなときに、何のフレームワークを選べばよろしいのでしょうか？
「なぜAngularJSを薦めるのか ー 個人的な思い」を読んで 〜 SIerで働いている君へ僕の思いを届けるよ 〜 - albatrosary's blog
小川充氏とはhtml5jエンタープライズ部で久しくして頂き「エンタープライズとHTML5」というテーマで色々と議論させて頂いております。大変尊敬できる方であり自分が backbone.js を触ったのも同氏のブログを読んだのがきっかけの一つでもありました。最近ではエンタープライズにおけるAngularJSというテーマで勉強会などさせて頂いています。 今回のエントリーは同氏のブログ「なぜAngularJSを薦めるのか ー 個人的な思い」を読んで自分なりのエンタープライズ像を書こうかと思った次第です。書いているうちに「中二病」のような書き方になりましたが気軽ブログ的に記載します。尚「エンタープライズ限定」ですのでよろしくお願いします。 なぜAngularJSを薦めるのか ー 個人的な思い - I am mitsuruog AngularJSはエンタープライズ向きか 「AngularJSはエンタ
【翻訳】リッチなWebアプリケーションのための7つの原則 - from scratch
はじめに この話はGuillermo Rauch氏が書いたhttp://rauchg.com/2014/7-principles-of-rich-web-applications/ という記事の翻訳です。許可を得て翻訳しています。 ここ最近Web業界を賑わしているSingle Page Applicationの必要性、HTTP2/SPDYといった技術、リアクティブプログラミングやIsomorphicデザインという考え方について包括的にまとめたすごく良い記事になっております。 最初に断っておきますが、ものすごく長いです。各セクションがわかれているので時間がない方はセクションごとに書かれたtl;DRとまとめを読むだけでも参考になるかと思います。 ちなみに明日のNode学園祭には、本記事を記述したGuillermo Rauch氏が見えるので、そこで詳しく聞いてみるのもいいのではないでしょうか。
JavaScriptプログラミング講座【JSON について】
JSON は、「JavaScript Object Notation」の略で「ジェイソン」といいます。
初心者向けAngularJS - その１ - albatrosary's blog
この記事は「AngularJS初心者向けハンズオンのネタ」としてまとめています。最近ではいろいろ書籍もありますし、AngularJSリンク集でもまとめている通り資料は豊富にありますが改めて。内容としてはビルトインディレクティブとコントローラー/ファクトリーを触ってみる程度です。 Angularリンク集 - albatrosary's blog ※ この記事はAngular1.3をベースに書いています。Angular1.5ベースのものはこちらになります(追記:2016/2/18)。 GitHub - albatrosary/Angular1Study: Comprehensive Beginner’s Guide to Angular 準備 サーバのインストール Python 「 http://www.python.jp/ 」からダウンロードしインストールします コマンドラインで $ pyt
オレ流AngularJSを使った設計ポリシー
Chrome MySQL Adminでは、 AngularJSを使って実装を行っています。Chrome appsでは、 何らかのMVC Frameworkの利用が勧められています。 AngularJSは、Controller、Directive、Template、Serviceなど、いくつかの部品群を組み合わせてアプリケーションを構成することになります。その機能の豊富さ故に、実はちゃんとしたポリシーを決めておかないと、いかようにでも作れてしまうために、かえって複雑さが増してしまうという危険性も出てきます。もちろんアプリケーションの作り始めは試行錯誤の連続なのですが、徐々に自分なりのポリシーみたいなものが確立されてくるはずです。 本エントリでは、Chrome MySQL Adminでの設計/実装ポリシーを簡単に紹介してみたいと思います。ちなみに、全てのソースコードは、以下にあります。 htt
MEAN(MongoDB, Express, AngularJS, Node.js)を解説する
MEAN(MongoDB, Express, AngularJS, Node.js)を解説する 前に触った感想です。 MongoDB 良くも悪くもNoSQL。トランザクション無を補うためスキーマが基本汚くなる。 汚いスキーマにアプリケーションの変更が入って安全にデータが壊れる。 結局、不整合が起きてバッチに頼る。バージョン変えるとデータが壊れる。スケール環境は不安定になって止まるのは基本。基本いつのまにか変更されて変な動きして死んでる前提で、動く/戻せる環境構築できない奴は死ぬ Expressシンプルに書けるんじゃなくて、薄い機能しか無い。ミドルウェアをたくさん詰むことになり、ミドルウェアのチェーンは黒魔術詠唱と変わらん。 唱えた本人もどうなるか分からないのがざら。エラーが勝手に握りつぶされるのは基本。 落ちるのがミドルウェア内のエラーとか基本。 いつの間にか落ちるのも基本。基本いつのまに
シングルページアプリの初速を上げる取組み - ワザノバ | wazanova
https://www.youtube.com/watch?v=VkTCL6Nqm6Y 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約1時間前 OSCON 2014におけるInstagramのWebチーム責任者であるPete Huntの講演。PeteはInstagramに異動する前は、FacebookのPhoto/Video/Product Infraチームに在籍。 今回は、InstagramのwebサイトInstagram.comにおいて、シングルページアプリの課題である最初の読込みスピードを上げるために、どのような工夫をしたかについて紹介してくれてます。 Instagram.comのJavaScriptファイルは、縮小化後で9.5MB & gzip圧縮後で2.5MB。そのサイズだと、一つのファイルにまとめ
便利なGruntの弱点を補うgulp.jsのインストールと使い方
詳しくは上記連載を見てもらえば分かりますが、GruntとはJavaScriptを使用してWeb開発に伴うさまざまな作業を自動化して効率良く行うためのビルドツールです。 このツールでは「タスク」と呼ばれる一連の処理を設定ファイルに記述していきます。Gruntの設定ファイル（Gruntfile.js）は、タスクに対してJSON形式でパラメーターを指定していくのですが、ここで少々問題があります。 シンプルなタスクであれば分かりやすいのですが、多くの拡張機能（プラグイン）を使用したり、タスクの制御を細かく行う必要が生じたたりした場合、Gruntfileの記述量が増えて冗長になり、タスク同士の関連やタスク実行結果も分かりにくくなってしまいます。 そんなGruntの問題点を解消することを目的として開発されたのが、今回紹介する「gulp.js」（以下、gulp）です。 gulpはGruntを継承しつつ、
AngularJSをTypeScriptで書くときのあれこれ - Qiita
AngularJSのようなクライアントMVCフレームワークを採用すると、クライアントサイドの規模が大きくなってくるので、できればJavaScriptじゃなくて型のあるプログラミング言語で開発したいですよね。 AngularJSは独自のクラスシステムを持っていないし、モデルやコントローラを実装するためにベースクラスを継承したりする必要もないので、altJSとの相性がよくて組み合わせやすいです。 altJSと言ってもたくさん種類がありますが、今回はTypeScriptを使ってAngularJSアプリを書くときのTipsやコツなどを紹介したいと思います。 ベースとなるプロジェクトを作る AngularJSのコードを書くとき、JavaScriptであればおもむろに書き始めることも可能ですが、altJSを使う場合はコンパイルなどの手順が必要になるので、Gruntを使ったプロジェクトを作る必要がありま
AngularJS ではモデルをどう宣言すればいいのか - AngularJS Ninja Blog
AngularJS の ng-model、大事なのは dot があること AngularJS では、モデルをどこに宣言すればいいんだってのがわかりにくい。 controller に $scope があって、簡単なサンプルコードでは大抵そこに直接$scope.nameみたいに記述されているので、同じように書いてしまう。 うまくいかないコード例は以下。 <!-- うまくいかないコード --> <div ng-controller="ParentController"> <input type="text" name="parent" ng-model="name"> <div ng-controller="ChildController"> <input type="text" name="child" ng-model="name"> </div> </div>
Rails アプリケーション開発で役に立ったJavaScript デバッグの小技｜TechRacho by BPS株式会社
Chrome devtools でイベント監視 いろいろなJavaScriptプラグインを使っていると イベントの伝播を止めてしまうような動作をするものを使ってしまうことがあります。 function を割り当てたいイベントが止められていると厄介です。 代用できるイベントが生き残っていればそちらを使ってしまいたいです。 そんな時、どんなイベントが発生しているのかは Chrome devtools のmonitorEvents で確認することができます。 https://developer.chrome.com/devtools/docs/commandline-api#monitoreventsobject-events 第一引数で監視対象、第二引数でイベントを指定します。 monitorEvents(window, "resize"); イベントの指定はイベント名だけでなく、"mouse
初めてのWebサービスを3日でつくってみた（Node.jsで） - Think Big Act Local
Node.jsを触って勉強してたらWebサイトができました。 結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました Youtubeから結婚式の余興の動画を集めてくるサイトです。Web開発は初めてだったので、つくった流れや勉強の方法などをまとめてみます。 9/14追記）スマホ対応をやりました！ 普段はiOSアプリを書いています 普段はiOSアプリ開発者をやっていて、仕事と趣味でObjective-Cを書いてます。とても楽しくて2年くらい続けてるのですが、サーバーサイド書けたら幅が広がっていいな、とずっと思ってました。 普段の週末は個人アプリを作ったりしてるのですが、夏休みだし新しいことやろうと思ってNode.jsを触ってみました。 つくったもの 結婚式の余興.jp - 結婚式の余興を考えるときに参考になる動画を集めました 結婚式の余興動画がまとまっていて、だら見できる
Google Compute Engine、サーバサイドからクライアントまでJavaScriptで開発できる「MEANスタック」のワンクリックデプロイ機能をサポート
Google Compute Engine、サーバサイドからクライアントまでJavaScriptで開発できる「MEANスタック」のワンクリックデプロイ機能をサポート WebアプリケーションのサーバサイドからクライアントまでJavaScriptで開発できる「MEANスタック」が海外では少しずつ話題になってきています。MEANスタックとは、次のソフトウェアの頭文字をとったものです。 MongoDB：NoSQLデータベース Express：Node.js対応のフレームワーク AngularJS：Webアプリケーションのクライアント用JavaScriptフレームワーク Node.js：サーバサイドJavaScriptエンジン オープンソースであるLinux、MySQL、Apache、PHP/Perlの組み合わせが「LAMPスタック」と一般に呼ばれるように、JavaScriptを軸にした上記の4つの
JavaScript Test-Driven Development with Jasmine 2.0 and Karma
This document discusses JavaScript test-driven development using Jasmine 2.0 and Karma. It introduces test-driven development principles and benefits, then covers the Karma test runner, PhantomJS browser, and features of the Jasmine testing framework including describe blocks, expectations, matchers, spies, and custom matchers. It also provides an example of mapping earthquakes and testing color-c
RailsでTypeScriptを使う - Kentaro Kuribayashi's blog
JavaScriptは設計が難しい。経験上、すぐグシャグシャになってしまう。よくわからなくなる。もちろん、私のスキル不足というのはあるだろうけれども、スキルが不足してるのはしかたないので、学習は続けることは前提であるにしても、技術的に解決できるなら技術に頼りたい。そうした意味で、いわゆるAltJSの中ではTypeScriptが有望だろうと思う。 RailsとTypeScript TypeScriptを使うにしても、それ単体で使うというシーンは、Webアプリケーション開発という文脈ではあまりない。たとえば、Railsで開発しているWebアプリケーションのフロントエンドを構成する言語として使うことになるだろう。その際、まず考えるべきことは、Asset Pipelineとどう折り合いをつけるかということだろう。 Asset Pipelineは、以下の機能を担っている: 拡張子(例:applica
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - Qiita
