VSCodeにおける自動フォーマットで整形が崩れる問題への対処法
{ "editor.formatOnSave": true, "prettier.eslintIntegration": true, "prettier.tslintIntegration": true } 上記コードだとVSCodeのフォーマッタしか効かないため、整形がうまくいかずに崩れます。 そこで、"eslint.autoFixOnSave": true, "tslint.autoFixOnSave": trueを追加し、ファイルを保存して自動フォーマットしたところ、一回崩れて整形される（画面がチラつきます）という感じになります。 やはり"editor.formatOnSave": trueが原因のようです。
コマンドパスを自動で通し npm install -g しない - Qiita
追記 @hokaccha さんの指摘反映 npm install -g cosidered harmful 何かコマンドラインツールなどが必要なために npm install -g を強要するリポジトリがたまにある。 もっと面倒なのは、依存するツールがあるくせに README とかに書いてない場合だ。リポジトリにある設定ファイルからこちらが察して入れてやらないといけない。 グローバルに入れるツールは package.json の管理外なので、そこのバージョンは指定できない。 入れれば済むなら良いけれど、同じコマンドを他のリポジトリでも使っているような場合、求められるバージョンが違ったりすると面倒だ。
実務で役立つシェル系Tips - Qiita
パスの末尾に/があるかないかを気にしたくない 文字列を結合してパスを生成したりするときに、パスを格納した複数の変数を文字列結合するときがあります。 dirHome="/var/lib/hoge/" workDirName="work" echo "${dirHome}${workDirName}" # /var/lib/hoge/workと表示される しかし、dirHomeやworkDirNameのような変数をコンフィグファイルで設定していたり、実際に参照するところと定義箇所が遠いときがあると厄介なことが起こりえます。 例えば、下記のようにdirHomeの末尾に/がなかったらどうなりますでしょうか？
一番分かりやすい OAuth の説明 - Qiita
はじめに 過去三年間、技術者ではない方々に OAuth（オーオース）の説明を繰り返してきました※1,※2。その結果、OAuth をかなり分かりやすく説明することができるようになりました。この記事では、その説明手順をご紹介します。 ※1：Authlete 社の創業者として資金調達のため投資家巡りをしていました（TechCrunch Japan：『APIエコノミー立ち上がりのカギ、OAuth技術のAUTHLETEが500 Startups Japanらから1.4億円を調達』）。Authlete アカウント登録はこちら！ ※2：そして２回目の資金調達！→『AUTHLETE 凸版・NTTドコモベンチャーズ・MTIからプレシリーズA資金調達』(2018 年 2 月 15 日発表) 説明手順 （１）ユーザーのデータがあります。 （２）ユーザーのデータを管理するサーバーがあります。これを『リソースサーバ
Stateless な React Component の記法をまとめてみた - Qiita
はじめに React Component には様々な書き方があるので、自分の理解のため整理してみました。 var CommentBox = ... ReactDOM.render( <CommentBox hello="Hello, world" name="CommentBox" />, document.getElementById('content') ) 以下、CommentBox に hello と name という props を渡す stateless なコンポーネントを前提とします。 基本型 チュートリアルに出てくる書き方で、誰しもが真っ先に覚える書き方かと思います。 https://facebook.github.io/react/docs/tutorial.html var CommentBox = React.createClass({ render: functio
ReactJSとReduxの単体テストを'きちん'と書く - Qiita
React ComponentとRedux（action、reducer）のテスト ReactのComponent周りとReduxのaction周りのCIテストを行いたいと思ったので Jest+Enzymeで単体テストを書いてみました。 JestはFacebookが開発しているReactJS単体テスト用のライブラリです。 単体テストに加え、Reactのレンダリング結果をスナップショットとして保存することもできるため、 レンダリングの差分テストを行うこともできます。 EnzymeはAirbnbが開発しているReactのUnitテスト用ライブラリです。 propsにパラメータを渡したり、stateの変更を行ったりできます。 ReactJSを実践で使う時は Redux、 Matarial-UI、 redux-formを組み合わせることが多いと思います。 今回はMatarial-UI、redux-
複数のsagaを一つのrootSagaにまとめて使う - Qiita
概要 sagaを複数のファイルで書いといて一つのrootSagaにまとめて使うなら、各ファイルで、effectをexportし、rootSaga内で、yield allすればOK 背景 reducerは複数のファイルで個々に管理して、combineReducersでまとめてexportするのが主流 sagaでも同じように、関心事に複数のファイルで分けて管理して、まとめてexporとして使いたい 環境 redux-saga: 0.16.0 手順 item.jsとregsiter.jsでsagaを用意し、各ファイル毎にeffetctを配列にまとめてexportする index.jsでeffetcの配列をimportしてyield allでrootSagaにまとめる item.jsとregsiter.jsでsagaを用意し、各ファイル毎にeffetctを配列にまとめてexportする ポイントは
インストールするだけでVSCodeをカッコよくする拡張4つ - Qiita
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:/
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
1週間でVue.jsをマスターしようと思った時に参考にしたサイト
前置き（とばしてください〜） めっちゃ久しぶりに更新します。 プロフィールなども古いですがとりあえず今度そのあたりも更新しようと思っています。 簡単に今の私について。 携帯の販売→スマートフォンアプリの専門学校→Web制作会社→フリーランス→フリーランスの時に仕事を受けたスタートアップの会社に就職（まだ2週間前の話） こんな感じです。 フリーランスのときは（今もまだ仕事はちょこちょこ受けてますが） 基本的に私ができる仕事はなんでも受けていました。 ので、エンジニアの仕事があればデザインの仕事、Botのシナリオ作成（UXライター的な）、プログラムとはかけ離れた仕事などなどもしていました。 また、ガッツリエンジニア！！という仕事はなかったので、（なぜが割とがっつり常駐していたスタートアップではメンバー半分がエンジニアだった！） 逆に、仕事で新技術学べる機会は殆ど無く… 今の自分が活躍できる領域
VSCodeのオススメ拡張機能 24選 (とTipsを少し)
1. vscode-icons アイコンがついて見やすくなる。 2. GitLens とにかく強い。 「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。 git blameする手間なくなる。 3. Prettier コードのフォーマットは自動でやりましょう！ 複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。 関連のTipsはここ 4. Git History Git logが見やすい 5. Bracket Pair Colorizer カッコの対応を色付きで表示してくれる。 ものすごく読みやすくなって最高&最高！！ なおBeta版ですが、後継となるBracket Pair Colorizer 2も出ています。 6. Settings Sync どこでも同じ設定で使いたい人には便利。 ⇧ + ⌥ + U/D で設定をアップロ
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips - Qiita
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTipsTypeScriptes6DesignPatternsVue.jsVuex はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から
AWS IoTを使用してGitHubのコードをraspberry piに自動デプロイする - Qiita
概要 これまでは、GitHubにpushしたコードをraspberry piからgit pullしていたが、 この作業が面倒なので、pushしたら自動でraspberry piに反映させるというものを作りました。 C言語のコードも利用するので、コード反映後にコンパイルやrebootなどのコマンドも自動実行できるようになっています。 仕組み GitHubのmasterにpush GitHubのwebhookによりAWS APIGateway を呼び出す AWS APIGatewayより AWS LAmbda Functionを呼び出し、masterリポジトリであれば AWS Iotブローカへパブリッシュする raspberry pi上では専用エージェント(DeployIoT)によりAWS IoTブローカからのサブスクライブを受信する サブスクライブを受信した専用エージェント(DeployIo
コンテナ開発の始め方 - Qiita
社内向けの講演のために作ったスライドですが、わざわざGoogle プレゼンテーションにするまでもなかったし、特段秘密の情報もなかったので、Qiitaスライドの方に作りました 多分ちょいちょい追記します 対象 まだコンテナ開発していない人 コンテナ開発がうまくいかない人 既存プロジェクトをコンテナ化したい人 お品書き コンテナの概念のおさらい コンテナでの開発 docker のネットワーク docker-compose を使った開発の効率化 コンテナの概念のおさらい VM と コンテナ コンテナの目的 ある前提となる状態のもとで、特定のコマンド(のみ)を実行したときの動作をシミュレートすること サーバの中のプロセス $ ps -A PID TTY TIME CMD 1 ? 00:00:00 init 2 ? 00:00:00 kthreadd 3 ? 00:00:04 ksoftirqd/0
iOSでPWAとして起動されたときにLocalStorageに保存したtokenを利用してオートログインさせる - Qiita
背景 iOS(11.3時点)のPWAではCookieが起動ごとに初期化され、Session(Cookie)を利用したログイン状態の保持ができません。追加調査でLocalStorageについては初期化されないことがわかったため、LocalStorageを利用したオートログインの実現について実験しました 来週開催されるWWDCやiOS12で解消されるのを切に願ってます😭 過去の調査内容 【調査】WEBアプリをPWAとして起動した場合にブラウザのCookieが引き継がれるか確認する - Qiita 【調査】WEBアプリをPWAとして起動した場合にブラウザのlocalStorageが引き継がれるか確認する - Qiita サンプルアプリ 調査のために作成したサンプルアプリは今後もiOS, Androidバージョンアップ時に利用する可能性がありそうなためHerokuで公開しておきました。（無料プラ
Dockerfileを書くときに気をつけていること10選 - Qiita
この文章では、私が個人開発で使用しているDockerサーバの管理や、業務でプロジェクトメンバーに開発環境を配布する際に、Dockerfileを書く上で気をつけていることを整理します。 1. Dockerファイルのフォルダには不要なファイルを置かない docker buildは開始時にコンテクスト(現在のフォルダの状態)をDockerデーモンに転送します。具体的には、Dockerfileのあるディレクトリの内容をtarで圧縮し送ります。そのため、Dockerfileのディレクトリに不要なファイルがあるとビルドに余計な時間がかかりよくありません。 とはいえ、プロジェクトフォルダでビルドした成果物をイメージ化するためにDockerfileを含める運用はよくあると思いますので、その場合は.dockerignoreファイルを記述して余計なファイルが転送対象にならないようにします。 .dockerig
ReactNative + fireBaseなら爆速で開発できそうな件 - Qiita
クライアントから、SNSアプリを作りたいんだけど、と相談を受け、なるべく初期の負担を減らしつつ、素早くサービスリリースするにはどうしたらいいか調べたら、ReactNative + fireBaseが良さそうだったので、調査内容をまとめます。 とりあえずauth機能でログイン、cloud firebaseでリアルタイムチャット(react-native-firebase＋react-native-gifted-chat)の機能は、モック作って確認ずみです。 React Nativeとは React NativeはFacebookが作っているJavaScriptだけでクロスプラットフォームアプリを作れるフレームワーク。 Reactを使ってJSXでネイティブのViewを記述できる。JavaScriptでレイアウトを構成、WebViewではなくSafariと同じJavaScript Coreで動作
OSSのライセンスを理解する（「使用」と「利用」の違い、知っていますか？） - Qiita
最近、私的にDockerで遊んでいるのですが、Dockerを使っていると様々なライセンスを有したオープンソースソフトウェア（OSS）と遭遇します。自分が知らない間に著作権に抵触してしまうことが怖かったので、OSSのライセンスについて以下の流れでまとめてみました。 「ライセンス関連用語」を理解する 「オープンソースの定義」を理解する 「コピーレフト」を理解する 「主要ライセンス」を理解する 1.「ライセンス関連用語」を理解する OSSを理解するにあたって、まずは主要なライセンス関連用語の定義を理解することが重要です。私の場合は、「使用」と「利用」の違いや「オープンソースソフトウェア」と「フリーウェア」の違いについて、恥ずかしながら明確に理解できていませんでした。。。 【オープンソース・ソフトウェア（Open Source Software, OSS）】 ソースコードが無償で公開されており、誰
格安スマートリモコンの作り方 - Qiita
材料費400円の赤外線送受信器を、1,800円のラズパイZeroに載せて、Google Homeから操作する方法を、ゼロから丁寧に解説します。 安くても高機能 むしろ市販のスマートリモコンではできない、きめ細かな操作も簡単に実現できます。（例えば こんなこと ができます。） 簡単 電子回路を作ったことのない初心者でも作れるよう、電子部品の買い方から、丁寧に説明します。 電子工作の基本 ラズパイでの電子工作が初めてなら、こちら → Raspberry Piの電源でLEDを1個光らせてみる - ツール・ラボ （素晴らしく丁寧な解説なので、予備知識ゼロでも理解できるはず。） ここで紹介するスマートリモコンの回路も、まずはブレッドボードを使って、半田付けをせずに試作します。 試作品をしばらく使ってみて問題がないようなら、基板に半田付けして完成させます。 半田付けが初めてなら、こちら → うまくいく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
