今日はてブでこんな記事が話題になっていました。 記事を読んでて、以前そこそこ大きめのサービスでバージョン2からの移行作業を経験した者として色々思うことがあったので個人的な思いを書きまとめてみることにします。 筆者自身はComposition APIの難易度…

とりあえず1周してサンプルコードも一通りいじったので感想をば。 www.shoeisha.co.jp TL;DR フロントエンド開発の自動テスト整備に悩んでいる人は絶対読め。 比較的作りやすいメソッドとかstoreのテストしか作ったことない人も読め。 Storybook放置しそう問…

CSS近年登場した:has()・:is()・:where()という3つの擬似クラスについて紹介する。 新し目のクラスということで日本語の資料はまだまだ少ないが、覚えておくと便利なので是非この機会に覚えていってほしいです。 本編前の注意書き 本記事執筆時点（2023/04/2…

約1年前に予約してた「Jestではじめるテスト入門」の電子版の配信が始まっていたので早速読んでみました。 peaks.cc TLDR Jestの導入と入門からやりたい人はマストバイ TypeScriptわからない人は結構厳しいかも ビジュアルリグレッションテストに関する記載…

転職の話 3月からとある自社サービスを運営する会社にフロント兼モバイルエンジニアに転職することになりました。 これまで受託開発を2年間やってきたのですが、 ずっと同じ案件でルーチンワーク化してきてたこと（しかもフロントの人材が他にいないので、ま…

ここ1年朝活をジミーに続けてきたところ、気がついたら300日を超えていました。大台を超えた記念（？）でちょっと今回の記事で振り返ってみようと思います。 朝活を始めたきっかけ 朝活を始める前、 技術などの力をもっと上げたい、でも平日夜の業後に勉強し…

皆さん、あけましておめでとうございます。 さて今年も2022年になったので、記録も兼ねて今年の抱負を上げて行こうと思います。 仕事 一応今の所仕事の範囲を広げていけている感はあるので、今年はフロントエンドの枠を少しずつ超えていきたいなと考えていま…

皆さんお久しぶりです。 前回の記事（node-sass記事）から気がついたら、なんと8ヶ月近く経ってしまいました。 仕事の方はというと、外部の仕事なので全然ここには展開できないのですが、Vue（TypeScript/時々バニラJavaScript）をゴリゴリ書きつつフロント…

お久しぶりです。 今回はcreate-react-appから生成したReactアプリでscssファイルを使用しようとしたところ、少し躓いたのでメモ的な記事です。ネット検索するとまだ問題の方法を使った記事ばかりがヒットするためそれの警鐘的な意味も込めて。多分create-re…

今回はVue.jsの勉強についての話です。 最近のはてブやツイッター辺りでプログラミングスクール云々の議論から発展して、独学で学ぶにはどうすればいいのかみたいみたいな記事・呟きを多く見かけるようになった。この流れを見て、実際にWebエンジニアとして…

あけましておめてとうございます。今年もよろしくお願いいたします。 年越し前に抱負を書こうと思っていたら、越してしまいました。 抱負を書きたくなったのははてなの他のブロガーさんがたくさん書かれているのを見て書きたくなった+今年やりたいことをまと…

また時期が空いてしまいました。miruoonです。 今回は「今年買ってよかったもの」「来年には欲しいもの」をまとめていきたいと思います。 今年買ってよかったもの Apple Watch SE(GPSモデル) 最新 Apple Watch SE(GPSモデル)- 44mmスペースグレイアルミニウ…

転職先でリーダブルコードを読むことになり、とりあえず1周読破したときの学習メモ。 ※15章は本書で出てきたコード作法を使った設計例の話だったので、記載していません 1章-理解しやすいコード-まとめ コードは他の人が最短で理解できるように書く コードは…

ということで無事転職活動が終了したため、更新再開いたします。 11月から希望通り自社開発のWebエンジニアになります。 この世情での活動だったため、半年はては1年かかるんじゃと思っていましたが、なんとか2ヶ月で終わりました。 主な転職理由はよくあるS…

今回はWSL2にDockerをインストールする手順を掲載する。 前提条件 WSL2をインストール済みかつ利用できていること Dockerとは？ https://knowledge.sakura.ad.jp/13265/ https://qiita.com/SatoshiSobue/items/a612ebbb3a9242c09db5 上記の記事でも説明され…

今回はWSL1をWSL2にアップデートする手順を掲載する。 前提条件 PCのWindows10がVersion2004、build19041 以上であること WSL1をインストール済み 注意：Windows10のバージョン2004へのアップデートは不具合対応のため、現在対象PCは不具合の影響を受けないP…

お久しぶりです。 相変わらず平日は都内通常出社の身なのと帰ったらでコーディングテストの練習もあり、ブログのネタすら考える時間もなく、時間が空いてしまったので生存報告代わりにこの記事を書く。 最近やっていること コーディングテストの練習 paizaの…

最近Youtubeの動画リンクを正規表現でマッチさせようとしたら苦労したので備忘録としてまとめる。 URLだけでもいいかと思ったが、それだと物足りないのでメールアドレスも紹介する。サンプルコードはなし。 今回の対象読者 正規表現は下記のリンクの内容レベ…

最近作成しているプロジェクトにJestを導入したのはいいが、ESLintを導入していたためにJestが使用できなくなって困ったので解決策の備忘録。 いつもよりは内容短いです。サンプルコードは入れていません。 今回の対象読者 作成中のコードにESLintとJestを導…

今回はフロントエンドで近年ほぼ必須となっているwebpackについて基本的な使い方を紹介する。 ただし一気に全部紹介してしまうと、初見では意味がわかりづらい横文字も多く読んでいくうちによくわからずに挫折しかける人も多そうなのでシンプルにJavaScript…

先日VSCode上から初めてGitとGithubにリポジトリをプッシュしてきたので、備忘録として書く。 batファイルは使いません。 今回の対象読者 Git・Githubとは何か把握されている方*1 Windows Subsystem for Linux（WSL1）を使われている方（先日正式版になったW…

今回は有名なコーディングスタイルの一つであるAirbnb JavaScript Styleを適用し、JavaScriptで書かれたコードをスタイルにそって書けるようにする方法を紹介。 今回の対象読者 ESLint・Prettierの基本的な使い方を使っていること Airbnb JavaScript Styleを…

これまでの記事で使用したサンプルコードをこちらのGithubリポジトリに掲載しました。 どう見てもコメント足らずなのでまた時間があるときに更新しておきます。。。 github.com 対象記事はこちらです。 katanugramer.hatenablog.com katanugramer.hatenablog…

今回はESLintを使ってシンプルなJavaScriptの文法チェックする方法を紹介。 今回の対象読者 ESLintとはなにか、使い方を知りたい人 VS Codeの拡張機能の使い方を知りたい人 前提条件 PCにバージョン10.12.0以上のNode.jsインストール済みであること ESLintっ…

前回は拡張機能をインストールし、とりあえず何も設定してない状態でコードが綺麗に整形（フォーマット）されているところまで確認した。リンクはこちら。 katanugramer.hatenablog.com 今回は引き続き拡張機能を使用し、整形方法の設定方法と使用メリットな…

フロントエンドとかnpmとかコマンドとかよくわかんないから、拡張機能だけ入れてすぐ使いたい人のためにメモ。 ※VS Codeは「Visual Studio Code」の略です。 まずPrettierって何？ 一言で言うと、ソースコードを自動で整形してくれるツール。 色んな言語に対…

初投稿です。OSS文化に魅了されつつあるノンWeb系SEです。 このブログでは以下のトピックを扱いたいと思ってます。 Web Development初心者なりに学んでる様子。 Tipsも載せていきたい。あまり日本語情報のないものも記事にしていければなと。 他の人が見ても…