同じTypeScriptという言語を利用する場合においても、トランスパイラによってTypeScript自体の機能制限がかかったり、思わぬトラブルを招く場合があります。それぞれのトランスパイラの特徴を踏まえた上で、それにより生じる問題も見ていきましょう。 1-1. tsc TypeScriptの開発元であるMicrosoft純正のTypeScriptトランスパイラです。TypeScriptを利用する際に typescript パッケージをインストールする必要がありますが、それに同梱されています。 公式ツールなだけあって最も早く最新バージョンのTypeScriptに対応したり、言語すべての機能を利用することができる一方で、バンドラではないためminifyやchunkの設定はできません。また、Path Aliasesの未解決や旧ESへの互換性が不完全であることが欠点として挙げられます。 tsco

はじめに 近年Web技術は様々な選択肢が存在しています。その中でユースケースに応じて適切に技術選択することがプロダクトのためにはとても大切です。 エンジニアの興味関心だけで不要な技術選択をして、開発速度やユーザ体験の低下は起きていないでしょうか？ また技術選択をするときに正しい言語化をできているでしょうか？ コンポーネント開発をしたいから、Reduxを採用する SPAにしたいから、Reduxを採用する 単一フローを採用したいから、Reduxを採用する React Hooksの登場でReduxは必要なくなった これらはすべて適切な説明ではありません。 今回は、React、SPA、Flux、Reduxをそれぞれ採用している方が、改めてその技術選択をしていることを言語化できているかの確認になればと思います。 Reactを採用するべきか？ Reactの価値は宣言的UI、コンポーネント開発にあります

前書き プログラミングで一番難しいところの一つは、「見積もり」だと私は思う。人から頼まれてプログラミングをする時、必ず最初に聞かれるのが「だいたいどれくらいで終わるか？」だ。厳しいところだと「何日に納品してくれるのか？」を問われる(むしろこれが普通かもしれない)。まっさらな状況から過去の経験を総動員してかかる時間を予想したり、可能な限りタスクに分解して時間を見積ったりするが、いつも不安に駆られる。多くの人も、見積もりに対して困難と不安を感じているのではないかと思われる。見積もりに対する自分の知識と経験を話して他の人にも参考にしてもらいたいと思って記事を書いた。 見積もりという言葉には色々な意味を含むが、今回の記事では「プロダクトをリリースするまでの期間の見積もり」から「頼まれた一つの機能の完成させるための期間の見積もり」までのスコープで話をしたい。 なぜ見積もりをしないといけないのか？ 見

この記事の目的 自分は、とある会社様の元でソシャゲの API 開発をさせていただいています。 ソシャゲは、リリース時やイベント時などに集中アクセスされやすく、負荷軽減の知識がない状態で開発を行ってしまうと、運用時に緊急メンテ祭りになりやすいジャンルかなと思っています。 これまで培ってきた MySQL の知識ですが、脳内メモリ量の関係上、暗記できないのでメモしておこうというのが主目的です。 ここ数年ほどソシャゲ開発しかしていないため、偏っている感がある内容ですのでご注意ください。 概要 ストレージエンジンは InnoDB。メインで扱っている MySQL バージョンは 5.6。 記事の内容ですが、これらのキーワードを見て、おおよそ分かる方は読む必要はないかと思います。 インデックス系 クラスタインデックス カバリングインデックス EXPLAIN で注意するべき値 トランザクション系 MVCC

Array.fromは配列風オブジェクトや反復可能オブジェクトから配列を作る標準組み込み関数です。 主な使い道1 イテレータからの変換 javascriptでは、mapやreduceと言った便利な高階関数がArrayにしか標準実装されていない割に、 MapやSetと言った組み込みオブジェクトから要素を順番に取り出そうとすると大体イテレータや列挙可能オブジェクト経由です。 (それ自体は良い抽象化だと思うんですが、whileとかfor ofになるのが辛い) イテレータを配列に変換したい場合がしばしばあります。

以下はMostafa Gaafarによる記事、7 New Exciting JavaScript Features You Need to Knowの日本語訳です。 7 New Exciting JavaScript Features You Need to Know JavaScript ( ECMA Script ) は進化する言語であり、たくさんのproposalやアイデアが出番を待ち受けています。 TC39 (Technical Committee 39) という委員会がJavaScript標準と新機能の定義を担当しています。 そして今年は彼らの活動が活発になっています。 以下は、現在ステージ3にある提案の一部の紹介です。 ステージ3は完成する直前の段階です。 これはつまり、この機能がブラウザやその他のJavaScriptエンジンにすぐに実装されることを表しています。 実際、以下の

こちらの記事は6 things I’ve learned in my first 6 months using serverlessの和訳になります。 サーバーレスの世界は適切なツールさえ見つければミドルレイヤーを省けるのでとても良いものです。 10月に行われたServerlessconfの後、自分の会社を全てサーバーレスにすることに決めました。最初の２ヶ月は　Python Flask appにLambdaを導入するのに必死でしたが、そのおかげでより良い方法を思いつきました。 そして６ヶ月後、私たちにとって４番目に大きいプロジェクトをサーバーレスでデプロイすることになったのです。以下の内容がデプロイするまでに私たちが学んだ教訓、意見です。 レッスン１　Pythonの使用は避けましょう Flaskは昔ながらのリクエスト、レスポンスのスタイルで、サーバーによって管理されるセッションがあるWeb

開発環境 Nuxt.js v2 Express v4 bootstrap v4 (bootstrap-vue) Atomic Designとは Atomic Design はデザインシステムを作るための１つの手段 ざっくり言うと、UI コンポーネントの粒度をカテゴリーに明確に分ける手法 Atomic Designの詳細については割愛しますので、下記サイトをご参照ください。 Nuxt.jsとAtomic Designの開発が最高なポイント Nuxt.jsの機能： routerなど面倒な設定を特に意識しないで実装できとても楽! 生産性向上 & 一貫性： コンポーネントの独立性が高く、さらにVuexを使うとデータの操作とビューの表示が依存性低く、仕様変更に柔軟に対応できる デザイン変更が発生する際、一箇所を修正するだけで、全てが適用される(これが一番好きなポイント) もちろん、それぞれのページの

NTTテクノクロスの上原です。 業務では、社内情報のReact製自前キュレーションサイトの構築を担当しています。 この記事はNTTテクノクロスAdvent Calendar24日目の記事であり、社内の勉強会で発表した内容をQiita記事として書きなおしたものです。タイトルは釣りです。 (2018/12/28追記あり) 導入 記事を書いた理由 Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた「爆速サイト生成」で有名なツールですが、そのリッチな機能性は、たとえばイントラ内サイト、業務システム開発、ツール開発などでも十分に活用できるものだと思い、その可能性を紹介するために書きました。 「静的サイトジェネレータ」って何？ いわゆる「静的サイトジェネレータ(Static Site Generator, SSG)」は、CMS(コンテンツ管理システム)の一種です。代表的

「実務未経験からWeb系エンジニアにジョブチェンジする方法」に関しては、最近かなり広く知見が共有されるようになってきましたが、「Web系エンジニアにジョブチェンジした後の転職戦略」に関してはまだまだ有用な情報が少ないという印象です。 学生時代からプログラミング経験があり、レベルの高い有名Web系企業さんに新卒で就職できた方たちは別として、キャリアの途中でWeb系エンジニアにジョブチェンジされた方たちが「エンジニアとして爆速で成長していく」「早い段階でガッツリ稼げるようになる」ためには、「適切なタイミングで適切な環境に移動する」ことが必須となります。 さらにその「移動頻度」に関しては、皆さんの考えている「数年ごとに転職」程度では大抵の場合「少なすぎ」であり、特に最初の会社に関しては「1年程度で辞めることが望ましい」というのが私の見解になります。 以下、最初の会社を1年程度で辞めた方がよい理由

はじめに TLS/SSLをはじめとして、様々な場面で公開鍵暗号が重要な役割を果たしているのは良く知られていることと思います。 ここで公開鍵暗号が何かというと、「かたやデータを公開鍵で暗号化して、かたや秘密鍵で復号する。他人にはデータの内容が漏れない」という説明が一般的です。 そうすると大抵の人は「TLS/SSL、公開鍵で暗号化して秘密鍵で復号するのね」と2つの情報を組み合わせ、それで納得してしまうわけですが、実は今日これは大体において誤り1です。 この誤りはいまやどうしようもなく広く流布していています。これは、適切な入門書がないことや、そもそも情報の検証を行う人が少ない ( そこまでする動機がない ) という理由によるわけですが、公開鍵暗号という言葉が2通りの意味で流通しているという面も大きいように思われます。 ということで、この2つの意味の違いに着目しつつ、基礎の整理を行いたいと思います

なぜsuper(props) を書くの? - React界のカリスマ「Dan Abramov」のブログJavaScriptes6React なぜ私たちは super(props) を書くの? 以下はWhy Do We Write super(props)? の日本語訳です。 (翻訳、おかしい部分があるかもしれませんが自己責任でお願いいたします。) Hooksが最新でアツいって聞いたよ。皮肉なことだけどクラスコンポーネントの楽しい事実について述べてブログをスタートしたい。どうだ！ これらの潜在的問題はReactを効率的に使うためには重要じゃない。でも、もしどうやって動いているか深く掘り下げることが好きなら面白いかもね これが最初のやつ。 私は人生で super(props) 何度も書いたよ class Checkbox extends React.Component { constructo

はじめに はじめまして、ぱそきいろと申します。 初めて技術ブログを書くので生暖かい目で見守ってください。 「いいね」いただけるとモチベーションに繋がるので、良いと思っていただけた方はお願いします。 こちらでブログもやってますので、よかったらご覧になってください。 ぱそきいろのIT日記 みなさん、サイゼリヤの間違い探しが難し過ぎると度々話題になるのは知っていますか？ 子供が解くレベルを軽く超えてると思いますよね。 これをプログラミングを使って解こうと思ったのがきっかけです。 （ただ、全く同じ技術で先にやっている人がいるんですよね。。。リンク参照） まぁ見た目が違うんで何かの参考になればと思います。 使った技術 MacBook Air Python 3.6 OpenCV 3.4.3.18 Matplotlib 2.1.2 やったこと 具体的にやったことの流れとしては 1.pythonで間違い探

概要 3Dが絡むプログラムでは「オブジェクトの姿勢を基準に判定したい」とか「マウスの操作を3D空間の操作に変換したい」とか「あるオブジェクトを自動で制御したい」といった気持ちになります。 その気持ちを実現するにはベクトルと回転を理解して、実装する必要があります。 私自身もまだまだ理解は浅いですが、現時点での備忘録として残しておきます。 「このオブジェクトの前」という気持ち 「this.gameObject.transform.forward」の意味は「このオブジェクトを基準にしたZ方向 (0,0,1) の単位ベクトル」 かみ砕いた表現では「このオブジェクトの前」です。 シンプルで基本的なベクトルなだけに、このベクトルから言える事は多く非常に便利です。 例えば Physics.Raycast のにこのベクトルを渡してあげれば「このオブジェクトの前方にある物」を判定する事ができる。 this.

VSCodeを使い始めました。とりあえずデフォルトをイケてる感じにしたかったので、4つの拡張機能をインストールしました。せっかくなので共有します。 Before After 私と同じVSCode初心者は、とりあえず下記をインストールしておけばOKだと思います！ Dracula Theme Material Icon Theme Indent Rainbow Bracker Pair Colorizer 1. Dracula Theme まずはこれ。Dracula Themeです。 これを入れればシンタックスハイライトが変わり、かなり雰囲気が良くなります。デフォルトのハイライトだと特別感が少ないので、本当におすすめです。 追記：Dracula以外のおすすめThemeをこちらにまとめています。よかったら見てください。 VSCodeをカッコよくするTheme拡張7つ GitHub https:/

2022/01/17追記：この方法では無効化できません。【Chrome】ServiceWorkerを今度こそ決定的かつ完全に消去するを参照してください。 ServiceWorkersというAPIが存在します。 ブラウザをフルスクリーン表示したり、デスクトップにアイコンを作成したり、PUSH通知を行ったり、バックグラウンドでJavaScriptを動作させたりといった機能を提供します。1 見てのとおりユーザには何一つ利のない機能なので、必ず無効化しましょう。 なに、動かなくなるサイトがあって困る？ 大丈夫。 ServiceWorkersがないと動かないサイトは、存在そのものが不要なサイトです。 手順 PC版Chrome URLにchrome://flags/と入力すると、全面英語の設定画面のようなものが出てきます。 最上部の検索欄に「Worker」および「PWA」「Progressive」と入

前書き 結論から。 オブジェクト指向とは、現実世界を正しく捉えることです。 オブジェクト指向、全然むずかしくないんですけど、悩んでる人多いですね。この記事を読めば絶対に分かるようになるので、ゆっくり読んでみてください。 想定読者は今まさにオブジェクト指向に苦戦している人たちです。 オブジェクト指向ができた背景とかオブジェクト指向のメリットとかそういうのはググればいくらでも出てくるので、この記事ではオブジェクト指向の本質的なコンセプトにのみ焦点を当てています。 あたまでっかちな説明ばかりで分かりにくかったオブジェクト指向が、5分でサクッと理解できる内容になっています。お楽しみに！ 目次 理論編 オブジェクト クラス プロパティ メソッド メッセージング 実践編 まとめ おまけ 継承 ポリモフィズム コンストラクタ カプセル化 理論編 むずかしく考えないでくださいね。オブジェクトとは、物です。

Vueの便利なテクニック７つ Youtubeで見つけたので勉強ついでにまとめてみる。 出展 Chris Fritz さん Youtube https://www.youtube.com/watch?v=7YZ5DwlLSt8 資料（Github） https://github.com/chrisvfritz/7-secret-patterns まとめ - 動画とはバージョン違い（英語） https://www.vuemastery.com/conferences/vueconf-2018/7-secret-patterns-vue-consultants-dont-want-you-to-know-chris-fritz/ Productivity Boost - 生産性向上 1. Smarter Watcher 元のコードはこれ。生成時になにかしてアップデート時にもなにかする。よくやる。

以下はHave you filled a developer bucket today?の日本語訳です。 Have you filled a developer bucket today? あなたがRedditに攻撃的なコメントを投稿するたびに、開発者の心のバケツが零れます。 多くの人々が無数の時間をかけてそのプロジェクトに貢献しているときに、あなたが独善的なIssueを送るたびに、開発者の心のバケツが零れます。 あなたが他のライブラリを褒めるためにそのライブラリを貶めるたびに、開発者の心のバケツが枯れ果てます。 Emptying buckets RedditやHacker News、あるいは他の大きなサイトに成果物や記事を投稿したことのある人は、その恐ろしさも知っているはずです。 力不足の怖れ、審判の怖れ。 たとえそれが素晴らしい仕事だったとしても、批判的なコメントで溢れることがあります

2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTipsTypeScriptes6DesignPatternsVue.jsVuex はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から