• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア

You are here: Home / Archives for Windows

Windows

Windowsで2つのファイルの差分を確認するには?WinMergeの使い方を紹介!

2020-04-18 By プログラミング入門ナビ編集部

書類を読む女性

はじめに

パソコンの前で頭を抱える男性

プログラミング学習をしていると、バグの原因究明に四苦八苦すること、ありますよね。

サンプルコードの通りに記述しているのに、なぜか想定通りに動かない。

実行時にエラー文が出るタイプのバグならまだ確認しやすいですが、特にHTML等で想定と違う挙動をしている場合は何のエラー文も出てこず悩むことも多いですね。

そんな時は、サンプルコードと自分の書いたコードでどの部分が違っているのか、差分(diff)を確認してみましょう。

この記事では、Windows環境でのファイル差分確認方法を紹介します。

ファイルの差分(diff)とは?

書類を比較する女性

2つのファイル間で異なる部分のことを差分といい、「違い」を意味する英単語「difference」から「diff」(読み:ディフ)とも呼びます。

特にプログラミングの業界ではファイル間の違いを見るために「これとこれのdiff取ってみて」などと指示されることも多いです。

冒頭で取り上げたバグの原因究明のケース以外にも、ソースコードの更新をした際に更新前後でどの部分が変わったのか把握する目的でも行われます。

WinMergeのインストール方法

Windows環境で使用できる差分確認ツールとしては、WinMergeがポピュラーです。無料で使用でき、UIも優れていて差分がとても見やすいことから大変人気があります。

インストーラをダウンロード

まず、WinMergeのサイトからインストーラをダウンロードします。

いくつかのインストーラが用意されていますが、一番上の「WinMerge-X.X.X-Setup.exe」を選ぶと良いでしょう。X.X.Xには最新バージョンの数字が入ります。

クリックすると実行するか保存するかを聞かれますが、念のため保存しておきましょう。

インストーラを実行

インストーラをダウンロードできたらダブルクリックします。

インストール場所やコンポーネントの選択がありますが、特にこだわりがなければ全てデフォルト通りのまま「次へ」をクリックしていき、最後の「インストール」を押せば完了です。

WinMergeの使用方法

ここからは、実際のバグ取り例に沿ってWinMergeの使用方法を見ていきましょう。

HTML+CSSでのケース例

ここでは、オンライン講座「Web開発入門完全攻略コース」のサポート記事を例として取り上げます。

「Web開発入門完全攻略コース」サポートサイト

HTMLとCSSをサンプルコードの通りにコーディングすると、本来は下記のような実行結果となるはずです。

正しい実行結果

実行結果が想定と違う場合は差分を取ってみよう

ところが、このようにナビゲーション部分が横に広がらず縦に並んでしまったとしましょう。

間違いの実行結果

様々な原因が考えられますが、例えば該当箇所でのfloatがうまくできていない可能性が思い浮かびますね。

しかし、base.cssのソースコードを見てみてもそこはきちんとfloat: leftの指定ができているようです。

これならばnav要素は全て左から順に横並びになると想定されます。

header nav ul li {
  float: left;
  width: 155px;
  margin-right: 2px;
  text-align: center;
}

このように原因の予想が外れてしまうと、どこに間違いがあるのかソースコードを頭から一通り睨むことになり一苦労ですね。こんな時こそ差分ツールの出番です。

まずはHTMLファイルを比較してみましょう。WinMergeを起動し、フォルダのアイコンをクリックします。

WinMerge起動画面

比較したいファイルを3つまで入力することが可能です。ここでは、まず比較したい2つのHTMLファイル(サンプルコード・自分のコード)を選択してください。

WinMergeのファイル選択画面

「検証」をクリックすると、2ファイル間で差分がない場合はこのような画面になります。どうやらHTMLファイルには問題ないようですね。

WinMerge(差分なし)の検証結果画面

次にCSSファイルを比較してみましょう。先ほどと同様に比較したい2つのCSSファイルを指定し検証をクリックするとこのような画面となりました。

WinMerge(差分あり)の検証結果画面

差分がある場合は、左側の「ロケーションペイン」の部分に差分の箇所がオレンジ色で提示されます。その部分までソースコードをスクロールすると、「header nav ul」要素でのwidth指定値に差分があることがわかりました。

サンプルコードは940pxなのに対し、今回書いたコードでは94pxになってしまっていますね。floatが効いていなかったのでなく、幅が足りなかったために縦並びになっていたようです。

このように、素早く簡単に問題の箇所を見つけることができました!

まとめ

オフィスで働く女性

Windows環境でファイルの差分を確認する方法を紹介しました。特にHTMLでは想定通りの実行結果にならなかった時、何が問題なのか見つけにくいことが多いです。

この方法を使えばどこが間違っているのかスムーズに確認することができますね。

バグ取り以外にも便利な使い道がたくさんあるので、ぜひ使ってみてください。

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: diff, Windows, プログラミング入門

スクリーンショットを撮る方法(Snipping Tool-Windows8)

2020-04-03 By プログラミング入門ナビ編集部

スクリーンショットとは

スクリーンショットはブラウザの画面を写した画像のことです。
自分の現在見ているサイトの情報、ブラウザの状態など自分の視覚的情報を画像に残すことができる非常に便利な機能です。
幅広く使える機能なのでこの記事でやり方をマスターし日常生活などに幅広く活用しましょう。

スクリーンショットの撮りかた(Snipping Tool使用)

この記事ではWindows8の標準機能となっているSnipping Toolを使ってスクリーンショットを撮ります。(Windows10ユーザの方は画面領域切り取り機能でも撮ることができます。)

Snipping Toolとは?

Snipping Toolは画面内の自由な範囲をスクリーンショットとして保存するWindowsの機能です。
自分のパソコン上に映っている情報を相手にわかりやすく伝える為に非常に優れたツールです。
地図などを撮り相手に情報を共有する際や覚えておきたい情報、残しておきたい情報をイメージとして保存しておく場合にも使えます。

Snipping Toolの使い方

Snipping Toolの起動

「スタート」=>「全てのプログラム」=>「Snipping Tool」で起動します。

Snipping Toolが起動すると次のようなウィンドウが表示されます。

切り取り領域の設定

このボタンで切り取り領域を選択できます。
   
切り取り領域は以下の4つがあります。
① 自由形式(マウスで自由にドラッグした部分を切り取ります。)
② 四角形(四角形で囲んだ範囲を切り取ります。)
③ ウィンドウ領域(ウィンドウ内を切り取ります。)
④ 全画面領域(画面の全てを切り取ります。)

切り取り

実際に画面範囲を選択しスクリーンショットを撮ります。(ここでは四角形に領域を設定し切り取ります。)


領域の設定をしたらSnipping Toolのロゴをクリックしましょう。すると画面の色が変わります。



次に範囲を選択肢します。




保存・編集

選択した領域を切り取るとクリップボードにコピーされます。(※この時点では保存されていません)
下の画面に移るので任意の処理をした後②のボタンで必ず保存しましょう。



① 撮り直したい場合はもう一度ロゴのマークを押しましょう。
② 名前をつけて任意の場所にファイルとして保存できます。(その際にファイル形式も選択できます。)
③ メールでスクリーンショットを送ることができます。
④ ペンを使って画像に印をつけるなど編集が行えます。

以上がSnipping Toolでスクリーンショットを撮る方法でした。保存したファイルを選択しチャットやメールに貼るなどしてぜひ活用してください。

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: Windows, スクリーンショット

Windows10で隠しファイルと隠しフォルダを表示する方法

2018-04-14 By プログラミング入門ナビ編集部

Windows10で隠しファイル及び隠しフォルダを表示する方法について、プログラミング初心者向けに説明いたします。

隠しファイル、隠しフォルダとは

Windowsの初期設定では、ユーザーから見えないように設定されている、ファイルやフォルダがあります。
これを、隠しファイル、隠しフォルダと呼びます。
システムに関わる重要なファイルやフォルダを、一般ユーザーが間違って消したり、編集してしまわないようにするための設定です。

なぜ、隠しファイルと隠しフォルダを表示するの?

ソフトウェアの開発を上で、隠しファイルやフォルダを編集する必要がある場合があるためです。

例えば、データベースシステムのMySQLの設定ファイルは、下記のファイルパスに配置されていますが、

C:\ProgramData\MySQL\MySQL Server 5.7\my.ini

ProgramDataフォルダは隠しファイルとなっているため、初期設定ではエクスプローラーに表示されません。
これでは、MySQL設定ファイルmy.iniを編集することができません。

関連記事

オンライン講座「はじめてのSQL・データ分析入門」リリースのお知らせ

設定方法

Windows10で隠しファイル(と隠しフォルダ)を、表示する用に設定する手順を説明します。

「エクスプローラー」を開く

「表示」タブをクリック

「隠しファイル」にチェックを入れる

チェックボックス「隠しファイル」にチェックを入れます。
これで、隠しファイル、隠しフォルダがエクスプロラーで表示されるようになりました。

隠しファイル表示OFF

隠しファイル表示ON

矢印で示したフォルダが、隠しファイル(フォルダ)です。
アイコンが少し薄く表示されています。

注意事項

隠しファイルや隠しフォルダになっているファイルは、重要なファイルであることが多いです。
削除や編集を行う時は、十分注意して操作しましょう。

おわりに

この記事では、Windows10で隠しファイル及び隠しフォルダを表示する方法について説明しました。

「Webエンジニア入門総合コース」では、この記事で説明したCSSの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって説明しています。

動画は文字情報の5,000倍と言われることもあります。動画で学習すると、手順が目に見えて理解できるので、学習がはかどりますよ。

264レクチャー・18時間の大型コースとなっています。 内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください!

関連リンク

Webエンジニア入門総合コース

動画で学ぶプログラミング入門


オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: ツールの使い方 Tagged With: Windows

  • Go to page 1
  • Go to page 2
  • Go to Next Page »

Primary Sidebar

Twitter

Follow @programmingnavi Tweets by programmingnavi

Facebookページ

プログラミング入門ナビ

メルマガに今すぐ登録!

ブログの更新情報やお得なクーポン情報などをお知らせします。

登録はこちらから。

人気の記事

まだデータがありません。

最近の投稿

  • 【7/9更新】Udemyプログラミング入門講座等の割引クーポン配布
  • JavaScriptの「this」は呼び出し方によって値が変わる?違いを徹底解説!
  • JavaScriptのfor文で配列要素の足し算をするとNaNが出るのはなぜ?原因と対処法を解説!
  • プログラミング学習を成功させるポイントを3つお送りいたします
  • 初心者がスマホアプリを開発するには?iOSとAndroidの両方について必要なスキルを確認しよう

カテゴリー

  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript Linux macOS MySQL MySQL Workbench node.js Nuxt.js Proglus Python Ruby Ruby on Rails SQL Udemy Vue.js Web開発 Windows Windows10 エラー エンジニア オンライン学習 サーバ サーバー スクリーンショット セキュリティ セール データベース プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 未経験 機械学習 開発環境構築

アーカイブ

  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2023 · programmingnavi.com ・About・プライバシーポリシー