急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita
この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ
ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
なぜ我々はいまだに文字列でコメントを書いているのか - Qiita
あるいは、画像コメントのすすめ。 TL;DR 画像コメントのほうが意図が伝わりやすい 画像URLからツールチップで画像表示してくれるVSCode拡張機能があるよ その場で画像を作るSVGエディタもあったよ 問題提起 みなさんは、少し複雑なアルゴリズムを書くことになったときどうしていますか。 たいていの場合、いきなりコーティングに取り掛かるのでなく、 雰囲気をつかむためメモやホワイトボードに落書きすると思います。 特に幾何計算では簡単なものでも図を描いた方がいいです。こんな感じ。 図を書いたら後はコードに落とすだけです。 ね、簡単でしょう？ // 指定した直線を対称軸としたときの指定した点の鏡映位置を返す function flipVectorByLine(p: Vector, line: Line): Vector { // TODO: よくわかるコメントを書く const ln = ne
プログラミングしたくてmac買った人のための環境構築 - Qiita
webアプリ(php)開発に最低限必要な環境構築一覧(+あると便利なもの) こちらをターミナルから実行することで環境構築ができます。 brewをまだ導入していない人は必ず実行してください。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" brew install vim brew install tig brew install mysql brew install homebrew/php70 brew install composer brew install tmux brew install nvm npm install -g gulp brew install tree #finderみたいにディレクトリ構造を見れる brew i
VS CodeでPythonするために必要なこと
なお、本稿の内容は基本的に、Windows版のVS Code（64ビット版）で動作確認し、必要に応じてmacOS版でも確認をしている。 VS CodeでPythonする理由 PythonをサポートするエディタやIDE（統合開発環境）は数多く存在する。例えば、JetBrainsのPyCharmは優れたIDEであり、恐らく、VS CodeでできることはPyCharmでもできるだろう。それでもなお、VS Codeを使う理由とは何だろう。筆者もちょっと考えてみた。 VS Codeは無償で使える、軽量なエディタである（上に挙げたPyCharmにも無償で利用できるCommunityエディションはあるし、オープンソースプロダクトとして無償で利用できるエディタも数多いが） Python拡張機能をインストールすることで、IntelliSenseを利用したコード補完が可能になる 同じくPython拡張機能によ
React を TypeScript で使う際のツール考察 2018 春 | La Verda Luno
最近のフロントエンドの流れから取り残されている感じがしたので、一念発起して React で小さなアプリを作ろうと思いました。 せっかくなので、 React 関連ツールはなるべく統合して使うようにし、コード本体は TypeScript を使って開発しようと設定を始めました。 （ webpack 4 が出てきてしまいましたので、まだ周回遅れです。） 残念ながら、 create-react-app でテンプレートを作成してからツールを追加していくたびにエラーに見舞われたので、メモ書きとして記録しておきます。 執筆に長い期間かかってしまいましたので、もしその間にライブラリがアップデートされ、動かなくなっていたら申し訳ありません。 目次と使用ツール （以下のリンクは関係する部分へジャンプします。） TL;DR create-react-app React 16 TypeScript webpack
1年前に作ったフロントエンド環境を色々新しくした - Qiita
新規立ち上げのチームを異動して、1年前に作った会社のフロントエンド環境（Vue.js + webpack(+Gulp)）をベースに環境を作っていたのですが、 色々古かったので、新しくしました 今回作ったものはGitHubにあげてます https://github.com/kurosame/vuejs-boilerplate この中からやったことをいくつかピックアップして紹介したいと思います パッケージを最新にする npm install -g npm-check-updates npm-check-updates -u // package.jsonのパッケージを全て最新にして上書く npm update // package.jsonに記載してあるバージョンに更新する npm install 今回みたいにバージョンアップするパッケージが多い場合は、これでいいと思う 他のパッケージに依存し
正規表現をサッと確認するのに重宝した神サイトを紹介してみる | DevelopersIO
はじめに こんぬづは、ゲーム用のPCを東京に置いているため、実家に帰ってくるとゲームができなくてしんどい田中です。こういうときに限って、ゲームの実況動画を見てしまったりして余計に心を痛めています。 さて今回は、今年正規表現をサッと確認するのに重宝した Regexper を紹介します。 Regexper こんなサイトです。とてもシンプル。 以下のような特徴があります。 正規表現を図で表示してくれる 表示した図をダウンロードできる 正規表現を図で表示してくれる 入力欄に正規表現を入力して、Displayボタンを押すと、以下の画像のようにその正規表現のパターンを図示してくれます。 どんな範囲でパターンマッチしてくれるのかがとても見やすくなります。 表示した図をダウンロードできる 入力欄の右下にあるDownloadボタンを押せば、表示した図をダウンロードすることができます。 例えば正規表現の仕様を
安定性のパターン大全 (とその実装) - Qiita
Cognitect社のNygardさんが10年ぶりに改訂したRelease It! 2nd Editionがまもなくリリースされます。内容は現在のベータ5版で全て書ききっておられるようなので、是非読んでみてください。 https://pragprog.com/book/mnee2/release-it-second-edition その中から4章の安定性パターンの概要をご紹介し、実際JavaのFailsafeライブラリを使った実装例を示したいと思います。 安定性のパターン Stability Patterns 分散システムや後続をブロッキングしてしまう重い処理は、システム全体がスローダウンしたり、無応答になってしまう危険にさらされています。クラウド時代になって、これらの安定性を保つための設計はより強調されるようになりましたが、わりと昔から様々な工夫がされてきたものでもあります。以下、Rel
色々なプログラミング言語で JSON をパースするためのイカしたサービス quicktype - かずきのBlog@hatena
今日、マイクロソフト本社から来た David さんとお昼ご飯をしたときに教えてもらえた彼のプロダクトが凄かったので紹介したいと思います。 quicktype.io quicktype JSON をペーストするとシリアライズ・デシリアライズするためのコードを出力してくれるサービスです。 例えば、以下のような JSON があるとします。 { "name": "Kazuki Ota", "age": 36, "pets": [ { "name": "hoge" }, { "name": "foo" } ] } ページに張り付けるとこういうコードが生成されます。 // To parse this JSON data, add NuGet 'Newtonsoft.Json' then do: // // using Sample.Models; // // var data = Person.Fro
ミドルウェアを使わないreduxをちゃんと理解するための個人メモ - 個性は次々死んでいく
仕事でいきなりredux/redux-saga さらに redux-actions の環境を触ってきて ミドルウェアを使わないシンプルな構成のreduxの理解が浅かったのでちゃんと覚えようと思った 環境構築 お手軽 create-react-app github.com $ create-react-app react-redux-example 次にreduxを使うのに必要なnpmモジュールをインストールする $ yarn add redux react-redux react-redux は react で redux を扱うために必要 これだけで環境は整った 処理の流れ ActionType ただの変数 イベントの名前を付けてく const ADD_ITEM = 'ADD_ITEM' const DELETE_ITEM = 'DELETE_ITEM' Action オブジェクトを返す
無料で整える趣味チームの開発環境 - Qiita
趣味チーム？ 趣味チームに所属している方はいらっしゃるでしょうか。 お仕事関係なしに友人たちと趣味で開発するような人たちです。 趣味と言えどもチームですから、チームで使える開発環境を整えたくなります。 「 趣味チームの開発環境を整えたい 」 そう思った時に課題になるのが お金 です。 もちろん投資だと思ってお金を出せればいいのですが、基本線は趣味ですから中々そうもいきません。 ここはひとつ趣味の一環として、 無料縛り という制約を貸した上で、趣味チームの開発環境をどこまで整えられるのかを考えてみたいと思います。 環境イメージ 先にネタばらしをしておくと、以下のような感じに落ち着きました。利用量の制限はありますが 無料 です。 簡単に言うと以下のようなことができます。 メンバ数 制限なし プライベートリポジトリ 作成可 任意のデバイスからのチャット(～1万メッセージ)、ファイル共有(～15G
さよならボイラープレート。s2sによる高速reduxアプリケーション構築 - Qiita
まだアクションクリエイターを自分で書いているの？ reduxとflowtypeを使ってフロントエンドアプリケーションを構築していると、ボイラープレートが多く、面倒だと感じることがありませんか？ しかし、もはや、このAST時代の前には過去の悩みでしかありません。 型を書く。それが全てです。 型を書いて、定数を書いて、アクションクリエイターを書いて、一つ変更したら全て変更して、もしくはなんらかのハックを行って型付けして、なんてものは過去のことです。 これからは、アクションクリエイターの作成に5秒以上時間をかけたら怠惰でありましょう。そして、これはs2sの1プラグインでしかありません。 プラグインを組み合わせると以下のようなこともできます。 s2s (Source to Source) これを実現している仕組みをSource to Source(s2s)といいます。 ソースコードからソースコード
直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」
直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」 WEBサイトならではのアクション要素の一つ、アニメーション。取り入れることができれば個性的でインパクトのあるサイトを制作できますが、アニメーションの作成はハードルが高いと感じる方も多いのではないでしょうか。そんな方におすすめできるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」を今回はご紹介します。 使い方が難しそうと思われる方も多いかもしれませんが、汎用性の高い便利なツールとなっています。使用方法をわかりやすく説明してくれている動画が紹介されていますので、まずは下記よりご覧ください。 詳しくは以下 使い方は直感的で、ドラッグで図形や黄緑色の＋印を動かすことで
ブラウザ拡張の開発をTypeScriptで爆速で始めるやつ作ったので紹介 - クフでダローバルな日記
先日、動画に突然「熱盛」を表示するとかいうクソChrome拡張を作って公開しました。 動画を再生しているとたまに熱盛と表示されてしまうchrome extension作ったから見てhttps://t.co/KGdPKFvjuP pic.twitter.com/ocyqJWSBBe— まざっち (@mazamachi) 2017年8月29日 めっちゃバズって結構インストールしていただけました。うれしい。 やっぱりこういうのは鮮度が大事で、思いついてから公開までを数日にとどめたいところですね。 とはいえ、Chrome拡張機能をシュッと作るためには Chrome拡張の作法に則った設定ファイルの作成 （manifest.jsonなど） ES6/TypeScript や Less/Scss などのトランスパイル自動化 開発版とリリース版の分離 などなど、設定事項が多くてかなり面倒です。 この記事は、
ネットサーフィンの壺
はじめてFirebaseを学んだときは良さがまったくわかりませんでした。 それはいまいちメリットがわかりづらか […]
自分も開発したくなる！楽しすぎるJavaScriptライブラリ7選 - Findy
2016.06.06｜最終更新：2017.11.17 自分も開発したくなる！楽しすぎるJavaScriptライブラリ7選 JavaScriptを使ってユニークなサイトやアプリを制作したい！ そんな時に活用できるのがJavaScriptライブラリです。 本記事では楽しくWeb開発が可能なライブラリを厳選して7つご紹介します！ 顔の認識ができるようになる！ 【 jQuery Face Detection 】 JavaScriptだけで、画像内に映る顔を検出できちゃいます！ 顔の座標位置を検出し、データとして取得できます。 複数人が画像に含まれていても、それぞれ検出可能です。 Webカメラにリアルタイムに映る顔を検出できる「clmtrackr.js」もありますよ！ VR空間で絵が書けるブラウザアプリ！ 【 A-Painter 】 A-Frameはブラウザ上で仮想空間（VR）を実現するフレームワー
AWS をフル活用して「サーバレス」な SPA を実装できる「サーバーレスシングルページアプリケーション」を読んだ - kakakakakku blog
6月末に O'Reilly から出版された「サーバーレスシングルページアプリケーション」を読んだ．ただ読むだけじゃ理解度が浅くなってしまうかもしれないなと感じて，今回は全ての実装を写経してみた．そのため少し時間はかかってしまったけど，フロントエンドには苦手意識があったし，今まで SPA の実装もしたことがなかったので，前半部分は特にワクワクしながら楽しめた．今回，監訳者の id:yoshidashingo にご献本を頂き，本当に感謝しかありません．ありがとうございます！と同時に，ガッツリ読もうと意気込んだタイミングで仕事に忙殺されてしまったりして，書評のタイミングが遅れてしまったのはすみません！ サーバーレスシングルページアプリケーション ―S3、AWS Lambda、API Gateway、DynamoDB、Cognitoで構築するスケーラブルなWebサービス 作者:Ben Rady発売
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンド・バリデーション
統合開発環境 Eclipse 日本語化プロジェクト - Pleiades
