8月からブログ書いてませんでしたが、色々トライしたことがあったので、まとめて2019年を振り返ります。 勉強会・セミナー 今年は、フロントエンド系とウェブ解析系と半々の割合で参加しました。業務の波で春夏は控えめだったけれども、逆に言うと、業務が少…

Vue CarouselをNuxtで使おうとするときに、少し戸惑ったのでメモ。 カルーセルをComponentとして公式に書いてあるのを参考に、以下のように用意した。 <template> <carousel> <slide>abc</slide> <slide>xyz</slide> <slide>123</slide> </carousel> </template> <script lang="ts"> import { Vue, Component } from 'vue-property-decorator'; import { Carousel, Slide…

3ヶ月ぶりくらいのQiita投稿は、本業でまだ使ったことがないVue/NuxtのTips。 個人的に請け負ってるお店のホームページを勉強ついでにVue/Nuxtで作っているのですが、デザインも自分で作ってるので、無駄にコンポーネント思考に作ったりしています。 そんな…

2回目、3回目と徐々に柔軟性が改善してきています。 もちろんこの間に自主ストレッチを行なっていることが必要なのですが、なかなか毎日続けられないので、もうちょい頑張りたい。 意識しているのが、1回30秒・3セット。 片方ずつやるので、1つのストレッチ…

nodenv で Node.js のバージョンを管理していたが、どうやって最新のバージョン反映させるのかを調べていたら行き着いた記事。 中身で何しているのかを知っておいた方が良さそうな気もしつつ、とりあえずメモ。 Nodenv環境のインストール可能バージョンを更…

今月、WeWorkで非エンジニア向けにLTをしました。 建物を建てるというモチーフに、ざっくりと5分で話せる内容にまとめました。 speakerdeck.com

https://ja.nuxtjs.org/guide/typescript/ Nuxt.jsがTypeScript対応をしている。 対応する前に nuxt-ts を利用したTypeScript対応の記事が多かったので、割とさまよったけど、結局、公式ドキュメントがほぼそのままな感じだった。 結構時間かかって調べたの…

体が固すぎて運動するにも怪我が怖くてあまりやれてなかったので、まずは柔軟性を人間レベルに取り戻したいと、ドクターストレッチの120分コースを体験してきました。 初めにアンケートと説明があり、参考までに、前屈での床との距離を計られたり、楽な姿勢…

同一コンポーネントにはできないものの、パターンが似ていて、1 つの場所にロジックを定義し、多数のコンポーネントを横断してロジックを共有可能にするような抽象化するときに、 Higher Order Components が有効。 https://ja.reactjs.org/docs/higher-orde…

リポジトリをcloneしてきて、npm installすると、package-lock.jsonに差分が出ることがある。 package-lock.jsonは、package.jsonでパッケージをキャレット指定するなどで、最新版が出る度に各パッケージの依存関係による差分が発生するのを防ぐ目的で作られ…

2009年4月に新卒で東京に就職してから、10年が経った。 10年後に、同じ会社にいて、当時無かった大阪のオフィスで働いている事になっているなど、当時夢にも思わなかった。いつかは地元で働きたいと思っていたが、区切りとなる10年後にそれが実現できたとい…

2019/02/22(金)に、CSS Nite in Osaka, vol.49「UI/UXマイクロインタラクション」に参加してきました。 https://cssnite-osaka.com/vol49/cssnite-osaka.com 会場は、デジタルハリウッド大阪。 ロフトや毎日放送の近く。横長の会場で、スクリーンが3箇所に設…

2019/02/19(火)に、関西フロントエンドUG ( @frontkansai )が主催する「Webデザイン・Web制作に関する勉強会 #4」に参加してきました。 kfug.connpass.com 会場は、株式会社タンバリンさん大阪オフィス (https://www.tam-bourine.co.jp/) の1F。 初めてお邪…

コンポーネントに分割していくときに、例えば何かのリストを表示する場合に要素を渡すということが発生するが、 変数名にあたる属性部分に「title」を使いたくなる場面がある。 // hoge-list <hoge-list> <hoge title="ほげタイトル1" text="ほげほげほげ" /> <hoge title="ほげタイトル2" text="ほげほげほげ" /> <hoge title="ほげタイトル3" text="ほげほげほげ" /> </hoge-list> // hoge <hoge> <h1>{opts.title}</h1> <div>{opts.text}</div>…</hoge>

Webフロントエンドの学びをする上で、個人的な学びやTips的なものについて、頭を整理するために、気軽にアウトプットするようなブログにしていこうと思っています。 くしゃみをしてスッキリするように、頭の中のもやもやを取り除くようにできればいいなと思…