GitとGithubを連携してソースのバージョン管理を行う方法

バージョン管理の必要性

JavaScriptとCSSで、ソースコード貼り付け用ボックスの作成を行いましたが、その時にソースのバージョン管理の必要性を感じました。

少しづつ開発していったので、はてなブログのデザインに登録したJavaScriptとCSSの日別のバックアップ・ファイルを、手で作成していました。また、そこから切り出してテストもしていたので、テスト結果を元ソースに反映するのも手で行っていました。特にテストで、変更してはテストし、戻しては変更してテストするを繰り返していると、どこを変更したのか管理するのが大変でした。

やはり、これらの事はバージョン管理のソフトウェアで行うべきと思い、Gitを導入して使ってみることにしました。Gitの導入から使用までと、Githubとの連携を以下にまとめます。

ソースコードを貼り付けるボックスを非表示にする

ソースコード貼り付け用ボックスの表示について

前回の「ソースコードを貼り付けるボックスを作成 (3)」で、ソースコードを張り付けるボックスの作成ができました。しかし、今までに書いたウェブのページを見てみると、ソースコードを張り付けたために長くなっており、読んでいくためにはスクロールをたくさんしなくてはいけません。

そこで、初期はソースコードのブロックを非表示にしておき、「表示」ボタンを押すことにより表示されるようにしたいと思います。今までのJavaScriptとCSSを基に、ソースコード・ブロックの表示/非表示を作成しました。

ソースコードを貼り付けるボックスを作成 (3)

ソースコード貼り付け用ボックスの課題

前回の「ソースコードを貼り付けるボックスを作成 (2)」で、ソースコードを張り付けるボックスの作成がほぼできました。

残りは次の2つの項目ですが、ちょっと手間取ってしまいました。両方ともCSSの設定に関するものですが、どのようにデバッグして解決したのかをメモリます。

NO.	カスタマイズ項目	修正部分
4	ソースタイプのブロックをソースコードのブロックより少し上に出す (結果的に、出すと別の問題があり出せませんでした)	CSS
5	ソースコードのテキスト部分に枠と背景色がつくのを消す	HTML CSS

ソースコードを貼り付けるボックスを作成 (2)

カスタマイズの項目

前回の「ソースコードを貼り付けるボックスを作成 (1)」の続きです。

ソースコードの貼り付けボックス用に作成したScriptとCSSの内容について、メモります。

ソースコードを貼り付けるボックスを作成 (1)

ソースコード貼り付け用ボックス作成

プログラミングのブログを書こうと思うと、どうしてもブログの中にソースコードを記述する必要が出てきます。しかし、単純に記述したのでは、それがソースコードだということが判りにくくなります。

はてなブログでは、はてな記法モードでソースコードを簡単に張り付けて色付けまでしてくれる機能があるので、それを使うのが一番だとは思います。しかし、見たままモードで編集していたものをはてな記法モードに変更しようとすると、「編集画面をリセットするため、作成中の本文は消去されます。この操作は元に戻せません。」といわれてしまいます。だったら最初からはてな記法モードで編集しろよ、ということではあるのですが。。。(-_-;)

そこで、そのままモードで編集してブログの中にソースコードを記述するために、自分なりのソースコードの貼り付け用ボックスを作ってみました。

JavaScriptの入門書 js-primer 初心者の読み方

JavaScriptの勉強をしています。「開発環境としてVisual Studio Codeを導入しました」でも書いたのですが、Kindle本を読んで勉強していました。

ところが、たまたま初心者のためのJavaScript解説サイトを紹介しているページがあり、「js-primer」を読んでみました。まだ読み切ったところですが、とても良かったです。目から鱗のことがたくさん書かれています。

先ずは内容の紹介と、実際に初心者としてやってみて気が付いたことをまとめようと思います。

開発環境としてVisual Studio Codeを導入しました

基本は大事かなと考え、JavaScriptの勉強を1からしてみることにしました。

早速勉強のために本を読んだところ、プログラムのミスを少なくするためには、開発環境のツールを使用したほうが良いと書かれています。

確かに、メモ帳などのエディターでプログラムを編集していたのですが、一回で稼働したことはありません。スペルミスや大文字小文字の間違いなど、何かしらのミスをしています。

そこで、Visual Studio Codeを導入してみましたので、経緯をまとめておきます。

ブログの目次を表示/非表示にしたらセキュリティに引っ掛かりました

JavaScriptで気づいたこと

 これからJavaScriptを勉強していこうとしていますが、JavaScriptを勉強することはHTMLやCSSを勉強することにもなります。それらを合わせて、いろいろ気づいたことを書いていこうと思います。

初めてのブログ「令和元年おめでとう！」

令和元年おめでとうございます

初めまして、61にして始めてブログを書きます。

また、今日から令和が始まるのに合わせて、今日から書き始めました。

長く続けれるように頑張ります。

お問い合わせ

プライバシーポリシー

こんにちは管理人の hanasakag です。

下記、「プライバシーポリシー」に関して記載致しましたので、ご一読願います。