Vite(ヴィート=フランス語で「速い」の意味)は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript(バニラJS)からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること: Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
Mac OS初期設定 開発用ソフトをインストールする前に、まずはMac OSの設定を整えて使いやすいデスクトップ環境を構築します。 初期設定 電源を入れると、色々と初期設定が求められます。基本的には指示に従って進めればOKです デスクトップ設定 まず電源を入れて目につくのが、下のDockが大きくて邪魔だということです。 その他にもスクロールの向きがWindowsと逆だったり、Finder(Windowsでいうエクスプローラ)が使い辛かったりするので、 以下のYouTubeチャンネルを参考にして設定し直すと、使いやすくなるかと思います。 OSアップデート 購入直後のOSはバージョンが古くなっていてセキュリティ的に脆弱なことがあるので、アップデートします。 基本的には初回起動時に自動でアップデート画面が出てきますが、以下の方法で手動アップデートも可能です ・Dockから「システム環境設定」を開
Microsoftにより公開されたWindows11互換性確認アプリ『Windows PC 正常性チェック』は正直に言って不親切な設計です。いったいどの部分が要件に引っかかっているのか表示されません。アップデートにより一部要件が表示されるようになったとされていますが、環境によっては正常に動作しません。 そんなMicrosoft純正よりも高機能でわかりやすいWndows11互換性確認アプリがGitHubユーザーのRobert C. Maehl氏により作成されました。 アプリケーション名は『WhyNotWin11』。このチェックツールを使用すれば、 WhyNotWin11を実行した様子 どの部分がシステム要件に引っかかっているか一目でわかります。各項目の詳細は以下。 Architecture (CPU + OS): 64bit CPU / 64bit OSを使用していればOK。32bitはNG
三種の神器 今やWSL,Docker,VSCodeは使えて当たり前という雰囲気になってきたので、初心者のためにすごく適当簡単に導入手順をまとめたよ 卍最強の環境卍を構築するため以下の4ステップで解説するよ WSL2の導入 Dockerの導入 VSCodeの設定 使ってみる 1. WSL2の導入 そもそもWSLって何?という方もいらっしゃると思いますが、Windows内でLinux環境を使うことができるぜということだけ覚えておけばOKです 導入についてはPowerShellで以下コマンドを実行するだけ! インストールしたらPCのスタートメニューからUbuntuを開き、ユーザ名とパスワードを設定しよう (Ubuntuを開くだけでユーザ名とパスワードを作成するための入力が求められます) WSLを真面目に知りたい方はこちら↓ https://learn.microsoft.com/ja-jp/wi
はじめに Pythonの環境構築は僕にとって、戦争でした。 如何せんツールが多すぎます。 インターネットで調べるとざっと挙げるだけで 元から入っているpython3 元から入っているpython3 + venv pyenv pyenv + pyenv-virtualenv pyenv + venv anaconda docker + python docker + anaconda ... 以上のような組み合わせが山程出てきます。 よく最近のゲームのキャラメイキングの 「組み合わせは無限大!」を思い出します。 この記事では、それぞれの環境構築の概念をイラスト画像でまとめようと思います。 環境構築のコマンド自体は取り扱わないためご注意下さい。 追記 2019/11/07 本記事はPython初心者による「概念のみ」に関する説明のため、ベストな環境構築や、すべて正確かつ詳細な内容は含んでないで
【2022/2/26 追記】 主にはてブコメントで様々なご指摘を頂いたので、タイトルの修正&内容を一部追記しました。分かりにくいタイトルを付けてしまい申し訳ございません。ご指摘ありがとうございます。 もともと本記事は自分用のメモを兼ねて駆け出しエンジニアの人が数人参考にしてくれたらいいかな、程度の気持ちで書いたものでした。 現在はてなブックマークのテクノロジーカテゴリーで 1 位になっており、予想の 1000 倍以上の人に見ていただける記事になってしまいました。 今後も精進します、ありがとうございます! 特に理由もなくローカルに MySQL を入れて遊びたくなる気持ちって定期的に湧きますよね。 私は湧きます、半年に 1 回ぐらい。 業務ではフロントを触ることが多く、DB はそれほど触りません。 そのため久々に MySQL をローカルで立ち上げようとするといつも手順を忘れてしまっていて、なん
Rosetta 2とは Rosetta 2は従来のインテル用のアプリをApple Silicon Mac上で自動的に変換して実行できるようにする技術です。Rosetta 2は最初からMacにインストールされている訳ではなくて、 インテルアプリを実行しようとしてRosetta 2が必要になった時点でインストールを求められます。今回はこのインストールを徹底的に拒否して検証を進めます。 Macの設定あれこれ いきなり話が脱線しますがMackbookを買って最初にやった設定をメモ書きします。 クリックとドラッグの設定 タップでクリックやドラッグがしたい人向けです。特にタップでドラッグは長めのドラッグに便利なので重宝します。以下の記事が参考になりました。 Caps LockをControlキーに変更 Aキーの横はControlじゃないと落ち着かな人向けです。JIS配列の方はそのままAの横がContr
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips(共通環境・ブラウザ以外) ソフトウェア開発の環境を考える 基本の環境構築 ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 CI(継続的インテグレーション)環境の構築 成果物のデプロイ 使用ライブラリのバージョン管理 環境ごとのTips(ブラウザ環境) ブラウザ環境 ブラウザ関連の組み込み型 Reactの環境構築 create-react-appによる環境
Windowsの大型アップデートの20H1でWSL2がとうとう利用できるようになりました。その後、19H1や19H2にもバックポートされることになりました。 今まで、長らくウェブサービスの開発やプログラミングの勉強では「macが良い」と言われることも数多くありました。Windowsでは環境構築が多少面倒だったり、Windowsを対象としてみていないツールもあったりして、多少ビハインドもありましたが、Microsoftは近年さまざまな改良をやVisual Studio Code、Windows Terminalなどの新しいツールなどを継続的にリリースし、Windowsでの開発体験はかなり良くなってきました。その最後のトドメがWSL2です。 ちょうどIntelのCPUが元気がなかったりmacのキーボードが不評だったり、その一方で絶好調のAMDのRyzen機が次々とリリースされていることもあり、
私は年に 1 回、自宅と職場の 2 台の Mac をクリーンインストールでアップデートするのですが、開発環境の構築をある程度自動化しています。来年のために手順を残しておくので、参考にどうぞ。 目次 これまで 事前準備 Brewfile を作成する AppStore にログインしておく パッケージをインストール 再起動 パッケージのインストール後 Brewfile に書けるパッケージの探し方 おわりに これまで 自動化を始めたのは多分 2013 年とかその頃。使っていたツールは Brewfile に始まり、Ansible を経て、去年は rcmdnk/homebrew-file を使っていました。Ansible 時代が一番長かったと思います。2019 年のクリーンインストールの時期になり、セットアップはどうしようかと調べたところ、Homebrew/homebrew-bundle が Home
初めに 自分は2年くらい業務でGCP(今はGoogle Cloudですね)を使っていたのですが、友達が個人開発でGoogle Cloud使いたいから手伝ってとのことで、久々にコンソール触りたいなーと思ったので環境構築を手伝うことにしました。友達のクレジットカードが紐づいた環境なので自分の環境以上に課金やセキュリティに対して注意しなくてはなりません。課金だけでなく友情も爆発してしまいかねませんので 今回は最初期から構築するということで個人開発者向けにお財布や環境を守るうえでの最初にやったほうがよい課金のセーフティ的な設定をまとめていきたいと思います。企業で検証環境管理している人にも参考になるかと思いますので是非最後まで見てもらえると嬉しいです! 前提 Google Cloudのプロジェクトを作成していること 課金アカウントを作成していること(クレジットカードの紐づけできていること) その1
ExplorerPatcherやStartAllBackなどのサードパーティ製のUIカスタマイズアプリを使用している環境において、Windowsが起動しなくなる恐れがあります。 この不具合はKB5022913以降(2023年3月1日以降の更新プログラム)をインストールした環境で発生する場合があります。 この不具合を回避するには、KB5022913およびそれ以降の更新プログラムをインストールする前に、サードパーティ製のUIカスタマイズアプリをアンインストールしてください。 StartAllBackを使用している場合、3.5.6以上に更新していると、この不具合を回避できるかもしれません。(※断定ではありません) Microsoftによると、Windowsの見た目・ユーザーインターフェイス(UI)を変更するようなアプリを使用していると、PCが起動しなくなる恐れがあるとのこと。2023年3月15日
はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作成するための
こんにちはコカコーラ大好き、カジです。 7/3に行われたDevelopers.IO 2020 Connect で、「基礎から応用までじっくり学ぶECS Fargateを利用したコンテナ環境構築」というタイトルで、お話しさせていただきました。 ライブに来ていただいたみなさま、ありがとうございました! お客様や自社の開発部門から、急に「次のシステムはコンテナ使いたい」と言われ、コンテナ実行環境を構築しなければならない状況に直面し、慣れない部分が多いと思います。 AWSにはコンテナ向けのサービスは複数あり、少人数でも運用しやすいのがECS Fargateです。そんなECS Fargateを中心に、実用的なコンテナ実行環境をどのように構築すれば良いのかについて解説しました。 目次 なぜコンテナ? なぜECS Fargate? AWSコンテナ関連サービス コントロールプレーンのざっくり比較 データプ
この記事はNuco Advent Calendar 2023の1日目の記事です。 はじめに 2023年最新のフロントエンド開発環境についての紹介記事です。 分野別に、おすすめツール群と、その特徴などを紹介していきます。 デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。 これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています!興味をお持ちいただける方は、こちらまで。 フロントエンド開発おすすめツール集 エディタ エディタやIDEは好みの問題も大きいので、メジャーなものを簡単
はじめに 理系大学生諸君は、実験で得たデータの解析やグラフ作成にPythonを使っているでしょうか? 私の所属する研究室では、PythonまたはNgraphでグラフを作ることが推奨されています。 特定のグラフ作成ソフトと比べてPythonでグラフを作るメリットというのはいくつかありますが、各設定項目をテキストデータとして確認ができる(明確に記述されている)ところが一番のメリットだと思います。そんなPythonですが、Anacondaをインストールして、その流れでJupyter Notebookを使って解析する人が多いと思いますが、VScodeを使って解析したほうが良いと考える理由と、実例を上げていこうと思います。 Jupyter Notebook(Anaconda)は開発環境とそのエディタであり、VScodeはエディターであるため、直接的な比較は本来できないのですが、やんわりと流してくださ
はじめに Nginx でロードバランサを構成する Webサーバ1号機の作成 Webサーバ2号機の作成 ロードバランサの作成 ロードバランサとWebサーバの起動 Web アプリケーションの準備 Docker でアプリケーションをビルドする DBサーバの準備 ロードバランサとアプリケーションサーバの起動 まとめ はじめに 前回は Docker のインストールからイメージビルド・コンテナ起動・Compose までの流れをみてきました。 blog1.mammb.com 今回は以下のような、一般的な Web アプリケーションの開発環境を構築していきます。 前回の記事とあわせて、Docker の活用方法を理解いただければと思います。 Nginx でロードバランサを構成する 最初に、単純な Web サーバを Nginx でロードバランシングする環境を作成して動作を見てみます。 このような構成となります。
経済産業省は「ソフトウェア管理に向けたSBOM(Software Bill of Materials)の導入に関する手引」を策定し公開したことを明らかにしました。 SBOMは日本語では「ソフトウェア部品表」とされます。あるソフトウェアがどのようなソフトウェア部品によって構成されているのかを示す情報がまとまったデータのことです。 ほとんどのソフトウェアは単独で成立しているわけではなく、オープンソースを始めとする多数のライブラリやコンポーネントなどのソフトウェア部品に依存しています。そのなかのいずれかに脆弱性が発見されればドミノ倒しのように他のさまざまなソフトウェアに影響することは必至です。 例えば2021年末に発覚したJavaライブラリ「Log4j」の脆弱性は、非常に幅広いJavaのソフトウェアに深刻な影響を与えました。 多くの産業や社会インフラにおいてソフトウェアの存在が欠かせなくなってい
ITジャーナリスト/Publickeyブロガー。IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。 AIスタートアップのCognitionは、自律型のAIソフトウェアエンジニア「Devin」を発表しました。 Devinは人間が課題を与えると、自律的に情報を参照し、コーディングやデバッグ、デプロイを行い、システム構築を実現するAIソフトウェアエンジニアだと説明されています。 Cognition AI CEOのScott Wu氏以下はデモ動画からのキャプチャです。 Devinは人間のソフトウェアエンジニアと同様に、自身のコンソール画面(右上)、コードエディタ(右下)、Webブラウザ(左下)を持っています(左上は人間とチャットでやり取りする領域)。 人間がプロンプトで何らかの課題を与えると、まず課題解決のためのプランを生成します。 今回、Dev
背景 プロジェクトの新規立ち上げや、新しくプロジェクトに新規メンバーが入った場合に環境構築に手間取ることが多いため、Docker+VS Code Remote Containersのフロントエンドアプリケーション開発環境構築ができるリポジトリを作成しました。 本記事では上記リポジトリを用いた環境構築手順とCreate React Appによる簡単なアプリ開発例を説明します。 また、上記リポジトリをgit cloneしなくても一から同じ環境を構築できるように、リポジトリに含まれるファイル群についてもそれぞれ説明します。 本記事の対象はフロントエンドですが、バックエンドのプロジェクト構築も基本的には同じ知識で構築できるはずです。 前提条件 本記事では以下を前提条件とします。ただし、WindowsやLinuxでも基本的には問題ないはずです。 macOS Monterey Visual Studi
新規でRailsプロジェクトを始める時の個人的な環境構築についてまとめる。前提とする条件等は下記。 規模: ~中規模 開発者数: 個人 利用シーン: PoC作成・スタートアップ立ち上げ・並の業務アプリ開発等 基本戦略 利用シーン的に「思い立ったらすぐアプリの開発ができる」という感じの運用がしたい。極力セットアップで悩みたくないから必要なミドルウェアなどは全部Dockerでインストールできるようにして立ち上げれば終わり、の環境を作る。その環境の中で色々とコマンドを叩いたり、rails newやrails gなどでRailsアプリを作成していく。 この辺のRailsの初期セットアップの手間を出来るだけ省きたいのでtemplateとなるリポジトリを作成し、そこからcloneしてくるだけでOKにする。 フロントエンドはReactなどを使わずをRails標準のerbとHotwireを軸に開発する。開
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く