今後のWeb開発の未来を考えて AngularJSにしました ~とあるSIerの場合~ いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念イベント発表資料 http://angularjs-jp.doorkeeper.jp/events/14893

今後のWeb開発の未来を考えて AngularJSにしました ~とあるSIerの場合~ いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念イベント発表資料 http://angularjs-jp.doorkeeper.jp/events/14893
JavaScript libraries such as jQuery have been the go-to approach for writing JavaScript in the browser for nearly a decade. They’ve been a huge success and necessary intervention for what was once a browser land full of discrepancies and implementation issues. jQuery seamlessly glossed over browser bugs and quirks and made it a no brainer approach to getting things done, such as event handling, Aj
ブログデザインの変更にあたって、lessファイルのコンパイルをgrunt-contrib-lessを使って自動化してみた。 デザインベースは公式のboilerplateを使わせてもらった。 yukihir0/tachikoma(GitHub) フォルダ構成 boilerplateからboilerplate.lessとlessディレクトリ配下のlessファイルをコピーしてくる。 dist配下にコンパイルしたcssファイルを格納するようにした。 views配下に自分のブログのhtmlファイルをダウロードしてきて、dist配下のcssファイルを読み込むように編集する。 % tree -L 1 . ├── Gruntfile.js ├── dist ├── less ├── node_modules ├── package.json ├── tachikoma.less └── views gru
Learn Angular the right way. The most complete guide to learning Angular ever built. Trusted by 82,951 students. After reading Google’s AngularJS guidelines, I felt they were a little too incomplete and also guided towards using the Closure library. They also state “We don’t think this makes sense for all projects that use AngularJS, and we’d love to see our community of developers come up with a
node + fluentd 最近、いろいろな案件でログの処理にfluentdを使うことが多くなってきました。 fluentdとはログ収集のためのツールで、なんで最近みんなこれを使ってるのか聞いたところ、 複数サーバのログを簡単に集約できるから 入力/出力のためのプラグインを書きやすい という話をききました。fluentdはいろいろな言語/プラットフォームから使用でき、 出力先もS3等いろいろ指定できるみたいです。 今回はnode.jsからlog4js経由でfluentdを使用してみたいと思います。 ちなみに、この記事でもfluentd + node + mongoでログ出力してるので参考にしてください。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.9.4 Node : v0.10.29 fluentd : v0.10.51 サンプルアプリ作成
はじめに node.jsは暗号化する際に特別なパッケージ等は必要なく、 require('crypto')と指定するだけで基本的な暗号化は実装できます。 AES-256で暗号化しようととした場合、以下の方法で実装が可能です。 'use strict'; var crypto = require('crypto'); var cipher = crypto.createCipher('aes-256-cbc', 'cryptKey'); var crypted = cipher.update(str, 'utf-8', 'hex'); crypted += cipher.final('hex'); しかし、本来AES-256-CBCで暗号化しようとした場合、 本来256bit長の鍵と初期ベクトルが必要なのですが、上記の実装では、それらの影も形もありません。 というわけで、鍵と初期ベクトルはど
CoffeeScriptのリファクタリング - ワザノバ | wazanova CoffeeScriptのリファクタリングと聞いたので、いてもたってもいられなくなった。まず、お題の結果を見ずにやってみる。 これが元のコード $(document).ready -> photoHTML = (photo) => "<li> <a id='photo_#{photo.id}' href='#{photo.url}'> <img src='#{photo.url}' alt='#{photo.alt}' /> </a> </li>" $.ajax url: '/photos' type: 'GET' contentType: 'application/json' onSuccess: (response) => for photo in response.photos node = $(phot
http://blog.arkency.com/2014/07/6-front-end-techniques-for-rails-developers-part-i-from-big-ball-of-mud-to-separated-concerns/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 シングルページアプリもあり、それでなくてもフロント側のコードを書く機会は増えてきてますが、コードをうまく整理して、 簡単に、もっとテストしやすいコードを書く。 クオリティを下げることなく開発スピードをあげる。 ためのノウハウの一端を開発会社のArkencyがシェアしてくれています。 シリーズの初回は、シンプルなリファクタリングのケーススタディ。 CoffeeScriptのコードが、DOM変換、イベントハン
UnderscoreはJavascriptのためのユティリティベルトのようなライブラリです。ビルドインJavascriptを拡張することなく、Prototype.js(やRuby)にみられるような関数型プログラミングをサポートする。 公式サイト http://underscorejs.org/ Node.jsの開発はunderscore.jsが必要不可欠なので、underscore.js各関数の使い方を説明する。 underscore.jsインストール $ npm install underscore underscore.js関数説明 _.each(list, iterator, [context]) listを走査して、それぞれの要素をiterator関数に与えて実行する。contextを渡している場合にはiteratorはcontextにバインドされる。listが配列の場合、iter
車輪開発大好きおたいがです。こんにちは。(挨拶) 本日、下記イベントに参加してきたのでレポート ( 箇条書きメモ ) します。 ng-mtg#6 AngularJS 勉強会 http://angularjs-jp.doorkeeper.jp/events/12996 今回のテーマは Directive & セキュリティということで、案件実績のある講師による講演でした。 『 ディレクティブパターン 』 株式会社 LIG 林 優一 氏 実務におけるディレクティブ開発経験を元に、基本的なお作法の解説を交えつつ、ディレクティブ実装パターンについて紹介されました。 ディレクティブ実装パターン テンプレートパターン 共通のテンプレートを反映させるためのディレクティブパターン 共通パターン ビューと実装をカプセル化するようなディレクティブパターン イベントフックパターン ユーザーのイベントとハンドリング
このページの最終更新日:2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
JavaScriptで必要なデータ構造の覚書です。 目次 配列 配列を生成する。 配列にデータを追加する。 配列にデータを格納する。 配列からデータを取得する。 配列中のすべてのデータに同じ処理をする。 オブジェクト オブジェクトを生成する。 オブジェクトにデータを格納する。 オブジェクトからデータを取得する。 オブジェクト中のすべてのデータに同じ処理をする。 関連記事 配列 配列は複数件のデータを扱うためのデータ構造です。 ■配列を生成する。 配列の生成は以下のように行います。 var 配列の名前 = []; var 配列の名前 = [ データ, データ, … ]; 配列の生成では、配列の名前を指定します。 もし、生成時にデータを格納する場合に、[]内にデータを指定します。 なお、JavaScriptでは配列の生成時にサイズを指定しません。 例えば、空の配列array1を生成するには、以
CoffeeScript基礎文法最速マスター はじめまして。新人のtek_kocです。 今回は巷で話題のCoffeeScriptの文法をまとめてみました。 1年近く前に流行った基礎文法マスターシリーズにCoffeeScriptがなかったので、勉強も兼ねて同形式で書いてます 。 JavaScriptを使っている方はこれをざっくり眺めてCoffeeScriptへの移行を検討してくれればなと思います。 まだ網羅しきれていないですが、これを読めばCoffeeScriptに乗り換えることができるはずです。 間違いや、足りない箇所などがあれば、是非コメント等で指摘してください! バージョン 現時点で最新の1.0.1を対象にします。 0.概要 CoffeeScriptとはJavaSciprtにコンパイル可能な言語です。 RubyやPythonなどに近い記述が可能で、JavaScriptの開発をより効率的
Gruntを使ってる人に「gulpってどうなの?」と聞かれる機会が最近何回かあったので、いまさらながら自分の所感を交えて答えてみる。 まず、自分がこれからプロジェクトを始めるとしたらgulpを使うでしょう。理由は質問に答えながら書いていきます。 Grunt使い続けちゃだめなの? そうですね。あなたがGruntに十分慣れていて、タスクのテンプレートがあってすぐに開発に入れるならGruntを使い続けてもいいと思います。ただ、今はGruntとgulp両方とも使われていますが、どっちが覇権を握るかわかりません。Gruntしか知らないままgulpの時代が来たときにノウハウの差が多少出るかもしれません。 もしあなたがGruntを片手間程度に使っていて、設定してるタスクが「ローカルサーバとライブリロード、あとminify系くらい」な人ならgulpを触ってみる価値はあると思います。同じタスクをgulpでや
片手間でJavaScript書いてる Yuumi3 です。 時間が出来たので、今さらながら Node.js や 流行の Angula.js を学んでました。学ぶためには何かアプリを作るのが一番ということで、簡単なWebアプリの状態監視ツールを Node.js, Socket.IO, Koa, Angula.js, Mocha を使い作ってみました。 作るアプリについて サーバー1台で運用しているサービスで、ソフトの更新などでアプリケーションサーバーをリスタートするタイミングは、今までは tail -f production.log でアクセス状況を見ながら行ってきました。しかし、面倒なので、ログをチェックしながらアプリのステータスを教えてくれるアプリを作ってみました。 ステータスは3つあって Red ユーザーが重要な事を行っている、例えばネットショップでは注文手続きを行っている(注文手続の
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
それぞれ、このシリーズの後続の回で詳しく触れていきますが、Application、AppRouter、ControllerはViewやModelの間を取り持つ機能を担っています。ItemView、CollecttonView、CompositeView、Region、Layoutはそれぞれ異なった役割で、View周りのコーディングに役立つ機能を持っています。 Marionette.jsにできること Marionette.jsから得られる恩恵は大小さまざまで、細かいものを挙げていくときりがないほどですが、大きなものを挙げるとすれば、次のような点があります。 モジュール化のサポート 開発者が書かなければならないコード量の減少 機能の部分的な利用 モジュール化のサポート Marionette.jsの機能の中で大きなものとして、モジュール化のサポートがあります。モジュール化というのは、ある機能を表
最近、たまに思うんです。「何でオレ、JavaScript書いてんだろ」って。いや、別にコード書くのも決して嫌いじゃないんですけどね。 小規模な組織に所属したり、フリーランスで働くWebデザイナーがカバーしなければならない領域は、分業が進んだ組織よりも多いのが当たり前。そういう意味では、僕のように中途半端にいろんなことに手を出してきたヤツは今の組織に向いているのかもしれないです。 ディレクションしながらデザイン作るし、HTML書くし、JavaScript書くし、PHP書くし。 そういうマルチロールなスタンスで働くことを会社にも許容してもらってるわけで、その点は逆に感謝と言えば感謝なのかな。 「何でもできる」と「何もできない」は紙一重 器用貧乏という言葉がまさにそれで、僕のようなタイプが一番陥りがちな状態が、何でもできるようで実は何ひとつできない人間になってしまうこと。 自分なりの軸はぶらさな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く