
こんにちは。五所です。 最近は時代についていこうと、フロントエンドの情報収集をしています。 React, Redux, AngularJS, ES6, Webpack, Gulp, Babel, Yarn... 情報収集すればするほど、頭がいっぱいになるのですが、その過程で感じたこと、考えたことをつらつら述べさせて頂きます。 Vue.jsについて github.com Vue.jsは近年非常に盛り上がりを見せているJavaScriptのフレームワークです。 特に2016年にすさまじい勢いで伸びました。 GitHubのスター数は2016年だけで26400獲得し、2017年1月21日現在では40000スターを超えています。 risingstars2016.js.org Vue.jsは the 10th most starred JavaScript project on GitHub the
Ruby on Rails の 5.1.0.beta1がリリースされましたね! weblog.rubyonrails.org 仕事でRailsを使うものとしてちゃんと触っておかねばと思い、まずは自分の好きなJavaScript周りがどれぐらい良くなったのか見てみたところかなりびっくりしました。JavaScriptすごく開発しやすいです。 webpack があって yarn がありますし、ReactやVue、angular まで rake タスクでセットアップできます。ちょっと前までRailsでJavaScriptやるのが辛いなんて言っていたのが嘘みたいです・・・。 今回はRails 5.1.0 で Vue.js を使って新しくプロジェクトを作るところまでやってみました。 rails new rails webpacker:install:vue Webpackでのビルド Hot Modul
React基礎 レッスン Lesson 01: 環境構築 Lesson 02: ES2015について Lesson 03: 関数型の書き方 Lesson 04: 初めてのコンポーネント Lesson 05: 初めてのinline style Lesson 06: 初めてのprops Lesson 07: 配列からの展開 Lesson 08: フォームの定義 Lesson 09: フォームによるデータ追加 Lesson 10: 総合課題「目的特化型電卓を作ってみよう」 おまけ Appendix 01: 様々なコンポーネントの書き方 Appendix 02: コンポーネントのstate Appendix 03: コンポーネントのライフサイクルメソッド Appendix 04: JSX vs. createElement Appendix 05: PropTypes Appendix 06: p
大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed 前回、OS XをAppleScriptの変わりにJavaScriptで操作する方法についての利点やデバッガの使い方をはじめ、基本的な情報元の整理をしました。 なんとなく把握できたので、今回は具体的にリファレンスを見ながら実用的なコードを作って行くことにしましょっかー。 分かりにくいライブラリの見方 スクリプトエディタ.appには、スクリプトで動かせるアプリのリファレンスを簡単に参照することが出来るけど、それを読み解くのは、僕には難しい作業でした。 公式でサンプルコード付けて置いてほしいな。 英語なのは仕方ないけど、サンプルコードはおろか、何が引数なのかとかの説明も分
大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed OS Xをスクリプトで行う自動操作は、AppleScriptで制御する場合はそのまま「AppleScript」、JavaScriptの場合は「JavaScript for Automation(以下JXA)」と呼ばれています。ちょっとややこしいけど、慣れるしかないでしょう。 僕は元々AppleScript自体がほとんど分からない状態だったけど、どうやらAppleはOSXのスクリプティングをAppleScriptからJavaScriptに置き換えたいらしいです。 AppleScriptは全然だけど、JavaScriptならチャンスか? 気が向いたのでJXAを触ってみる
jQueryの初版が登場して10年が経ちました。 jQueryの登場により、これまでJavaScriptで書いていた複雑なコードがよりシンプルになりました。CSS操作やDOM操作、Ajaxなどの拡張性も非常に便利なものでした。 時が経つにつれ、さまざまな特徴を持ったJavaScriptライブラリ・JavaScriptフレームワークが登場し、jQeuryに触れることなく大規模なアプリケーション開発をすることも珍しいことではなくなりました。 そうした中、昨今注目されているのがReact.js(React)です。 今回は、jQueryを学習した人に、Reactも学習してほしい理由とその学習方法についてまとめてみました。 Reactとは? Reactとは、ユーザーインターフェイス(UI)を構築するためのオープンソースのJavaScriptライブラリです。 Facebookが開発の主導となっており、
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplate master ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っている frontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っている デフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っている はじめに 最近の JavaScript について 僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。
自分用にまとめていたけどせっかくなので公開。 なるべくフロントエンドで完結してライセンスも使いやすいものを選択したつもり。 全部で100個超。 1番目のURLが本家 or GitHubのページ、2番目のURLが比較的わかりやすいと思った日本語の解説ページになっています。 Node.jsのライブラリもまとめたので合わせて見るといい感じ accounting.js金額のフォーマットを行う カンマ区切りや小数点n桁までなど https://josscrowcroft.github.io/accounting.js/ ace.jsテキストエディタ ハイライト・文字列畳み込み・ショートカットキー 組み込むのが簡単で機能もひと通り揃ってる https://ace.c9.io http://qiita.com/naga3/items/1bc268243f2e8a6514e5 AlertifyJSダイアロ
Kyoto.js 12発表スライドです。 https://speakerdeck.com/fand/hurontoendonizhi-xu-woqu-rili-sufang-fa の続編です。
みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか? タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか? そもそもなぜインデント論争が起こってしまうのでしょうか? それはそれぞれ一長一短のため好みが分かれてしまうか
jQuery で Ajax 処理を書いているとき、API 通信の一部のリクエストだけ JSON が返ってこなくなる現象にハマりました。 jQuery.ajax() は返ってきたステータスコードを見て成否をチェックしていますが、301 Moved Permanently や 302 Found でも成功したとみなされ success の処理が走るようです。 jQuery.ajax({ url: '/api/', dataType: 'json', success: function(data) { // ステータスコードが 301 や 302 でも実行される console.log('OK'); } }); 今回ハマった箇所では http のリクエストを https へ 302 でリダイレクトしていました。結果的に success まで確実に処理は走っているけど API の結果が返ってこない
jQueryでは、クロスドメインなAjaxを行った際にはリクエストヘッダにX-Requested-Withが付かないようだ。 Cross-Domain AJAX doesn't send X-Requested-With header - Stack Overflow サーバー側のRailsで if request.xhr? といった条件で判定しているような場合に条件が真にならずにはまるので、そのようなケースでは以下を参考に CORS in Rails 4 APIs サーバー側がOPTIONSメソッドによるpreflightリクエストに応答できるようにした上で、jQueryのAjaxリクエスト時のsettingsに headers: {'X-Requested-With': 'XMLHttpRequest'} を含めるようにする必要がある。
JSON APIのURLをIEで開くと勝手にContent-Typeをtext/htmlと推測してしまうことがある。その場合、XSS攻撃ができてしまう場合がある これの対策として JSONだけども、HTMLのエスケープをする X-Content-Type-Options: nosniffを設定する XHRを利用する時は、X-Requested-Withヘッダを設定し、設定していなければサーバ側でエラーにする などがある。 1,2は知っていたけど、3は初めて知った。 2は楽なのだけども古いIEだと対応していないという問題がある。1は古いIEでも有効なんだけども、本来エスケープしなくていいものをエスケープするのがやな感じがする。 というわけで、2と3の組合せが良さそう。 で、X-Requested-WithヘッダはjQueryやprototype.jsでは自動的に設定してくれる。ただし、クロス
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JavaScriptはなぜトレンドが毎年変わると思われていたのか JavaScriptのエンジニャーは口を開くたびに出てくるツール名が違う、いつも環境設定をしている、みたいな話をよく聞きます。実際、それを揶揄するようなエントリーが人気だったりします。 とはいえ、JavaScriptを実際に使い込んでいる人は別にそんなに大きな変化だと思っていない節があって、台風は外周部ほど風速が速い、みたいな印象を感じます。 カンブリア紀のJavaScript ウェブサイトをパカパカ動かすための言語でした。DHTMLです。FireBugが出る前のJava
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く