はてなブックマーク

VSCode の Prettier の設定を理解する VSCode で prettier を使う際に、なんとなくで設定していてたまに困るので整理する。 prettier の vscode 用拡張機能のページをちゃんと読めば、いろいろと書いてあったのでメモ。 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode どの言語に対応してるんだっけ 以下の言語(FrameWork)に対応している。 JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTML · Vue · Angular GraphQL · Markdown · YAML プラグインを使うことで、phpとかrubyとかもいけるっぽい。 https://prettie

Typescriptでは、tsconfig.jsonでtargetを指定できる。 targetには、ES5だったり、ES6、ES2016と、ECMAScriptのバージョンを指定できる。 これは、TypescriptをコンパイルしてJavascriptに変換したときに、どのECMSScriptのバージョンにするかを指定できるオプション。 普段は、babelを使ってトランスパイルをしているんだけど、Typescriptであれば、babelを使う必要はなくなるんだと思う。 ※とはいえ、既存のbabelを使ったプロジェクトにTypescriptを導入する際など、共存する方法はあるみたいだけれども。 さて、この素晴らしいtargetの機能だが試しに使ってみると、Typescriptに書くECMAScriptはどのバージョンでもいいんだっけ？とか、targetにES5を指定したら、Promiseでも

Reduxに慣れ始めたのであらためてredux-thunkをちゃんと理解しようと思う。 redux-thunk まずは基本 非同期処理 middlewareを使う redux-thunk redux-thunk github.com redux-thunkは以下のように非常にシンプルなコードでつくられている。 魔法のようなredux-thunk function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => next => action => { if (typeof action === 'function') { return action(dispatch, getState, extraArgument) } return next(action) } } const thunk

当たり前のことかもしれないけど、アセットをCDNから配信したいけど、どうようかと思ったらものすごく簡単だった話。 Nuxt.jsをnpm run buildでビルドしてnpm run startで起動してサイトにアクセスしてみると、アセットはドメイン/_nuxt/配下を参照していることがわかる。 サイトにアクセスしてHTMLソースを見たとき <script src="/_nuxt/pages/index.js" defer=""></script> また、Nuxt.js内で以下のように書いていたimgのsrcも同様に hogehoge.vue <img src="~/assets/images/logo.png> _nuxt配下に置き換わっている。 ビルド後 <img src="/_nuxt/img/logo.ad5be72.jpg"> 今回、jsだったり画像だったりは、_nuxtから配信

日記 金曜の夜。 リファクタリングの本を買ったから、土日に読むぞ！そういえば最近走ってないから走りたいな！Skyrimもやりこむぞ！ 土曜の昼から現在に至るまで。 なんだか眠いなぁ。Twitchでも寝ながらみるか。 こうして日々が過ぎていくと思うと悲しい。 そして、こうしたことを悲しいと思ってしまうのもまた悲しい。 作ったもの 画像とかがスライドしていくUIをカルーセルというみたい。 それをVue.jsの単一ファイルコンポーネントで作ってみました。 こちらをものすごく参考にさせていただきました。 qiita.com Carousel.vue テンプレートはこんな感じで。 Carousel.vue <template> <div class="carousel"> <div class="carousel__main"> <div class="carousel__left"> <butto

日記 なんかこう人生に対してやる気がでないときってあるよね！ 今、そんな感じ。 よくあるのであまり気にしてないのだけれども、もしこれが続くようなことがあった場合、フリーランスだと怖いなぁって思う。 小説の死のロングウォークを思い出したりするよ。 よくよく考えれば、会社員でも同じかもしれないけれども。 前回の続き 前回はdrop.vueコンポーネントを作成して、main.jsに登録したところまでを行いました。 前回の様子 その続きを書いていくんだよ！ 日記 前回の続き drop.vueにドラッグ & ドロップでファイル選択を追加する onDropの処理を書く ちょっと前回を振りかえる 子のdrop.vueから親にデータを渡す drop.vueにドラッグ & ドロップでファイル選択を追加する 前回は、inputタグだけを使ってファイル選択のみがてきていた状態でしたが、当初の予定通りドラッグ&ド

日記 会社で有料セミナーにいってもいいと言われると、お高い普段なかなかいけないような勉強会を探したりしています。 これいいな！と思ったらちょっと高かったりして敬遠したことが何度かあったのに、いざ探すとなるとなかなか見つからないものですね。 本題 Vue.jsでファイルアップロード処理をつくった際にいろいろと勉強になったので、作成の過程を残しておくよ！ 正直なところ、バッドプラクティスみたいなものもいっぱいあるかもしれないし、未だにいろいろ悩んでるんだ。 なので指摘をいだけるととすごくうれしいです！ 今回つくりたいもの ファイルとテキスト項目をボタンを押下することで、サーバに送る処理をVueコンポーネントを使ってつくるよ！ 環境 Vue.jsはwebpack(laravel-mix)を使ってコンパイルしているよ！ 日記 本題 今回つくりたいもの 環境 まずはHTML 最初のmain.js サ

Laravelで掲示板を作成している途中だけれども、その素材をもとにVue.jsでオブジェクト指向フォームを作ってみるよ。 www.tohuandkonsome.site オブジェクト指向フォームってなによ？と思われたあなた。自分もよくわからないんだ。 でも、おお！ってなったので振り返りながら書いていこうと思います。 教材は毎度お世話になっております、Laracastになります。 laracasts.com 準備 とりあえずAjaxでPostするようにしていくよ フォームのデータをとってくる：v-model v-modelを使う。 axiosを使ってサーバにpostする ちょっと横道に入る レスポンスを受け取ろう 準備 自分は、Laravelをサーバー側のアプリケーションとして用意しています。 そして、以下のような、「タイトル」と「本文」をサーバー側にpostするhtmlを用意しています。

おはんきー！ 3連休だしVue.jsをはじめました。 (ビュー.jsって読むみたいです) すっごい楽しいので、みなさんもぜひいかがでしょうか。 javascirptもhtmlもなんとなくしかわからないポンコツでも楽しめています。 さっそくはじめてみよう ここに、いろいろと書こうと思ったのですが、以下のサイトの動画のチュートリアルがとてもわかりやすいので、こちらを見たほうがいいです！ laracasts.com とはいえ、上記の動画は英語なので、見るだけだとよくわからない部分がでてきたりします。 自分自身もエピソード10まで進めてみたところで、頭がパンクしちゃいました。 なので、ここでは自分の中で消化しきれなかったことを書いていこうと思います。 間違えだらけの理解の可能性も大いにありますので、その点はご容赦ください。 ツッコミをいただければ、嬉しいです。 余談ですが、動画で説明してくれる方の

この記事は、Raspberry Pi Advent Calendar 2017 25日目の記事として、いろいろと手直しを行いました。 メリークリスマス！ クリスマス当日の今日 25日、みなさんいかがお過ごしでしょうか。 今年のクリスマスは、残念ながら25日が平日で、イブの日になんか次の日仕事じゃねえか！と悲しんだ方もきっと多かったはず。 そこで今回は、時間がなくて会えないカップルや、まだクリスマスプレゼントあげてない！という人にぴったりな電子工作に挑戦します。 何ができるかは最後のお楽しみだよ！ 購入するもの ラズペリーパイZeroの設定をしよう 大人のモーターを電子工作に使えるようにする ラズパイと大人のモーターをつなげる モーターを動かすシンプルなコード 操作画面を作成する Flaskを準備する さきほどのdc_motor.pyを呼ぶ処理を書こう 画面をつくろう 最後に 購入するもの

せっかくだしpythonを使って、Webアプリケーションも作りたいな！と思ってDjangoにたどり着きました。 そして都合がよい事にオンライン学習の「Udemy」でセールがあった際に「Djangoの入門編」を見つけて購入していたので、始めることにしました。 www.udemy.com 当初は、オンライン学習のみをこつこつとやっていたのですが、動画ベースの講座なので時間が開くとさっぱり忘れちゃっていて、思い出すにも動画を見返さないといけなくって結構しんどいです。 なので、ここでは学習サイトでやった部分のうち、重要だと思われる部分を抜粋して記載していこうかと思います。 ただ、英語がぜんぜんわからないのに、英語の動画を見ているので、作業内容はともかく、口頭でいっているかもしれない重要なエッセンスは結構な頻度で漏らしている可能性があります。 そういった部分があれば、コメント等でご指摘いただければ幸

tohutokonsome.hatenablog.com ラジコンカーをつくるためにモーターを漁っていたら、「ステッピングモーター」に触れる機会があったので書いておきます！ 動かすのに、かなり苦戦しました。 誤っている箇所があればご指摘いただけると嬉しいです！ ステッピングモーターとは 使用した製品 モータードライバのはんだごて 配線をしてみる Pythonで実行してみる 反省点 はんだごてが適当すぎた データシート、秋月電子通商のマニュアルをちゃんと読むべき ステッピングモーターとは 通常のモータは電流を流すと、ぷしゃあああと何回転もするの対して ステッピングモータは、とりあえず30度回転しよっかみたいみたいな感じで 回転する角度を制御できるみたいです。 使用した製品 以下の製品を使用しました。 ステッピングモーター バイポーラ ステッピングモーター ＭＤＰ−３５Ａ ４８ステップ: パー