フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 (2) SPA（シングルページアプリケーション） 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う？ どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ

Perl Advent Calendar 2014の枠が空いていたので、ただのメモですが10日目の記事として晒すことに。 今さらかなり基本的なことだけど、Perlでのベンチマークの実行方法を調べて、適当にいろいろ試してみたメモ。 Benchmarkモジュール 基本的にはperldocを見れば良い。 ゆとりなのでPerldoc.jpにて。 いろいろ関数があるけども、よく使いそうな雰囲気なのは次の2つな気がした。 timethis : 特定のコードの実行速度を測る cmpthese : 複数のコードの実行速度を測りつつ比較する timethis DateTimeは遅いって言われているけど、実際にどれくらい遅いのか試しに測ってみる。 現在の時間を取得して1日足すという処理を例に。 timethisの1つ目の引数は、2つ目の引数の処理を実行する回数を示している。 第2引数には、CodeRefかev

2016-12-09追記 「Pythonクローリング&スクレイピング」という本を書きました！ Pythonクローリング&スクレイピング -データ収集・解析のための実践開発ガイド- 作者: 加藤耕太出版社/メーカー: 技術評論社発売日: 2016/12/16メディア: 大型本この商品を含むブログを見る これはクローラー／スクレイピング Advent Calendar 2014の7日目の記事です。 Pythonでクローリング・スクレイピングするにあたって、いろいろなライブラリがあるので一覧でまとめてみます。 以下の4つのカテゴリにわけて紹介します。 Webページを取得する Webページからデータを抜き出す Webページの自動操作 総合的なフレームワーク なんでこれが載ってないの？この説明はおかしい！などありましたらお気軽にお知らせください。なお、この記事はいろいろなライブラリを紹介することを目

はじめに これは ドリコムアドベントカレンダー 7日目の記事です。 6日目はながいさんのRubyの凄く面白い特徴をRailsのコードを例に解説です。 自己紹介 twitter@ohrdev ドリコム歴は3年半位になります。 仕事 広告システムの開発とかをしてます、ゲームとか詳しくないです。ごめんなさい。 自分が扱ってるサービスはレガシーコードが多く、近年カルマの深まりを感じています。 趣味 寺社巡り、巡礼、写経(仏教的な意味で) 最近、仏像彫りを始めました、楽しいです。 経今日の話 10年程写経をしてるんですが、最近もっと効率的にできないかと思う様になり、その過程で思いついた(効率的?に)写経を行い徳を高める方法について書きたいと思います。 こんなネタで大丈夫か？とも思ったんですが、Qiitaには 写経タグがあるので大丈夫でしょう。 写経とは? wikipedia曰く、 写経（しゃきょう）

フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。 初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。 まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。 今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるためにスタイルガイドを有効活用しているという話です。 ちなみにこの記事はFrontrend Advent Calendar 2014 - Qiitaの 6 日目の記事です。 5 日目はじめての CSS 設計 - Qiita(@moschann) 7 日目CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter) 良

gistfile1.md if式 / if文 の条件節で、左辺に定数を書くべき言語はあるか？ @ajiyoshi.gist twitterからながれてきたこの話題。昔のCコンパイラは、if文の条件節で代入を書いても文句を言わなかったので、このようなコードに何の警告も出なかった。 #include<stdio.h> int main() { int x = 0; /* おそらく意図と違う。 x == 1 と書くべきであった これでは常に実行されてしまう */ if ( x = 1 ) { puts("残念"); } } 「これをこのように書けば、コンパイルエラーになり、ある種の誤りをコンパイラに見つけさせることができる」というのが、「老害」とされる人の主張である。 /* これはコンパイルエラーになる */ if ( 1 = x ) { puts("残念"); } もし使っている環境が「コンパ

この記事は Perl入学式 Advent Calendar 2014 の 5日目です。 こんにちは。サポーターさせていただいてます まっすー（@trapple ）です。 今日は昨日までと少し流れを変えて、普段のPerl入学式と同じような内容で行きたいと思います。 今年のPerl入学式の進行具合ですと、第4回サブルーチン/正規表現が終わったり終わらなかったりな進行具合だと思います。 今回はそのサブルーチンをちょっと発展させた内容になります。 サブルーチンまだ習ってないよ！ or 忘れちゃったよ！って人はまずは講義資料に目を通してみてください。 復習問題 それでは簡単な復習問題からスタートします。 mon, tue, wedといった3文字英語表記の曜日を引数として受け取り、月曜日, 火曜日, 水曜日といった日本語3文字表記の曜日を返すサブルーチンtranslate()を作ってください。 標準入

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

一人Advent Calendarの3日目です。 JSONPを使って外部のAPIを呼び出して、結果を取り込むということは色々なところで行われています。しかし、そもそもJavaScriptを利用した場合、クロスドメイン通信が使えないという前提があります。JSONPだったら、何故そこを回避できるのでしょうか？あまり詳しく考えたことが無かったので、簡単に調べてまとめてみました。なんというか4周くらい遅れている話題ですが、気がついた時に整理するとスッキリします。 JSONPの動作原理 Wikipediaさんをみてみると、そのものずばりのことが書かれています。scriptタグ内のsrc属性は別ドメインのURLを指定できるという点と、そのレスポンスはJavaScript関数呼び出し形式になるという点をついたのが、JSONPの動作原理です。なんというか、仕様の考慮不足を利用した仕組みだと思います。 JS

Photo by Jason Cartwright こんにちは。谷口です。 プログラミングの勉強で「ちょっとあの開発言語の勉強をしてみたいな～」「実際にコードを書いて動かしてみたいな～」という時に、ハードルとなるのが「実行環境の作成」だと思います。 そんな時に役立つのが、書いたコードをブラウザ上で実行できる「オンライン実行環境サービス」です。 今回は、実行環境の手間を省いて「書いたコードをブラウザ上で実行できる無料サイト」を紹介します。 目次 ・複数言語対応系 ・ideone ・CodePad ・paiza.io ・repl.it ・Codecademy ・runnable ・Wandbox ・SourceLair ・JavaScript系 ・JSFiddle ・jsbin.com ・Codepen ・jsdo.it ・PHP系 ・PHPfiddle ・PHP Sandbox ・Write

これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変わったりして大変恐ろしい事になってしまう。 そこで、ファイル全体を関数で括る事でスコープを生成して、グローバルではない変数にしておこう、というもの。ただしvar宣言なしに変数を使い始めると、結局グローバル変数になってしまうので注意。 次世代JavaScriptだとletとかあるけど触れません、関係ないし。 関数の前後にくっついてる括弧は 関数は作成するだけでは何もならないので、即時実行してやります

この記事は webcomponents.org の記事とのクロスポストです。 HTML は言うまでもなく、ウェブページを構成する最も重要な要素です。しかし、提供される機能が低レベルなため、複雑なコンポーネントを作ろうとすると、途端に div だらけの分かりにくい構造になってしまいがちです。例えば、あなたが必要な機能を盛り込んだ独自のコンポーネントを作れるとしたらどうでしょう？例えばそのコンポーネントに、機能を的確に表すタグ名を付けられるとしたら？既存のタグを拡張して、新しい機能を追加できるとしたら？ Custom Elements は、それを可能にします。 Custom Elements とはなにか？ # Custom Elements は開発者が独自に HTML タグを定義し、サイト上で利用できるようにすることで、繰り返し利用されるコンポーネントを単純化し、再利用する手間を大幅に削減しま

株式会社つみき UI/UX事業終了のお知らせ 拝啓　時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com

JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

まえおき デザインパターンに関しては色々言われていますね。 個人的には、「確かに微妙だし全体的に時代遅れっぽいけど基礎教養みたいなもんなので基本情報技術なんぞを受ける暇があるなら一通り目を通しておいてもいんじゃねえの？」っていう立場です。 微妙っぽい感じなものが多いデザインパターンなんですが、それでもちゃんと押さえておいた方がいいよねっていうものの一つがオブザーバーパターンです。 アプリケーション的なプログラミングをしていると絶対に避けて通れないパターンなんですけども、以外と存在も意味も知らずになんとなくとコピペで済ませている人に未だにめっちゃ出会うのでちょっとした危機感だよねっていうのが現状です。 このパターンはみんな大好きMVCの基礎となっている設計手法で、Webとかスマホアプリだとかをちゃんとやるには避けて通れないんだ。一切勉強もせずに聞きかじりの知識で「今さらデザパタの記事とかww

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに 何となくDeferredを知っているがちゃんと使ったことのない人向けの記事です。 本文中の p はPromiseオブジェクトを指します。（追記：Deferredオブジェクトを使うこともありますが、普通はPromiseに対して .then() や .done() をぶら下げます。） いきなり具体例 1 が出力された1秒後に 2 と done! が同時に出力される。 function test_deferred() { var p = new $.Deferred().resolve().promise(); p = p .then(function() { var d = new $.Deferred(); setTimeout(function() { console.log(1); d.resolve(); }, 1000); return d.promise(); }); p