サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
qiita.com/sisisin
この記事は Opt Technologies Advent Calendar 2020 17 日目記事です これもまた遅刻しました。何一つ間に合っていない(死) 16 日目の記事は @checche さんの 分析コードの書くコツ or 統計モデリングの実装(未公開) です 18 日目の記事は @___uhu さんの そろそろ競馬AIができそう(未公開) です RubyのLinter兼FormatterとしてデファクトのRuboCop というgemがあります 割とお世話になるんですが、フロントエンドでPrettierやESLintを使ってファイルの保存の度にLint/Formatを実行していた身からすると起動が遅すぎてとてもじゃないけどファイルの保存の度に実行できるような状態じゃありませんでした 世の中には同じような課題感を持った人がいたらしく、rubocop-daemonというツールに出会
* こちらはオプトテクノロジーズ社内勉強会での発表資料になります TypeScript リポジトリの歩き方 TypeScript のコードリーディングのはじめの一歩としてどこから手を付ければ良いのかを知る手助けになればと思いこさえました 目次 コードベースの概観についてドキュメントから知る 実装のエントリポイントから読み進める 動かして試す 自分が実際にコードリーディングしたときの例 コードベースの概観についてドキュメントから知る まず TypeScript の内部アーキテクチャの概観について知っていきましょう TypeScript の wiki が大変参考になります Architectural Overview: コード上のコンポーネントを図示しつつ説明している Layer Overview や全体で利用されているデータ構造を説明する Data Structures といった、実装を理解
TypeScriptリポジトリのwiki にVSCodeを利用したデバッグ方法が記載されていたのですが、tsserver自体のデバッグだけだったらもっと簡単に出来るのでメモ tl;dr 単にnodeのデバッグを普通にVSCodeなりchromeのinspectorなりでやるだけです 手順 TypeScriptのリポジトリを取得 ビルドを実施 tsserver.jsをnodeから --inspect フラグ付きで実行 tsserverのプロセスにデバッガからアタッチする tsserverのプロセスに任意のコマンドを投げつけて適当にデバッグする TypeScriptのリポジトリを取得 普通にcloneしましょう https://github.com/microsoft/TypeScript.git ビルドを実施 普通にビルドしましょう。至って普通です ビルド結果は built/local に吐
TypeScript の tsc コマンドを叩いたときに const x:number = ''; がコンパイルエラーになるまでの道のりTypeScriptAST TypeScript がどのようにして型チェックをしているのかとふと疑問に思ったのでコードを読んでみました 実際に tsc コマンドを叩いてから const x:number = ''; という「数字型の変数宣言に文字列の値を代入」するコードがコンパイルエラーとして検出されるまでの流れを一通り読んでみたので、解説してみようと思います TypeScript のアーキテクチャ概要について TypeScript のリポジトリの wiki に、TypeScript 本体のアーキテクチャについての概要が記載されています Architectual Overview のページを見ると、最初に以下の図が掲載されており、ここには TypeScri
*こちらは meguro.es の資料になります 自己紹介 株式会社オプト シニアエンジニア @sisisin(しめにゃん) GitHub Twitter フロントエンドマン(最近は React+Redux) スクラムマスター・インフラ・サーバーサイドといろいろやります 今はテックリードとか社内アジャイルコーチ相談窓口っぽいことやってます 皆さん API とフロントの分業しますよね? 昨今は Swagger を使って API の interface を決めて、並列開発! フロントも API も、interface を守って開発すればスムーズ! 並列に走っていたので、フロントが API より先に出来た! あれ?動作確認どうすれば・・・🤔 ユニットテストで担保する? 実際のアプリ画面動くか試さなくて良い? UI の自動テストは大変だから API 側の完成を待つ? ユニットテストで担保する?
typelessというreactの状態管理ライブラリが非常に良いので紹介します 2019/10/24: 入門記事 書きました What is typeless? react+typescriptで使う前提のreduxラッパーライブラリ。reduxが抱える以下のような課題を解決する 異常に多いボイラープレートコード 重複した型注釈 大量の依存ライブラリ 欠如したコーディングガイドライン これらの課題を踏まえて以下のコンセプトでデザインしている TypeScriptフレンドリー 実用に耐えうる機能を全て内包する 容易なモジュール追加 多くのユースケースに対する解決策をデフォルトで提供 *参考: https://typeless.js.org/introduction/motivation reduxの抱える課題について ドキュメントのmotivationの項で書かれていることは多くの人が課題を
はじめに *こちらはオプトテクノロジーズの社内勉強会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
何が起きたのか 普段TypeScirptを利用して開発しており、最近gulpプラグインのgulp-shellを導入して、tscコマンドをgulpから実行するようにビルド方法を変更しました。 ところがWindows環境で開発をしている方から、下記のようなエラーが出てビルドできないという報告が入ったので、これをどう対処したかという話をメモしておきます。 [15:53:08] Starting 'tsc'... '$' �́A�����R�}���h�܂��͊O���R�}���h�A �����\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF�������Ă��܂����B [15:53:08] Finished 'tsc' after 38 ms
AngularJSのアプリをAngularへ移行するにあたって何が必要になるのかを洗い出す必要がありました。 その時に調べたことをまとめておきます。 なお、この記事を書いた時点でAngular移行の作業はまだ着手開始から3週間ぐらいの状態です。 前提 ざっくりいうと、TypeScriptとWebpack使ってるんで一般的には相当Angular移行しやすい方だと思います。 移行するアプリの構成 ベースはこちらの記事の通り http://tech-magazine.opt.ne.jp/entry/2016/07/27/190409#オプトのフロントエンド-case1 補足 AngujarJSのバージョンは1.5 ES Module対応済み コードベースについて 規模 行数 TypeScript: 21936行 html: 8596行 Controller:149個 Directive:70個
はじめに こちらはOptTechnologiesの社内勉強会で利用した資料になります 調べた動機 ユーザからの問い合わせで、計測時に上がってくるURLが登録しているものと違うと言われたところから調査していたら、二重エンコードが問題になっていたことがありました この時に、あ、俺URLエンコードよくわかってないな、と思ったのでいい機会だから調べてみようと思った所存です URLエンコードとは なんかよくわかんないけどマルチバイト文字っぽいのを%xxの形に直してくれるやつ! 冗談はさておき。 URLエンコードとは 一般に世間で言われているURLエンコードには2種類のものがあります RFC3986にて規定されているUniform Resource Identifier(URI)の仕様の一部として定められているもの HTMLのFormで送信するデータ種類の1種である、application/x-www
広告の効果測定サービスで利用している、計測用のJavaScriptタグでSafariのITP対応した話JavaScriptSafaricookie はじめに この記事は下記の勉強会での発表資料になります 自己紹介 株式会社オプト シニアエンジニア @sisisin GitHub Twitter フロントエンドマン(Angular,AngularJS中心) Scalaも少々 最近はスクラムマスターやってます 先日、Safari11にてIntelligent Tracking Prevention(以下ITP)という機能がリリースされました ITP機能はユーザーのプライバシー保護のためにCookie利用に制限をかける機能で、これにより弊社の広告の効果測定サービスのユーザー行動の計測部分にも影響が出ました 最前線で使われるリアルなJSフレームワーク事情! という題目とはちょっと逸れてしまいますが
{ "compilerOptions": { "target": "es5", "module": "es2015", "sourceMap": true, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "declaration": true, "outDir": "dist", "lib": [ "dom", "es2015" ] }, "include": [ "src/index.ts" ], "angularCompilerOptions": { "genDir": "aot" } } ポイントは以下 module: es2015にして、トランスパイル結果でもimport/exportが利用されている状態にする declarationをtrueにし
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
このページを最初にブックマークしてみませんか?
『qiita.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く