【VSCode】オススメの拡張機能と設定 - Qiita
{ "editor.formatOnSave": false, "editor.formatOnPaste": false, "editor.formatOnType": false, } この記事で紹介している拡張機能のIDは、記事の最後にまとめています。また、設定の方法については設定のやり方に記述しています。 以下は、この記事で紹介する拡張機能のカテゴリ一覧です。 設定ファイル関連(Yaml, Json, Toml) Git関連 Markdown関連 カラー系 API関連 コンテナ その他便利な拡張機能 ネタ系 設定ファイル関連(Yaml, Json, Toml) 特にYamlやJsonはどのプロジェクトでも使用する可能性が高いので、必須の拡張機能となってくるかと思います。 Prettier esbenp.prettier-vscode jsonだけの設定では、VSCodeの設定ファイ
【日々更新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）
Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
Web系エンジニアなら知っておきたいツール5選。ハマりポイントも解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はいさーい！ 2021年11月にジョインしたうーまーです。沖縄からフルリモートでバックエンドとフロントエンドのお仕事をさせてもらってます。 入社直後って、先輩たちの顔を覚えたり社内文化にとまどったり、まっさらなマシンを受け取って初期設定したりと割と大変ですよね。特にマシンの設定なんて、一度してしまったらなかなか変更することないので、基本的なことを忘れてしまってたりしますよね。 ということで、転職したての僕がLIGに入って最初つまづいた事例を交えながら、転職前に押さえておきたいツール5選を紹介したいと思います。 Web系エンジニアが使うツールの話なので、転職希望者だけでなく、就職・組織で働くのが初めてって方にも刺さる内容になっています。 1.コマンドプロンプト（ターミナル） windowsで言うコマンドプロンプト、macだとターミナル。いわゆる黒い画面。 少し前（と言っても10年くらい）まで
～ローカルからサーバーへ～：簡単にできる公開方法を調べてみた - Qiita
はじめに この記事では、詳しい公開方法については記載はしません。 実際に、公開するための様々な方法についてご紹介します。 ①heroku herokuとは、 「PaaS」と呼ばれるwebサービスを公開するのに必要な環境を提供してくれるサービスです。 herokuへ「デプロイ」とよく言われますが、 これは、 herokuという場所にサービスを置いてくる というイメージです。 herokuは基本的には、無料で使えます。 ただ、重いサービスだとwebの挙動が遅くなってしまうこともあります。 その場合は課金を。（課金する場合は800円程度） 詳しいことは下の記事を参考に。 herokuの使い方までわかりやすく書かれています。 【参考】：【HEROKUとは】これを読めばOK!デプロイの仕方まで徹底解説 ②Netlify 静的なWEBサイトのホスティングサービスです。 ホスティングとは、つまりサーバー
Gitでよく使用するコマンドをGIFアニメで解説
Gitでよく使用するコマンドが何を行っているかをGIFアニメで解説した記事を紹介します。 Gitのマージ、リベース、リセット、チェリーピック、フェッチ、プル、リフログなど、コマンドを実行した時にブランチはどのように相互作用し、履歴にどのような影響を与えるのか視覚的に学べます。 🌳🚀 CS Visualized: Useful Git Commands by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Gitのマージ（fast-forward, no-fast-forward） Gitのリベース（rebase） Gitのリセット（reset, revert） Gitのチェリーピック（cherry-pick） Gitのフェッチ（fetch） Gitのプル（pull） Gitのリフログ（re
Gitに慣れていない人がよくハマるパターンと対処法まとめ - Qiita
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら はじめに Gitって難しいですよね。本当に！ プログラミング歴1年弱の自分がチーム開発に加わる様になってに一番不安なのはGitの扱いです。 ミスにビクビクしながら、日々を過ごしています。 そんな僕が、初学者向けに現場でうま〜く立ち回れる様に、Gitに慣れていない人がよくハマるパターンと対処法をまとめました。参考になれば幸いです。 作業ブランチ間違えて作業しちゃった！！パターン これは僕が一番やっちゃうやつです！ 作業している途中や、git statusしている辺りでブランチを間違えていた事に気がつきます！ 対処法 1 git stash -u 一旦、作業していた分を退避する 2 git switch 正しいブランチ名 正しいブランチに切り替える 3 git stash pop 退避していた分を正しいブランチ
バージョン管理ツールのGitでよく使用するコマンドを1ページにまとめた便利なチートシート -GitSheet
GitSheet Gitでよく使用するコマンドをまとめたチートシートは、こちら。 サイトでは「Copy」ボタンをクリックすると、コマンドがコピーできます。 GitSheet チートシートの作成者に許諾を頂いたので、各説明を意訳しました。 Gitのブランチ操作 git branch すべてのローカルブランチを一覧表示します。 git branch -a リモートおよびローカルブランチを一覧表示します。 git checkout -b branch_name ローカルブランチを作成し、切り替えます。 git checkout branch_name 既存のブランチに切り替えます。 git push origin branch_name ブランチをリモートにプッシュします。 git branch -m new_name 現在のブランチの名前を変更します。 git branch -d branch
知らないと確実に損する！Web開発を効率化する最強のサービス8選をまとめてみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Web開発を効率化したり便利にしたりしてくれるWebサービスを厳選してご紹介しようと思います。 プログラミング系、グラフ・チャート系、画像系、サイト構築系、分析・ログ系…など、幅広いジャンルから今すぐ活用できるサービスをまとめているので、ご興味ある方はぜひ参考にしてみてください！ ■GitHubのサイトから高機能なオンラインIDEを起動できるサービス！ 【 Gitpod 】 GitHubのリポジトリページから本格的な統合開発エディタを起動させて、ブラウザ上からプログラミングできるサービスが「Gitpod」です。 IDEにはターミナルも搭載されているので、コマンドの実行やGitの制御なども行えるうえGitHubのコードレビューにも対応しています。 使い方は簡単で、GitHubのリポジトリURLの前に「gitpod.io#」を付与するだけで
バージョン管理システム「Git」の使い方はどのように教えるのが良いのか？
GitはLinuxの生みの親であるリーナス・トーバルズによって開発されたバージョン管理のツールで、数々のバージョン管理システムのなかで最も有名なものとなっています。しかし、Gitの考え方の中には初めて利用するという人にとっては分かりにくいものも存在します。エンジニアのレイチェル・M・カルメナさんが、Gitの基本的な概念について図を用いてまとめています。 How to teach Git | Rachel M. Carmena https://rachelcarmena.github.io/2018/12/12/how-to-teach-git.html カルメナさんが解説を書こうと思ったのはGitを使い始めた同僚のモニターに下の画像のようなポストイットが貼られていたことがきっかけだそうです。ポストイットには「add」「commit」「push」のコマンドが書かれていますが、その同僚は3つの
フロントエンドのビルドも『Laravel』におまかせ！スゴ腕API「Laravel mix」を使いこなそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんちには、ディレクターのエリカです。 Laravelを利用するときに、フロントエンド側ってどうしてますか？ 今回は、何かと便利なLaravel同梱API「Laravel mix」についてご紹介します。 「Laravel mix」とは？ Laravelの公式ドキュメントには、「多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPI」と紹介されてます。 つまり、sassを利用したcssの記述や、分割されたjavascriptファイルの統合およびトランスパイルなど、フロントエンドのサイト作成業務で主に利用するタスクがLaravelに最適化されたものです。昨今、とくにフロントエンドにおいては多種多様なアプローチがある中で、どのツールを選択したらいいか悩んでいる……そんなとき「Laravel m
バージョン管理ツール「Git」は一体どういうものなのか？
「バージョン管理ツールのGitとは一体どういうものであるのか？」について簡単にまとめてみました。今回はGitの概念や考え方についてを中心にまとめており、「Gitが何なのかよく分からない」「実際のコードに触れてみたもののよく分からず使うのをやめてしまった……」といった人向けに記事を作成しています。 Git https://git-scm.com/ バージョン管理とは、要するに「ある時点でファイルを別に保存しておく」ということです。別のファイルに保存しておけば、またそこからやり直すことができます。これを直感的に行うと下図のような「手動ファイル名バージョニング」になりがちです。ただし、この「手動ファイル名バージョニング」は命名する時の思いつきで決めることが多く、後で見た時に「どれが本当の最新ファイルなのか分からない」となりがちなのが問題です。 これに対する一つの解決策が「プロジェクトフォルダに『
Gitの脱GUIをめざす！CUIで見やすく、サクサク操作の「tigコマンド」を使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
おはこんばんちは、16新卒で入社した29歳ハルです。 数ヶ月前まで専門学校にいたアラサーです。恥ずかしいことに、Gitを本格的に使い始めたのは働き始めてからです。 これまで綺麗なGUI画面のSourceTreeで操作していましたが、これからはエンジニアとして黒い画面でGitコマンドを使い、サクサク作業をしたいと思っています。 ただ、いきなりGitコマンドだけでは心細いので、Gitブラウザのtigコマンドを使うことにしました。今回は、そのtigコマンドについて紹介したいと思います。 tigとは 一言で言うと、Gitコマンドだけではわかりづらい状態などを、見やすくビジュアル化してくれるCUIのGitブラウザです。CUIなので、サーバーでも使えるのがいいところです。 ツリー構造を見やすく表示してくれる。 ツリー構造から差分を表示できる。 add や commit ができる。 ブランチの確認と詳細
Macとさくらのサーバでの開発作業をGitで管理する
開発環境 Mac OS X 10.10.3（LAMP環境） さくら（スタンダード・プラン） ※Mac、さくら共にGit環境は既にインストール済み。 Mac（ローカル環境）で作成したファイルを、さくらのサーバへとアップロードしていく流れをGitで管理する。プロジェクトに関するディレクトリは全て新規に作成するものとする。 大まかな手順 1.さくらのサーバに中央リポジトリを作成する。 2.Macのローカル環境に中央リポジトリを複製（clone）する。 3.さくらのサーバ側にも（中央リポジトリとは別の）リポジトリを複製する。 4.Mac側でsample.htmlを作成したら、中央リポジトリに記録し全てのリポジトリにてデータを共有できるようにする。 さくらサーバに中央リポジトリを作成する まずさくらサーバにsshでログインし、適当な場所（今回は~/以下、つまりhome/ユーザ名/以下）にsample
すぐ忘れる！SourceTreeを使ったリベースとスカッシュの手順 - Qiita
Git操作をGUIで行えるSourceTreeは、私にとって今では無くてはならない存在です。 コレのお陰で、ターミナル恐怖症のデザイナーさんにもGitでファイルの変更を管理してもらえるようになって、デザイナーさんとの連携がとても楽になりました。 もう、これなしでは開発したくないと思えるほど便利です。 でもSourceTreeのいくつかの機能はお世辞にも直感的とは言えず、間違った操作を誘発する危険性をはらんでいます。私もハマって結構大変な目に会いました。 私が、そして私のような方が同じ過ちをおかさないように、ここにハマりそうなSourceTree操作を記録しておきます。 リベース手順 例えば、developブランチから分岐したfeature/hogeブランチで作業している途中で、他の開発者のコミットがdevelopブランチにマージされた場合、後々大きなコンフリクトが発生するのが怖いので、早め
Git入門（５）〜ブランチとマージそしてコンフリクト | IT工房｜AI入門とWeb開発
今回の内容で特にマージをした時にコンフリクトを起こしてしまう状況を考えてみます。 Git初心者で実務でコンフリクトを起こすと焦ってしまうに違いありません。日頃からGitを使い倒しておくと焦ることはないでしょう。 ココは何度も失敗をしてこれはやっちゃダメとかいうことを身をもって学習することです。 ブランチとは枝という意味があります。その名前のとおり複数の作業を枝分かれする時に使います。 具体的には、同時に複数の作業を行う場合などにブランチを使います。 ここでは参考例として「task-A」と「task-B」２つのブランチを作成します。 新規にブランチを作成するにはブランチボタンをクリックします。「新規ブランチ」項目に任意の新しいブランチの名前を記入します。「新規ブランチをチェックアウト」にチェックが入っていると、ブランチ作成と同時そのブランチがチェックアウト（選択された）状態になります。 今回
Gitを最大限に活用できる「Git flow」で、効率よく開発を進めよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まずは、ソースツリーを起動し、任意のリポジトリを開いてください。 今回は、GitHubでテスト用のリポジトリを作りました。作ったばかりなので、データはREADME.mdのみ、ブランチはmasterのみの状態です。 次に、メニューにある「Repository」から、「Git flow/ Hg flow」→「Initialize Repository」を選択します。 こちらの「Repository」→「Git flow/ Hg flow」は、ショートカットキー「command + alt + F」で実行できます。 すると、下記のようなウィンドウが表示されます。 ここではGit flowで使うブランチの名前を設定できますが、特殊な理由がなければここはデフォルトのまま、OKを押しましょう。とくにエラーもなく無事にウィンドウが閉じられれば、成功です。 また、リポジトリに「develop」ブランチがな
実践でわかる！ブランチとコンフリクト、リバートを解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 気付けば、フロントエンド入門Git編の連載も5回目。前回は、ローカルで作業中のコミットを綺麗にまとめたり、間違った操作をしてしまったときにコミットログを修正したりする方法を紹介しました。 今回は、Gitを使う上で重要な「ブランチ」について解説したいと思います。 ブランチとは？ ブランチは、コミットの歴史を分岐して記録していくためのものです。 歴史を分岐させることで、他のメンバーの作業の影響を受けることなく、同じリポジトリ上で複数の開発を同時に進めていくことができます。 分岐したブランチはマージもしくはリベースというコマンドで、他のブランチに合流させることができます。 これを繰り返すことで開発を進めていきます。作業単位ごとにブランチを作ることで、なにかしらの問題があった場合に原因となる箇所の調査が楽になります。なるべく細かい単位でブランチを
Gitのリセットを使いこなして、間違いを修正しよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ！はやちですよ！٩( ᐛ )و フロントエンド入門のGit連載をご覧になってるみなさま、Gitはご利用なられましたでしょうか( ˇωˇ ） Git使い始めは、誰にでも間違いはつきもの。はやちもテンパってしまう癖があるので、ちょいちょいやらかしてしまうことがあります( ˇωˇ ) 今回はそんなときに役立つ、Gitで間違えて操作してしまったときの対処法をまとめました。sourcetreeベースでご紹介をいたします( ˇωˇ ) 間違いを修正する「リセット」 リセットは、ファイルを以前の状態に巻き戻すことで、ステージ上でもローカル上でも操作できます。 例えば、 ステージ上で更新を加えていたファイルを途中で操作する前に戻したいとき ローカル上で、コミットのコメントを間違えてしまったとき 一旦戻して追加修正したいとき もうこのコミットもろともなかったことにしてしまいたいとき などのシーン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - WebdevShefali/CheatSheets
【イラストで覚える】初心者のためのGitとGitHub用語集 | ずくろぐ
