はてなブックマーク

* こちらはオプトテクノロジーズ社内勉強会での発表資料になります TypeScript リポジトリの歩き方 TypeScript のコードリーディングのはじめの一歩としてどこから手を付ければ良いのかを知る手助けになればと思いこさえました 目次 コードベースの概観についてドキュメントから知る 実装のエントリポイントから読み進める 動かして試す 自分が実際にコードリーディングしたときの例 コードベースの概観についてドキュメントから知る まず TypeScript の内部アーキテクチャの概観について知っていきましょう TypeScript の wiki が大変参考になります Architectural Overview: コード上のコンポーネントを図示しつつ説明している Layer Overview や全体で利用されているデータ構造を説明する Data Structures といった、実装を理解

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

この root ディレクトリ配下で npx tsc コマンドを実行したものとします サンプルリポジトリ: https://github.com/sisisin-sandbox/dive-checker tsc のエントリポイントは tsc.ts で、ここから順を追ってコードを読んでいきます executeCommandLine.ts に飛びますが、ここは要はコマンドラインインターフェースを定義して引数に応じて Core TypeScript Compiler の呼び出しをしているだけです 今回の場合、引数なしで tsc コマンドを実行しているので executeCommandLineWorker 関数から performCompilation 関数を呼び出してコンパイル処理に入ります performCompilation 内で emitFilesAndReportErrorsAndGetE

*こちらは meguro.es の資料になります 自己紹介 株式会社オプト シニアエンジニア @sisisin（しめにゃん） GitHub Twitter フロントエンドマン（最近は React+Redux） スクラムマスター・インフラ・サーバーサイドといろいろやります 今はテックリードとか社内アジャイルコーチ相談窓口っぽいことやってます 皆さん API とフロントの分業しますよね？ 昨今は Swagger を使って API の interface を決めて、並列開発！ フロントも API も、interface を守って開発すればスムーズ！ 並列に走っていたので、フロントが API より先に出来た！ あれ？動作確認どうすれば・・・🤔 ユニットテストで担保する？ 実際のアプリ画面動くか試さなくて良い？ UI の自動テストは大変だから API 側の完成を待つ？ ユニットテストで担保する？

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? typelessというreactの状態管理ライブラリが非常に良いので紹介します 2019/10/24: 入門記事 書きました What is typeless? react+typescriptで使う前提のreduxラッパーライブラリ。reduxが抱える以下のような課題を解決する 異常に多いボイラープレートコード 重複した型注釈 大量の依存ライブラリ 欠如したコーディングガイドライン これらの課題を踏まえて以下のコンセプトでデザインしている TypeScriptフレンドリー 実用に耐えうる機能を全て内包する 容易なモジュール追加 多くの

はじめに ＊こちらはオプトテクノロジーズの社内勉強会LT資料になります LT資料ってあえて書いたのは資料が短いので許してねという前置きです Storybookとは Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. 公式doc より引用 結局なによ ReactなどのViewライブラリで作成したコンポーネントを単独で描画して、見た目をカタログちっくに見れる画面作成のためのライブラリ。 コンポーネントにわたす状態を固定値で入れたりして見た目のコントロールを自由に

*こちらはOpt社内で実施しているオライリーのHadoop本第3版の輪読会用資料になります 自己紹介 株式会社オプト　シニアエンジニア @sisisin GitHub Twitter フロントエンドマン（Angular,AngularJS中心） スクラムマスター 最近インフラ周りも始めました Scalaも書いてます Hadoop本第3版第3章Hadoop分散ファイルシステムについてかいつまんで説明していこうと思います 内容的にはHadoop本の内容をピックアップしているだけなので、真面目にやるなら実際のHadoop本を読んだほうが良いです 事前準備 （必須ではないが、動かしてみながらやるなら。） この記事を参考に、ローカルのHDFS環境を設定する リポジトリをクローンし、 3eブランチをチェックアウトしておく はじめに Hadoopは独自の分散ファイルシステムであるHDFS（Hadoop

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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? AngularJSのアプリをAngularへ移行するにあたって何が必要になるのかを洗い出す必要がありました。 その時に調べたことをまとめておきます。 なお、この記事を書いた時点でAngular移行の作業はまだ着手開始から3週間ぐらいの状態です。 前提 ざっくりいうと、TypeScriptとWebpack使ってるんで一般的には相当Angular移行しやすい方だと思います。 移行するアプリの構成 ベースはこちらの記事の通り http://tech-magazine.opt.ne.jp/entry/2016/07/27/190409#オプトの

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こちらはOptTechnologiesの社内勉強会で利用した資料になります 調べた動機 ユーザからの問い合わせで、計測時に上がってくるURLが登録しているものと違うと言われたところから調査していたら、二重エンコードが問題になっていたことがありました この時に、あ、俺URLエンコードよくわかってないな、と思ったのでいい機会だから調べてみようと思った所存です URLエンコードとは なんかよくわかんないけどマルチバイト文字っぽいのを%xxの形に直してくれるやつ！ 冗談はさておき。 URLエンコードとは 一般に世間で言われているURL

はじめに この記事は下記の勉強会での発表資料になります 自己紹介 株式会社オプト　シニアエンジニア @sisisin GitHub Twitter フロントエンドマン（Angular,AngularJS中心） Scalaも少々 最近はスクラムマスターやってます 先日、Safari11にてIntelligent Tracking Prevention(以下ITP)という機能がリリースされました ITP機能はユーザーのプライバシー保護のためにCookie利用に制限をかける機能で、これにより弊社の広告の効果測定サービスのユーザー行動の計測部分にも影響が出ました 最前線で使われるリアルなJSフレームワーク事情！ という題目とはちょっと逸れてしまいますが、その問題について元々どのように計測を行っていたか、そこでどういうケースで問題になったか、最終的にどのようにその問題を解決したかを説明しようと思いま

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

Material UIとは Material UI GoogleのマテリアルデザインをReactベースで使えちゃう今時なCSSライブラリ おっ、これかっちょいいと思って少し触ってみました。 日本語の解説記事とかが見当たらなかったので簡単に紹介します。 Get started この辺で解説されているので、公式のドキュメントとともに参考にする感じで。 Componentの使い方とか 大別して3種類のAPIがあります。 Props Events Methods 名前の通りそれぞれ、 reactコンポーネントのrenderで要素を生成する際に利用できるprop 要素で発生するhtmlイベント（onChange,onClickなど） 要素で使える関数 になります。 使い方を見ていきます。 Props これはそのまんま。 render() { return ( <DatePicker hintText