VSCode の Prettier の設定を理解する VSCode で prettier を使う際に、なんとなくで設定していてたまに困るので整理する。 prettier の vscode 用拡張機能のページをちゃんと読めば、いろいろと書いてあったのでメモ。 https://marketplace.visualstudio.co…

過去にPHPで以下のコードを実行した場合、このprintの結果はどこに吐かれるんだろう、と混乱したことがあった。

モックを学ぶ jestを使っていてモックで毎回あれ？ってなるので備忘録 関連 www.tohuandkonsome.site 前提 テスト対象のtarget.js import getName, { getAge } from "./service"; // 関数の場合 export default (id: string) => { const { name } = getName(…

ES2015 より前のクラスについてのメモ github.com 基本 ES2015 より前の構文。 ブラウザで実行する場合は、Babel を使わなくても、IE11 で実行することができる形。 もちろん Node.js でも実行することができる。 function Member(firstName, lastName) { th…

useEffectでrace conditionとdebounceに対応する ReactのHooksに入門した。 useEffectのクリーンアップは再レンダー時に毎回行われるんだよ！という公式ドキュメントをみて、ほーんという感じだったけど race conditionとdebounceをhooksを使ってシンプルに…

Typescriptでは、tsconfig.jsonでtargetを指定できる。 targetには、ES5だったり、ES6、ES2016と、ECMAScriptのバージョンを指定できる。 これは、TypescriptをコンパイルしてJavascriptに変換したときに、どのECMSScriptのバージョンにするかを指定できるオ…

redux-saga に入る前に redux-sagaのサンプルを見ていて、function*をみた瞬間、これなんぞ！となったのでメモ。 ジェネレーター function*はジェネレータ関数。 他の言語でも、見たことはあったけど、ちゃんと使ったことがなかった。 こんな感じに使える。 …

jest + Vue.js でテストコード入門に至る道のり フロントエンドでもテストコード書いてったほうがよさそうだから、Vue.jsでもテストコード書いてみるか！ということでいざ始めてみると、書けはするんだけどなにやら設定やら必要なモジュールが多くってねぇ、…

C言語のコンパイラを作成する以下の記事に入門してみたのだけれども、それがとてもよかったので夏休みの宿題のごとく感想文を書くことにするよ！ www.sigbus.info 内容としては、C言語を使って、少しずつC言語のコンパイラを実装していく、というもの。 アセ…

webpackの設定をちょっと変更して起動したいとき、webpack.config.jsを直接書き換えるか、それ用のwebpack.config.hoge.jsとかを用意したりすればいいよね。 なんだけど、yarn hogehogeってしたらCLIツールが立ち上がって、対話形式で設定を変更できたらすこ…

しょうもない話。 Reactにだいぶ慣れて、最近はVueに戻ってVuexを久しぶりさわっていた。 Vuexのmutationsでnameステートを更新したい場合は、こんな書き方をすると思う。 state: { name: "" }, mutations: { changeName: (state, value) => { state.name = …

最近、Reactばっかりなので、jsとは関係のないこちらの記事を写経している。 www.sigbus.info コンパイル後のバイナリファイルをgitで管理するのもあれなので、.gitignoreの設定をした。 .gitignore # 全部を一旦git管理対象外にしておいて * # !をつかって…

今までgitはGUIツールをメインで使ってきたけれども、もう少しちゃんと理解するためにコマンドで操作することにしている。 その中で、ブランチを切り替えたりする際に、ブランチ名が長いとコピペで面倒なので、補完できるように設定する。 設定に関しては、…

Reactの公式ドキュメントが日本語化されて改めて読み直してる。 英語で読んだ時によくわからなかったりしていた部分もちゃんとわかるようになって、翻訳をしてくださった方には感謝でいっぱい。 とはいえ、英語でドキュメントを読めた方がなにかと便利なのは…

ReduxをReactで使うときは、react-reduxを使うんだよ！と講座で教わり、以降何も考えずにreact-reduxを使ってきた。 connect()の書き方がよくわかんねえよ！とか、Reduxの非同期処理がわかんないよ！とか、いろいろありつつも、今回はそもそもreact-reduxっ…

Reduxに慣れ始めたのであらためてredux-thunkをちゃんと理解しようと思う。 redux-thunk まずは基本 非同期処理 middlewareを使う redux-thunk redux-thunk github.com redux-thunkは以下のように非常にシンプルなコードでつくられている。 魔法のようなredu…

UdemyのReact講座に学習が完了したので、この勢いでテストコードの書き方を学 ぶことにするよ。 今回は、こちらのReactテストコードのworkshopの視聴した内容から学んだことを書いていきます。 https://www.udemy.com/react-redux/learn/v4/overview worksho…

日記 2019年になったので、どこかで去年の目標を見返してみようと思う。 本題 横道にずれたり、なにかしながらやったりとあんまり進んでない。 正月休みのうちにReactの講座を終わらせたい。 前回からの続き www.tohuandkonsome.site SECTION8 APIを呼び出す…

UdemyのReactの講座を受ける機会があったので、備忘録がてら感想をメモ。 https://www.udemy.com/react-redux/ 過去にも、UdemyのReact講習をやったんだけれども、せっかくなのでやってみる。 www.tohuandkonsome.site 受けた人のレベル的に Web開発経験2年…

HTTP2まわりでの設定を行ったのでメモ。 本題 本題 HTTP2ってなに？ わたしのHTTP/1.1 わたしのHTTP/2 HTTP/2を導入する クライアント側：curlの準備 サーバー側の準備: Apache リクエストの内容を確認する(HTTP) リクエストの内容を確認する(HTTPS)① 自己証…

前置き Web案件の受託開発をしていてふと思った疑問。 納品するときって、ソースコード一式 or Webpackでビルド後のソースのどっちを納品してますか？ 大抵はソースコード一式を納品しているような気もするんだけれども、わりとビルド後のソースだけを納品し…

日記 Nuxt.js + Firebaseで、お酒の写真とコメントを管理するWebアプリをつくってる。 作成中のWebアプリ 使用ユーザーは奥さんの1名だけ。 とりあえずなにかしらWebアプリを完成させたい、という目標を達成するために必要最低限の機能は一通り実装できた。 …

フロントエンドの開発環境にdockerを使うようにしていたんだけれども、Node.jsのバージョンだけ意識するんであれば、nodebrewなりなんなりで切り替えして、ホストOSにそのまんまNode.jsしかり、jsのパッケージをインストールしたほうがいいんじゃないかと思…

Vue.jsでわりといろいろつくっている今日このごろ。 そこそこ使ってるのに、未だにEsLintもいれてないし、テストコードも書いてないという状況に危機感を覚えた。 特にテストコード書いてないのはまずい気がする。ブラウザで毎回確認するのも時間かかるしね…

正規表現系のメタ文字の意味とかって、検索しにくいよね。 やりたいこと たまに、こんな感じのHTMLがあって、 もととなるHTML <option value="">都道府県を選択</option> <option value="北海道" >北海道</option> <option value="青森県" >青森県</option> <option value="岩手県" >岩手県</option> <option value="宮城県" >宮城県</option> Vue.jsかなんかを使うことになり、なんやかんやでHTMLのoptionsをslotで利用するの…

日記 Vue.jsの本を読んでて、Vue.jsをつかってるとデータ駆動的になる～っていう記載があった。 なんとか駆動とかって使うと、とてもかっこいい感じがして、こういうことが言えるようになりたいなぁなんて思ってた。 先日、Vue.jsを使って、入力フォームの値…

日記 いろいろとつまみぐいをするような学習方法は螺旋階段のように、知識がついていって即効性はある反面、体系だった知識になりにくくって応用が利かないのがよくわかる。 どこかで一度立ち止まって、基礎を学んだほうがいいなーと思う今日この頃。 本題 …

当たり前のことかもしれないけど、アセットをCDNから配信したいけど、どうようかと思ったらものすごく簡単だった話。 Nuxt.jsをnpm run buildでビルドしてnpm run startで起動してサイトにアクセスしてみると、アセットはドメイン/_nuxt/配下を参照している…

久々の更新。 最近、Nuxt.jsとFirebaseで遊んでます。 さくさくつくれるからたのしい。 なのでNuxt.jsの記事を書くことにした。 Nuxt.jsを準備する Dockerを準備する Dockerfile docker-compose.yml 起動する Nuxt.jsを準備する さっそく、環境をつくってい…

日記 SPAをつくることにしたんだけれども、APIの認証をどうしていいのかがいまいちわからない。 APIに状態を持たせるのは良くないということで、セッションを使った認証ではなくJWTを使った認証にチャレンジしてみることにした。 （とはいえ、あんまりそのメ…