ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
リアルタイムウェブな観点からElixir / Phoenix について - Qiita
ここ最近、 [翻訳] Elixir - 次に来る大物Web言語 - Qiita とか 超高速なJSON APIをElixirフレームワークのPhoenixでビルドしてテストしよう | POSTD を読んで気になっていたので、勉強していた。 前提: 自分はシングルページアプリケーションに特化したフロントエンドエンジニアであり、サーバサイドのプロダクション運用にはそこまで強くない。あとこれはここ2日の勉強した日記でもあり誤解や勘違いも多々あると思う。 リアルタイムウェブアプリケーションのためのサーバー Railsの次の時代、リアルタイムウェブの為のウェブフレームワークがあるとしたら、次のような特長をもつと思う。 HTTP, HTTP/2. WebSocket等のプロトコル対応と抽象化 JSON APIに特化 認証系 キャッシュ管理 Viewに関心がない リアルタイムウェブは、その言葉をどう定義
require()とは何か？何が便利なのか - Qiita
などとついていますが、このrequire()ってよくわからない。 具体的には、 どうやって使えばいいの？ 普通にscriptタグで読み込む場合とどう違うの？ 「require」でググっても英和辞典とかしかでないんだけど！ ということでざっと調べてみました。 commonJS 以下、要約 そもそもの発端は、「Javascriptって良いよね。ブラウザ以外（ServerSide）でも使おうぜ」ということからだったらしいです。 しかし、scriptタグで読み込むこと前提だったので、HTMLがない（レンダリングエンジンがない）場合に外部ライブラリを参照する方法がない。。。 （さらに言えば、FileやNetwork、標準入出力など色々と不便。） これじゃ困るということで、ServerSideの標準仕様を定めたのがcommonJS。 その中で外部ライブラリを参照する方法が、各JSファイルをモジュール化
「進捗どうですか？」より2015倍捗る「困ってますか？」 - Qiita
概要 お願いした作業の進捗を聞くときには「進捗どうですか？」より「困ってますか？」と聞くほうが何倍も捗るよ、というお話。 タイトルの2015倍は冗談です。念のため。 「進捗どうですか？」はダメです あけましておめでとうございます。ところで皆さん進捗どうですか? ・・・いやー、流行りましたね。 この「進捗どうですか？」はtwitter上で使うと「最近どうよ、忙しいの？」程度の挨拶で面白みがあるのですが、実際に仕事で使うとなんのいいこともないと思うのです。 質問攻め いいことがないと思う理由は、「進捗どうですか？」は質問攻めになりやすいと思うからです。「進捗どうですか？」の先に待っているやりとりはだいたいこんな感じです。 「進捗どうですか？」 「進捗ダメです。」 「どこがダメなの？」 「単体テストが遅れています」 「どれくらい遅れてるの？」 「えーと・・・、0.5日分くらいです」 「項目数でい
最近の Web 開発者が使ってるらしいサービス - Qiita
MDN のページのヘッダ部分に、開発者が使っているサービスについてのアンケートがあったので回答してみた。 内容は、開発の上で使える様々なサービスについてだったんだけど、その選択肢が知らないのもいくつかあっておもしろかった。 MDN のアンケートの選択肢にあがるってことは、今こういうサービスがメジャーなんだなーと思ったので貼っておく。 (ただし、 Code Hosting -> Github や IaaS -> AWS みたいな分かりきってるのは省く) ちなみにサーベイは以下。 load-test Loader.io LoadImpact.com Loadstorm.com browsertest SauceLabs BrowserStack W3C validators CrossBrowserTesting Browsera security Nessus WebInspect ? Ne
そこそこセキュアなlinuxサーバーを作る - Qiita
先日「サーバーのセキュリティ設定がなにすればいいかわからない」と相談をうけまして。 自分も初心者の時どこまでやればいいかわからず手当たりしだいにやって沼に入っていたのを思い出しながら自鯖構築したときのメモを元にまとめてみました。 注意 セキュリティ対策は用途や場合などによって違います。 自分で理解したうえで自己責任でおねがいします。 対象読者 Linuxのサーバーを建て慣れていない人 Linuxはある程度さわれる人(自分でパッケージを入れたり、サービスを止めたりできる) ラインナップ ☆は導入の重要度と導入の容易さから個人的偏見からつけた値です。 4つ以上が"最低限やること"だと思ってください。 sshd
本気で使う Docker - Qiita
Docker Advent Calendar 2014 12/25 の記事、本気で使う Docker です。 ということで、実際に弊社で Docker を使った運用を開始した際にはまったところや、悩んだ所、どういう風に使っているのかについてぱらぱらっと書こうと思います。 "本気" なぜ Docker を使うのか、というと、僕の中では以下のような理由があります。 すべてのアプリケーションを(インフラ的に)同じ方法でデプロイ、管理したい 特定のサーバー / インスタンスの状況に依存することなく、アプリケーションの依存とインフラ都合の依存を別管理したい Docker なんかかっこいいっぽいし使ってみたい 上記のような都合から、どうやって作っていくかを考えていきます。基本的には1番目と2番目の理由が重要です。 Docker コンテナのいいところ とある Rails アプリケーションをデプロイするた
私のJavaScript情報の集め方 - Qiita
ちょっと趣向を変えてJavaScriptの情報をどうやって集めているかという話を書きたいと思います。 使っているもの Twitter RSS(feedly) Pocket はてブ TwitterはただフォローしてTL見ていたり検索してたまに見ているだけでリストを作ったりはしてなくて暇な時に見ている感じです。 RSSはこれから紹介するようなサイトとかこの人のブログ面白い！というものだけを登録しています。未読が100件増えると消化する気がどんどんなくなっていくので...。 PocketはTwitter、RSSで気になったものを後で読むためにとりあえず突っ込むのに使っています。 こうすることでRSSはすぐに終わるので、その後で時間があればPocketで読みます。 Pocketに溜まった記事はちょっとした合間に読んだりしていて、たまにまとめて読んだりして消化しています。 今見ると20件くらいあるの
Webスクレイピングの法律周りの話をしよう！ - Qiita
[2020/09/09追記] 本記事の内容は著作権法改正より前に記載されたものです。 最新の情報をご確認下さい。 * 著作権法の一部を改正する法律（平成30年法律第30号）について | 文化庁 * 令和2年通常国会 著作権法改正について | 文化庁 上記に関連して、次の記事を記載致しました。 * 【2020年度版】個人用クローラーの開発手順とその注意点 - Qiita 4日目になるまでに残り1時間なので、急ぎで書きます。 後、私は法律の専門家ではないので記事の正確性は保証できません。自己責任でお願いします。 はじめに Webスクレイピングの技術的な情報は多いのですが、法律に関する情報は数少ないです。 その為、技術的にできる事でも遠慮してしまい、インターネット上のデータを利用する事を避けてしまう人もいます。 特にLibraHack事件以降、その傾向が強いです。 これは「モノのインターネット（
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
そこそこセキュアなlinuxサーバーを作る - Qiita
先日「サーバーのセキュリティ設定がなにすればいいかわからない」と相談をうけまして。 自分も初心者の時どこまでやればいいかわからず手当たりしだいにやって沼に入っていたのを思い出しながら自鯖構築したときのメモを元にまとめてみました。 注意 セキュリティ対策は用途や場合などによって違います。 自分で理解したうえで自己責任でおねがいします。 対象読者 Linuxのサーバーを建て慣れていない人 Linuxはある程度さわれる人(自分でパッケージを入れたり、サービスを止めたりできる) ラインナップ ☆は導入の重要度と導入の容易さから個人的偏見からつけた値です。 4つ以上が"最低限やること"だと思ってください。 sshd
DB 設計時のサイズ見積り[最新版] - Qiita
こんにちは、すっかり秋ですね！@yone098 です。 みなさんDBの設計してますか？ DB設計時のサイズ見積り 以前はてなダイアリーで書いた記事は5年前のものであり、リンクが切れているものがあるので最新版として MySQL, PostgreSQL, Oracle, SQLServer におけるDB設計時のサイズ見積りをまとめ直しました。 URL内のバージョン表記を変えると以前のバージョンの情報になります。 MySQLは、あまり情報に変化は無かったので Excel でマクロなどを作成して自社で自動算出出来るようにするのが良いと思います。 データタイプごとに必要な要求ストレージが決まっているのでレコードサイズが決まり、あとは要件次第で何レコードになるかを予測します。 データタイプごとに必要な記憶容量 テーブルの最大サイズ関連 http://dev.mysql.com/doc/refman/5
![DB 設計時のサイズ見積り[最新版] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/fc0061ee00d6c47d46312cbc48ee3fd02c9cc805/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9REIlMjAlRTglQTglQUQlRTglQTglODglRTYlOTklODIlRTMlODElQUUlRTMlODIlQjUlRTMlODIlQTQlRTMlODIlQkElRTglQTYlOEIlRTclQTklOEQlRTMlODIlOEElNUIlRTYlOUMlODAlRTYlOTYlQjAlRTclODklODglNUQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWU2ZDI5ZDViYzUwMTY3ZDBiNTEyM2RiNTQ5ZDAwM2Vm%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweW9uZTA5OCU0MGdpdGh1YiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZjcyZDE3MzM3ZmQ5MmRkNjRkMWY2YjM1YjI0OTAxNGQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Da0b7ab789a5ccfc1b34355e1b9cbed70)
「リアルタイムWEBを実現する技術」の触りを知っておく為のまとめ - Qiita
概要 socket.ioについて周辺技術の触りをまとめておく これだけ知ってれば後から調べやすいはず 覚えること Socket.io Websocket ノンブロッキングI/O node.js Socket.ioって何？ Socket.ioのページを参照 「Socket.IOは、リアルタイム双方向イベントベースの通信を可能にします。」 「これは、信頼性とスピードに均等に焦点を当て、すべてのプラットフォーム、ブラウザやデバイス上で動作します。」 解りにくいので簡単に書くと 幾つかの通信方式とサーバー、ブラウザ、デバイス間の通信を抽象化してくれるライブラリでいいはず Socket.ioが対応している通信方式 Socket.IO protocol xhr-polling xhr-multipart htmlfile websocket flashsocket jsonp-polling 抽象化し
アクセストークンに有効期限を設けるべきかどうか - Qiita
OAuthプロバイダを提供することになったとして、アクセストークンに有効期限を設けるべきかどうかについて考えたい。OAuth 2.0の仕様にはアクセストークンの期限切れに関係する仕様が定義されているし、セキュリティをより強固にするためにアクセストークンは一定期間で期限切れにするべきだという主張があったと思う (確認していないので無いかもしれない)。しかしながら、例えばGitHub API v3ではアクセストークンに有効期限を設けていない。この投稿では、アクセストークンの有効期限に関係して起こり得る問題を取り上げる。 アクセストークンに有効期限を持たせておくとちょっと安全 アクセストークンが悪意のある第三者に漏洩してしまった場合、そのアクセストークンに認可されているあらゆる操作が実行可能になってしまうという問題がまず存在する。ここでもしアクセストークンに有効期限が存在していたとすれば、その操
結局Node.jsアプリケーションのデプロイはどうすればいいの？ - Qiita
node.js アプリケーションのデプロイをする時の選択肢が あまりにもありすぎて、結局どうすればいいのよ？ってなったので、 いったん基礎からまとめてみます。 デプロイとは何か？ アプリケーションのデプロイは大きく2つのフェーズに分かれます。 ファイルを所定の場所に置く 置かれたファイルの再ローディング 文章にするならば『ファイルを各サーバーの所定の場所におき、それらのファイルを再度ロードをする。』になると思います。 Webアプリケーションの場合 ファイルを所定の場所に置く前にテストを走らせたり 置いた後に静的ファイルを生成したりと、この２つの前後にはもっと色々なフェーズがありますが、 デプロイのタスクは、大きく分けてこの２つになります。 ファイルを所定の場所に置く サーバーにファイルを置く作業は、以下のような方法があります。 FTP tar などで圧縮scpで転送して解凍 rsync g
最新のプログラミング知識へのアップデート - Qiita
自分が現役でプログラミングをやっていた時期はPHP4全盛期で、クラスも使わず、データベースもmysql_関数を直接使うような時代でした。もちろんテンプレートエンジンやフレームワークも使わず、HTMLにPHPのロジックを直書きです。JavaScriptもほとんど使っていなかったと思います。 それから数年プログラミングの世界から離れていて、つい最近舞い戻ってきたのですが、あまりにも技術が進歩していて、加齢プログラマにはついてゆくのが大変です。 新しい技術は、前提として知っていなければならない知識が多いのですね。 そんなわけで、カムバックしてから学んだことをまとめました。 PHP系 他の言語、具体的にはRuby on Railsも何度か挑戦したのですが、PHPで出来ることばかりなので、なんとなくモチベーションが上がらなくて最近はやってません。でもRuby界隈は楽しそうで羨ましい。 PDO データ
JavaScriptのスタイルガイドまとめ(おすすめ4選) - Qiita
はじめに スタイルガイド自体は各々のルールでかなりの数が存在しますが、 下記のおすすめ4選を押さえておけば問題ないと思います。 おすすめ４選 Google JavaScript Style Guide Googleによる、最も代表的なスタイルガイドです。 時間のない方は、これだけにでも目を通しておく事をおすすめします。 JavaScriptのBad Partsについても述べられています。 英語：https://google.github.io/styleguide/javascriptguide.xml 日本語：http://www38.atwiki.jp/aias-jsstyleguide2/pages/1.html Closure Linterを使用することで、チームでの統一がしやすくなります。 グーグル製JavaScript文法チェッカー jQuery JavaScript Styl
プログラマが独立・起業する時によくするミスと対策 まとめ - Qiita
自分がプログラマから起業して沢山失敗したので、同じミスをプログラマ、エンジニアの方にして欲しくないという想いから、よくある失敗をまとめました。(常に追加中) プログラマでなくても、フリーランスや起業する方に役立つでしょう。 特に技術分野の経験だけしかない人は、気をつけましょう。 技術以外の大量の会社関連の知識、実行能力、実行する時間、経験が必要になります。 従業員との最も大きな違いはリスクかと思います。 従業員は金銭的なマイナスリスクは非常に少ないですが、フリーランスや取締役は数百万円以上のリスク負うことが非常に多いので、リスクヘッジをするための知識と経験が(嫌でも)多く必要になります。 技術も持っているのでプロダクトを作りたい方も多いと思いますが、会社の場合プロダクトを作るだけではなく、市場で勝てるプロダクトを作る会社組織も同時に作らなくてはなりません。どのような人材をどの順番でどのよう
新言語Hackで最強PHPerになろう！ - Qiita
新言語 Hack とは こんにちは、新言語 Hack が Facebook より OSS としてリリースされましたね。 詳細は以下の通り。 https://code.facebook.com/posts/264544830379293/hack-a-new-programming-language-for-hhvm/ 新言語 Hack は HHVM 向けの開発言語で静的型付き言語の性質を取り入れ PHP での素早い開発を実施し、PHPとの互換性があります http://hacklang.org/ http://hhvm.com/ HHVM (HipHop Virtual Machine for PHP) とは、Facebook が OSS で開発している PHP 用の JIT コンパイラです。 HHVM は PHP のコードをダイナミックにバイナリコードへと変換することで高速実行の実現を目
[JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 - Qiita
JavaScript のオブジェクト作成においてクラス定義で継承を実装する方法はいくつかあります。 正しい継承はどうあるべきか、基本から検証しながら考えてみたいと思います。 ※正しくクラス定義がエコ楽にできる様に追加記事書きました。 [JavaScript] getter/setterも使えるエコ楽なクラス定義 - もちろん継承も - private変数も 一番簡単なオブジェクトの作成方法 典型的な JavaScript のオブジェクトを簡単に作成してみて、それらを確認してみましょう。 var obj1 = {x: 12, y: "ab"}; var obj2 = new Object; // または new Object() obj2.x = 34; obj2.y = "cd"; // obj < Object var obj3 = [12, "ab"]; var obj4 = new
![[JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/41f59c9a4c5233d80d36d92d499f0102af401195/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFMyU4MSU5RCVFMyU4MiU5MyVFMyU4MSVBQSVFNyVCNiU5OSVFNiU4OSVCRiVFMyU4MSVBRiVFMyU4MiVBNCVFMyU4MyVBNCVFMyU4MSVBMCUyMC0lMjAlRTMlODIlQUYlRTMlODMlQTklRTMlODIlQjklRTUlQUUlOUElRTclQkUlQTklMjAtJTIwJUUzJTgyJUFBJUUzJTgzJTk2JUUzJTgyJUI4JUUzJTgyJUE3JUUzJTgyJUFGJUUzJTgzJTg4JUU0JUJEJTlDJUU2JTg4JTkwJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05YmU1OWFiZTFhMWQ5OGU4YzNjNDEyZTcxZmZmZWM1NA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwTGlnaHRTcGVlZEMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTYzYzc5NWFkZTZlZDJmZTFhY2Q1MGM0Zjk0OTA4YzFm%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3De3ed084b4388f1f96f451ecce07646e4)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
