Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】
はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。
2023年のシェル環境構築
tl;dr fig starship zsh fzf sheldon なぜ vscode の .vscode/tasks.json が fishと非常に相性が悪い。とくに fish-nvm を使っていると、fish 経由のパス実行時に node と npm へパスが通らない。 そもそも fish を使っていた理由は autocomplete を快適にするためだったが、1年ぐらい Fig を使っていて、補完はこれを任せていいと気づいた。 Fig はこういうやつ そもそも fish の拡張コマンドを使わないように生活していた。方言を覚えたくない。というか bash 拡張や zsh 拡張もあんまり覚えたくない。
GASの開発環境をローカルで作成する方法（2023年7月版） | DevelopersIO
Google Apps Scriptの環境構築をVSCode上で行う方法について詳しく解説していきます。clasp,asideを使って構築するので、爆速で構築できます。 ことのはじまり 私は最近Google Apps Script(GAS)の学習を始めました。 GASの学習を始めると、まずはAppsScript公式のIDEでスクリプトを書いていくことになると思います。 しかし、普段VSCodeを使い慣れている身からすると、VSCodeの便利機能が使いたくて仕方なくなります。 それじゃあ、使い慣れたVSCodeを使おうじゃないか！！ AppsScript公式のIDEだとGitに差分を残していくこともできないぞ！！（できます） というわけで、GASをVSCodeを使って開発する為の環境構築の手順を書いていきたいと思います。 前提条件 VSCodeがインストールされている Node.jsがインス
個人的PCまわりセットアップまとめ - Qiita
これは何 備忘録も兼ねて、PCのセットアップで自分のやることをまとめてみました。 随時更新していく予定です。 VS Code VS Codeの環境設定 setting.jsonに下記を追加します。 内容はコメントで書いているので、詳細は省きます。 { "editor.fontSize": 12, // フォントサイズを変更 "editor.guides.bracketPairs": true, // 対応している括弧にガイドを表示する "editor.minimap.renderCharacters": false, // ミニマップに実際の文字を表示しない "editor.renderControlCharacters": true, // 制御文字を表示する "editor.renderLineHighlight": "all", // 現在の選択行をハイライトする "editor.r
どうしても業務命令でPerlを使わざるを得ないあなたに送る、IDE（IntelliJ）でPerlを殴る方法。
今更なんで俺perlの環境をいれてるんだろう。。。 しかし昔の俺とは違う。 今はIntelliJがそばについているんだ。 俺はこいつと一緒にPerlを殴りに出かけた。 （注）この記事は前職で社内向けに書いたナレッジの修正版です。 plenv perlのバージョン管理。 だいたいこいつのインストールで数分の時間を取られる。 goのインストール時間をもっと見習って欲しいところですね。 https://papix.hatenablog.com/entry/2018/03/10/160838 anyenv入れておくと便利だよ。 欲しいperlバージョンをインストールしたら、 plenv install-cpanm してcpanmをインストールしておくこと。 carton モジュール管理。 cpanmとか使ってる人は今すぐ窓から飛んだほうがいい。 cartonは厳密なバージョン管理で冪等性が保たれる
Neovimを一瞬でVSCode並みに便利にする - k0kubun's blog
去年8年ぶりに vimrc を書き直した時はLSPの体験があんまりよくなくてLSPなしでNeovimを使い続けていたのだが、様々な言語のOSSをメンテする都合で用途に応じてIntelliJとVSCodeとNeovimの三刀流で暮らしていた結果、可能ならNeovimに寄せたいけどそれならLSPを使いたいなということになり、今回LSPの所を真面目に設定し直して、かなり良い体験になっている。 正直Neovimの設定はVSCodeのそれに比べたら面倒なんじゃないかという印象がありサボっていた節があるが、実際にやってみるとVSCodeと同程度に簡単に済む方法もあったので紹介したい。 何故Neovimなのか LSPの話の前に、タイトルだけ見た人がそもそも単にVSCode使えばいいじゃんと言いそうなので、どうしてIntelliJやVSCodeではなくNeovimに揃えようと思ったのかについて書いておく。
ひさしぶりにzshに戻りました - ちなみに
仕事用のマシンをM1 MacBook Proに交換してもらったので、開発環境を整え直しました。 2年ほど fish を使ってきたのだけれど、普段は良いのだけれど、ちょっと自動化したくなったときに、やはりPOSIX準拠じゃないシェルはなかなか難しかった。macOSの標準も zsh になったことだし、久しぶりに戻ってみることにした。 導入 現代なので XDG Base Directory Specification に乗っかっておくことにする。 Arch Linux の Wiki がよくまとまっていて助かるのでこれを参考にして進めた。 zshの場合は ZDOTDIR を指定するといいのだけれど、これをどこで指定するのかという問題がある。zshの起動時に最初に読み込まれるユーザー設定は ~/.zshenv なのだけれど、ここに ZDOTDIR を書くということは .zshenv だけホームディレ
絶対にRosetta 2を入れてはいけないM1 Mac開発環境構築 2021-2-1版
Rosetta 2とは Rosetta 2は従来のインテル用のアプリをApple Silicon Mac上で自動的に変換して実行できるようにする技術です。Rosetta 2は最初からMacにインストールされている訳ではなくて、 インテルアプリを実行しようとしてRosetta 2が必要になった時点でインストールを求められます。今回はこのインストールを徹底的に拒否して検証を進めます。 Macの設定あれこれ いきなり話が脱線しますがMackbookを買って最初にやった設定をメモ書きします。 クリックとドラッグの設定 タップでクリックやドラッグがしたい人向けです。特にタップでドラッグは長めのドラッグに便利なので重宝します。以下の記事が参考になりました。 Caps LockをControlキーに変更 Aキーの横はControlじゃないと落ち着かな人向けです。JIS配列の方はそのままAの横がContr
Mac を買ったら必ずやっておきたい初期設定を、全て自動化してみた
成果物 https://github.com/ulwlu/dotfiles/blob/master/system/macos.sh このスクリプトに全ての設定と、設定可能なオプションをコメントで記載しています。誰でもこのスクリプトのコメントを外したり任意の値を入れる事で使用可能です。 世界中のいくつかのdotfilesにはmacos.shが存在し、ある程度のMacOSの設定自動化を実現しています。しかし何百と見た中で、全設定と設定可能なオプションを全て網羅して記載しているのは恐らく初です。 これらの設定は破壊的なものではなく、いつかアプデによりキーが有効でなくなっても壊れる事はありません。壊れるのは~/ApplicationSupport/Dockディレクトリ配下のファイルを移動したり、sqlite群に無効な値をいれた時のみです（後述）。 この記事は何か dotfiles Advent C
エクスプローラ周り重い人向け覚書
ファイルコピー(というかエクスプローラ)周りの余計なお世話で発生する重さは本当にひどいので、 個人的な覚書を貼っておくので、もしよければ参考にしてほしい。 大変面倒だけど、全て設定すると劇的に早くなる。ためしてみてほしい。 勘違いしている人がやたら多いので追記下の設定はWindowsDefenderを切っているのでありません。WindowDefenderがWindowsDefenderを検索してループに陥る問題に対処しているだけです！ システム設定Windows Defender自身を検索して無限ループに陥る問題を解消する - 設定→更新とセキュリティ→Windows セキュリティ→ウイルスの驚異の防止 - ウイルスと驚異の防止の設定→設定の管理 - 除外の追加または削除 - 除外の追加→ファイル - 「C:\Program Files\Windows Defender\MsMpEng.e
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LOCAL環境でHTTPSが必要なときはlocal-ssl-proxyが便利 - Qiita