02 2月 Study – git 基礎まとめ 【clone~プロジェクト編集~push】

gitの勉強会を受けての復習と、今後の開発でgitをマストで使っていくため簡単にまとめてみました。 基礎的な部分のみ、clone~プロジェクト編集~pushまでの一連の流れになります。 前提 ・環境はwindows ・gitコマンドをコマンドプロンプトで受け付けるようにしています。・勉強会ではGitLabを使用していましたが、次の開発がGitHub予定のためGitHubを使用 ・エディターはvscodeを使っています(編集ファイルはHTMLファイルのみ) 1. clone まずは新しく開発に参画した際を想定して、プロジェクトをGitHubから持ってくるところから GitHubのプロジェクトページにある右上緑のCodeにURLがあるのでコピー ターミナルを開いて、今回のプロジェクトを保存したいディレクトリまで移動するか(cdコマンド)、エクスプローラーでプロジェクトを置きたいフォルダでcmdを開く (今回はgit_testというディレクトリを選択しています。) コマンドプロンプトに次のコマンドを入力します。 git clone <URL> cloneすると、フォルダにプロジェクトが入ります。 VScodeでこのフォルダを開いてみるとプロジェクトが無事ローカルにインポートされていて、編集できるのが確認できます。 2. branch またターミナルに戻り、プロジェクトファイルのディレクトリに移動しますcd TestCode 編集する前に、developという名前でブランチを切っておきます git branch develop 次のコードでbranchの状態を確認します git branch 今現在のbranchを示しているのは*で表示されています。 先ほどのコードはdevelopというブランチを作って確認しただけですので、ブランチを切り替える必要があります では、以下のコードを打ってみましょうgit checkout develop このように表示されていれば切り替わっています。 念のために git branch での確認でも、切り替わっているのがわかります 3. ファイル編集 それではHTMLファイルを編集してみます 先ほどのHTMLファイルの10行目にテキストを追加しました。 編集が終わったら、git statusで確認してみます。 赤く表示されているのが差分のあるファイルです。 4. add それではtest.htmlをステージングエリアに追加してみましょう git add test.html (すべてのファイルをaddする場合は、git add . ) git statusで確認すると緑色に変わりました。 5. commit 次はcommitします git commit -m "コメント" " "←この部分はコメントを入れられます。必ずいつ何を編集したかなど、コメントを入れるようにしましょう 今回は日付と編集内容をコメントに入れました 6. merge それでは次にプロジェクトの統合をするためmergeしていきますまずはブランチをmasterへ切り替えます git checkout master 念のために切り替わったことを確認 masterが緑色に マージしますgit merge develop 7. push それでは、リモートリポジトリにプッシュしていきます git push origin master ちなみにこのmasterというのはリモートレポジトリのmasterブランチを指しています 実際の現場では、どのブランチにpushするのか指示に従う必要があります ※もしここで自分が持っているプロジェクト(cloneやpullした状態)とGitHubに上がっているプロジェクトに差分があった場合はエラーとなります(競合)一度、GitHubから最新の状態のプロジェクトを自分のローカルレポジトリにpullしますgit pull origin <ブランチ名> 開発は他の人と同時にしているはずですので、実際は競合することの方が多いと思います。 pushのコマンドを実行すると以下のように GitHubのプロジェクトページを更新してみると、次のように編集したファイルが確認できると思います commitの際に自身が入れたコメントも一緒に確認できます htmlをクリックしてみましょうテキストが追加された状態のHTMLが表示されています。 最後に、最新の状態をpullして再度作業に取り掛かるための準備をします まずは自身の作業していたブランチを削除しますgit branch -d develop そしてプルしますgit pull origin master 再度2.branchから始めて、ブランチを切っていくところから進めていきます 基本的にはこの繰り返しになります。 最後に 省略してしまいましたが、どの開発現場においてもpushしてGitHubにプロジェクトを上げる際に、プルリクエストをするのが基本です(というよりこのリクエストをプロジェクト責任者に承認してもらわないと、マージされない) また、cloneやpullをするファイルも、プロジェクトファイル全部を持ってくるのではなく、設定ファイル等はそのままに指定されたファイルのみclone、pullするケースが多いかと思います。 このあたりのルールは開発現場によって異なると思いますので要確認です。 【git勉強会レポートはこちら】 ...

Read More

25 12月 Works – 大手住宅メーカー様 キャンペーンサイト制作

WORKS:大手住宅メーカー様 キャンペーンサイト製作 日時:2022/12/25ご依頼内容:キャンペーンサイトの製作使用言語:HTML、CSS使用ツール:VSCode,Nginx 【概要】 ■LP(ランディングページ)の制作を行いました。 大手住宅メーカー様のキャンペーンに伴い、特設ページを作成。製品紹介や製品へのリンク、キャンペーンへの応募方法を記載したページです。 【内容】 ■設計書に基づいて制作 ・文字サイズや行間、要素(画像等)の間隔などを設計書に基づき製作 ・100ページ以上に渡るコーディング規約を熟読し、規約に沿うように製作・googleアナリティクスのタグの埋め込み・OGPのタグ埋め込み ■レスポンシブ対応 ・画像やアイコンは提供していただいたものを使用。PC表示用とスマホ表示用を提供していただきました。・メディアクエリを使用して、CSSの振り分けをしました。 ...

Read More

30 9月 Works – 大手食品メーカー様 アンケートサイト制作

クライゼルを使用した開発(ページ製作)HTML CSS JavaScript キャンペーン応募ページ製作 実績紹介 機能: ■アンケートページ ・設計書を基づきチェックボックス、セレクトボックス、テキストボックスを用いたアンケートページの製作 ・必須項目、文字に関するバリデーション機能をクライゼルの機能にて設定いたしました。 ・セレクトボックス内のテキストカラーが初期値と選択後で切り替わるようCSSとJavaScriptにて設定いたしました ・必須項目の入力後は完了ボタンがアクティブになり、ボタンの色が変わるよう,CSSとJavaScriptにて実装いたしました。...

Read More