Flowtype導入のための指針・実際の運用について - Qiita
このドキュメントの目的 自分は趣味でFlowをずっと使っていて、またプロダクションでも今まで3プロジェクトほどにFlowを導入した。その知見。 「Flow は便利そうだけど、怖い」「いれてみたら色々ハマったからクソ」「わからん、なにもかも…」という人に対し、自分がいままで出くわしたパターンや、聞かれた疑問について、メジャーな解法を提示する。 なぜFlowを導入するか Babel から段階的に導入することが出来る React の JSX にも推論を入れることができる 部分的に適用できる ASTがES準拠であり、ESLintなどがツールが使える(TSは独自AST) それ自身ランタイムに全く影響はないので落とすのも簡単 実際にはReactと一緒に使うのが、エコシステムもユースケースも揃っていて、一番効果を発揮するだろう。それか、小さい npm モジュールを自分で書くとき。 型のメリット/デメリッ
PHPができても他言語の学習には役に立たない理由を考えてみた。 - Qiita
PHPしかできない奴はいつまで経ってもPHPしかできない？ PHPには下記のような都市伝説があります。 他言語から学んだ者がPHPを習得することは容易いが、PHPから学んだ者が他言語を習得することは難しい。PHPから始めた者は、一生PHPのみで過ごすか、一度PHPを忘れて、初心から他言語を学ぶしかない。 まぁ、言っているのは私一人ですけどね。引用っぽくしてますが、引用元はありません。都市伝説ですので。1 これはとあるRubyの開発者がPHPをdisったことから始まる第2回PHPなめんな選手権2のところで、404 Blog Not Found:「PHPなめんな」と「(Perl|Python|Ruby)をなめんな」の違いにあった、次の言葉がきっかけです。 それは、PHPユーザーは他の言語から学んでいるのか、という点。 PHPにも素晴らしいアプリケーションはありますし、それらを作成している人達も
2017年のフロントエンド。。。を見て - Qiita
さてFrontEndHandbook 2017が公開されましたね。私もパラパラ読んでいたのですが。 上記を読んで知らなかったことを調べた記録です。 dynamic-import TC39 Processは stage 3 まで来ておりES2017に入る感じでしょうか。 こんな感じでimportを関数のように利用して遅延読み込みができるようです。 <!DOCTYPE html> <nav> <a href="books.html" data-entry-module="books">Books</a> <a href="movies.html" data-entry-module="movies">Movies</a> <a href="video-games.html" data-entry-module="video-games">Video Games</a> </nav> <main
JavaScriptを高速化するFacebook製Prepackを試してみた - Qiita
(function () { const MAX_NUM = 10000; // パーティクルの個数 const STAGE_W = 465; const STAGE_H = 465; const FRICTION = 0.96; const ACC_VALUE = 50; /** * パーティクルクラスです。 * @param {number} x * @param {number} y * @constructor */ class Particle { constructor(x, y) { this.x = x; this.y = y; this.vx = 0; this.vy = 0; } } function updateParticlePosition(particle, gravityX, gravityY) { const diffX = gravityX - parti
Adobe製のJavaScriptデバッガTheseusがすごい - Qiita
この前、研究室の先生に教えてもらったAdobe製のJavaScriptデバッガTheseusがかなり便利なのでご紹介します。 Theseusとは Theseusは、AdobeとMITの共同研究から生まれたJavaScriptのデバッガです（→学会論文）。ChromeとNode.jsの上で動きます。具体的に何をしてくれるのかをざっくり言うと、関数のコールを追跡して、BracketsというAdobe製のエディタに下画像のような感じで表示してくれます。 Theseusのすごいところは、コールバックの実行まで追跡してくれることです。もちろん、エラーが起きた箇所もすぐに見ることができます。また、デバッグをするとき、気になる箇所にconsole.logを挟むことがあると思いますが、Theseusを使えばその必要もありません。関数の横に表示されているコール回数をクリックすれば、その関数の実行ログを表示し
Google Chrome拡張機能のアクセシビリティチェックツール"Alix"が便利すぎた - Qiita
Google Chrome拡張機能のアクセシビリティチェックツールAlixが簡単便利でかなり使えたので紹介します。 概要 Alixはa11y.cssを元にしたChrome拡張HTML lintツールで、閲覧中のHTMLコードにチェック用のCSSを当てることによってアクセシビリティ上のエラーを検証し、マークアップに関するアドバイスをしてくれます。 Chrome ウェブストア GitHub 使い方 Chromeを立ち上げ、Chrome ウェブストアよりインストールします。 Chromeの右上に><という形をしたAlixのアイコンが表示されるのでクリック。 すると設定画面が表示されます。 LanguageはEnglishを（残念ながら日本語はありません）選択。 通知レベルはEverything（旧式の書き方、注意とエラー、アドバイス）, Obsolete Stuff, Warnings & Er
React 15.5へのアップデート手順(prop-typesとReact.createClass) - Qiita
React 15.5がリリースされ、今までは同梱されていたReact.PropTypesとReact.createClassが非推奨となりそれぞれ別パッケージに分かれました。 React v15.5.0 - React Blog prop-types create-react-class React.PropTypes を prop-typesへマイグレーションする方法としてcodemodのスクリプトが提供されています。 reactjs/react-codemod: React codemod scripts React 15.5の警告内容 単純にReact 15.5へアップデートするとReact.PropTypesとReact.createClassのコンソールエラーが表示されます。 まだ非推奨の警告だけなので16.0のメジャーアップデートまでは普通に動作します。 Warning: Re
Flow導入時に最初にやることまとめ - Qiita
備忘録的に。 flow-typed をグローバルインストール 参考：Flow | Checking third-party code flow-typed という CLI があり、package.json があるディレクトリでこのコマンドを使うと React などサードパーティのライブラリに対する型定義ファイルを探してダウンロードしてくれる。
React+Redux+Express+MongoDBでものすごくシンプルなCRUDアプリをつくる - Qiita
概要 React+Redux+Express+MongoDBでCRUDアプリを作ります。 この記事の目的は、React/Reduxを触り始めた人が サーバーとの通信の方法（より一般的には非同期処理の方法） Reduxにおけるフォームの扱い ExpressによるAPI node.jsからのMongoDBの操作 Herokuへのデプロイ など、主にサーバー側のデータの操作に関わる基本的な事項を学ぶきっかけを作ることです。 この目的に集中するために、それ以外の点については一切気にしないことにします。 そのため、初心者以外の人（上記の内容を理解している人）がこの記事を読んでも得るものはないと思います。 この記事が書かれた背景には、少し前に自分自身がjavascriptによるフロントエンド開発からwebプログラミングを学び始めたころの経験があります。ReactやReduxの基本的な文法の理解を終えて
技術的な文章を書くための1歩、2歩、3歩 - Qiita
ちょっと書きたくなったので書くんじゃーい！ この文章を読み終わった時、読者がそれなりわかめ品質な文章を出力できるようになり、どこかに寄稿した時に全面リテイクを食らったりしないようになることを目指します。 mhidaka が 0歩目を書いてくれました！ 背景 筆者は普通のエンジニアです。その辺の開発とかしてる会社に勤めています。技術系の原稿も書きます。 原稿書きでご飯食べてるわけではありません(晩ご飯が豪華になることは稀にあります)。 今まで有能なレビューワー(muなんとかさんとか)編集さんとか(某社の安藤さんとか)とかとかに鍛えていただきました。 この場を借りてお礼を述べておきたいと思います。ありがとうございます。 なお、この文章は2013年10月時点での筆者(わかめ)のやり方です。 将来的にはより良いやり方を見つけるでしょうし、これとは全く違う書き方で上手にやっている人もいると思います。
外国人が語る：英語でクラスやメソッド等の名付け方 - Qiita
アメリカ人です。 Hello 👋 この記事の目的 多くの日本人は自分の英語力には自信がないではないでしょうか。残念ながら「英語がわからん」、「英語が全然できない」という声をしょっちゅう聞いています。でも、今まで英語ができて意味がちゃんと伝わる何人かの日本人に会ったがあります。完璧な英語ではないけど(外国人も英語でミスる時もある...)、がんばって話そうとするので充分仕事ができる人たち。そういうがんばる姿勢はオープンソースのプログラムや英語圏のプログラムに手を出すためには一番大事なことだと思います（外国人側もすごく助かります）。日本の文化では「私はできる！」と自慢することは少ない中、この記事を通して、流暢に話せなくても自分のプログラミングの命名の仕方にはちょっとだけでも自信を持たせたいなと思います。完璧じゃなくていいです。Let's go! 合わせて読んでいただきたい 【日本人エンジニア必
JavaScriptはフレームワークについて考え直すときが来ています - Qiita
JavaScriptはフレームワークについて考え直すときが来ています / Svelteを使ってみた これはFrameworks without the framework: why didn't we think of this sooner?の日本語訳です。 フレームワークのないフレームワーク 何故我々はこの可能性をもっと早く考えなかったのか 素のJavaScriptでは重要なアプリを書こうとしても必ず壁にぶつかってしまう。 でもコンパイラなら…コンパイラならきっと何とかしてくれる…！！ 待って、このFWはランタイムが入ってるのかい？……うん、今回はパスで。 -- 2018年のフロントエンドエンジニア 我々は、あまりに多くの無駄コードをばらまきすぎています。 多くのフロントエンドエンジニア同様、私もその事実を否定していました。 だってたった100kb程度のJavaScriptだぜ、小さな
[社内新人向け]Gitで使ってほしくないコマンド - Qiita
社内に新人が増えてきたので、弊社のWeb開発でのGitのゆるーい利用方針をまとめます。 本当はネガティブなことばかり書かずに、「覚えて欲しいコマンド、使ってほしくないコマンド」というタイトルにしたかったのですが、予想以上に長くなりそうなので分けます。 (追記：第二弾できました) → [社内新人向け]Gitで絶対にオススメなプラグインや設定3つ 社内環境 Web系開発がほぼ100％ ブランチワークはGitflowをベースにしたプルリク駆動開発 少人数チームなので、エンジニアは全員LinuxのCUI操作をできて欲しい（vagrantや開発サーバ上の操作など） GitのGUIクライアントは、SourceTreeとGithub公式を試しましたが、初学者が使うと却って危ない挙動をしてしまうケースがあったので、全員CUI操作をしてもらうことにしました CIツールはまだ導入できず。各サーバーへのデプロイ
![[社内新人向け]Gitで使ってほしくないコマンド - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c02b564a55050853439b0f6986d3aa42501396d4/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUE0JUJFJUU1JTg2JTg1JUU2JTk2JUIwJUU0JUJBJUJBJUU1JTkwJTkxJUUzJTgxJTkxJTVER2l0JUUzJTgxJUE3JUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJCJUUzJTgxJTk3JUUzJTgxJThGJUUzJTgxJUFBJUUzJTgxJTg0JUUzJTgyJUIzJUUzJTgzJTlFJUUzJTgzJUIzJUUzJTgzJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz00YzYzNDI4NzA3YjAxYTI4Y2QzMzAyOTFjYzQzMTkxYQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB6YXJhbW1lJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mZDc5M2U2Y2U4OTg4ZTM4OTI2YmE3NDkyOTc1MDJkZQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dc30c566ec78e040079beb6919643238f)
JavaScript の Number() は副作用がある可能性がある - Qiita
たまたまTwitterを見てたら以下のようなツイートを見かけました。 つまり、 isNumber っていう関数を作るなら一旦Numberでキャストした値と同一かどうかを比較すれば良いと。おそらく NaN を省いた number 型を true にしたいのかなという感じがする (NaN === NaN は必ず false)。 ただこれには問題があるらしく、 V8 のOptimizerリーダーである bmeurer から下記のようなレスが付いてました。 「 Number() では意図しない副作用があるかもしれない」という意味のレス。最初意味がわからなくて、「おや？」と思ったんですけど、その後で補足が。 「ToPrimitive関数が呼ばれてしまい、意図しないJSの動きをするかも。」とのこと。 つまり、 var a = { x: 1, [Symbol.toPrimitive]: function
あなたのサーバは本当に安全ですか？今もっともイケてる脆弱性検知ツールVulsを使ってみた - Qiita
はじめに サーバ管理をしている身としては、 セキュリティ は常に付きまとう悪魔みたいなもので、このセキュリティに関しては何をどこまで頑張ればいいのか不透明な部分が多い。 脆弱性に関しては、CVEなど、毎日情報は入ってくるが、それがどのサーバの何に関連したものなのかなんていちいち調べてられないし、どの脆弱性がすぐに対応しなければいけないもので、どの脆弱性があとあと対応すればいいものなのかなんてわからない。 実際のところ、大きな話題になった脆弱性くらいしか緊急で対応してないという人は多いのではないかと思う。 そんな中、満を持して登場したのが vuls !! 各サーバの脆弱性情報を取得して、個々のサーバそれぞれでどんな脆弱性があり、どのくらいやばい脆弱性なのかを検知できるようになった！ 今回はこのvulsを紹介します。 Vulsとは 公式でロゴが発表されたので、差し替えました 公式ドキュメント:
「後付の型システム」の活用についてFlowtypeとReduxから考える - Qiita
FlowtypeやTypeScriptは静的解析によって事前に型違反を検知することができる。JavaScriptは動的型付けの言語であり、本来はランタイムにしか型が出現しない。 FlowtypeとTypeScript、ともに「それ自身がランタイムではない」というのが特徴であり、一種のLintツールだと言うことができる。ランタイムではないがゆえに、嘘の事前条件を与えることでそれらを騙すことができるし、自らに有利な制約を追加できるという柔軟性を持つ。 JavaScriptの現実においての型 例を出そう。 type MyUtil = { foo(v: string): number; }; const util: MyUtil = new HogeUtil(); util.foo(1) //=> type error HogeUtil は何かしらのユーティリティ関数の詰め合わせだが、fooにしか
ES2016 / ES2017の最新動向を追ってみた - Qiita
今回はES2016で実装された2つの仕様と、ES2017以降で実装されるであろうStage 4の仕様の紹介をしていきたいと思います。 Array.prototype.includes() 配列内に求めている値が入っているかをtrue or falseで返しています。 今までの値チェックの方法はindexOf()とか使って値が入っているかどうかを確認していましたが、正直-1を返すとかが若干ややこしかったので返ってくる値がboolean型なのは可読性がぐっと上がるだろうなと感じたので、今後はこれを使っていこうと思いました。 const arr = ['hoge', 'fuga', 'piyo']; console.log(arr.includes('hoge')); // true console.log(arr.includes('hogera')); // false
wordpress 4.7でREST-APIの仕様が変更になったので合わせる - Qiita
問題 wordpress 4.7でRest APIの仕様が変わっていてそれまでfilterを使っていた記事の選択取得が出来ない。 After updating to WordPress 4.7 WP REST api v2 endpoints stopped filtering. Any one else experiencing this? Any solutions? http://stackoverflow.com/questions/41124246/wp-v4-7-rest-api-v2-endpoints-stopped-filtering 彼も困っている 対処 対処前 http://wocker.dev/wp/v2/posts?filter[category_name]=foo&_embed 静的ページもカテゴリも何もかもfilterだった 対処後 http://wocker
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
「JavaScript初級者のためのコーディングガイド」に補足を試みる - Qiita
はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
