知識の枝

"All is well"

devChallengesで課題をSubmitしてみよう

約245日前 2021年3月26日17:02
デジタル
devchallenges

改訂履歴


2021/3/26 投稿

1. はじめに


以前ご紹介したdevChallenges

Dev Challengesでスキルアップ

各課題の取り組み内容の詳細については個別の記事で解説してきました。
- 404 Not Foundページを作る
- My team pageを作る
- Interior Consultantページを作る
- Recipe pageを作る

実はdevChallengesには、自分が作成した成果物(Solutions)を提出(Submit)し、様々な人からレビューを貰える機能があります。
(というかこれが本来のやり方です)

上記のように私もいくつかの課題に挑戦してきましたが、devChallenges上には提出していませんでした。
特に提出する理由も無かったので。

ではなぜ突然submitの記事を書き始めたのか??

ふと、久々にdevChallengesにアクセスしDashboardを開いてみたところ、挑戦した課題たちが「進行中(Ongoing)」になっていることに気が付きました。
終わっているのに進行中と書かれているのも嫌なので、課題を提出してクローズさせることにしました。



提出までの流れが若干面倒だったので、そのやり方を簡単に記事にしたいと思います。



(余談)

過去記事のリンクからdevChallengesに飛ぶと404エラーが返ってきます。



左上の「Home」を押せば挑戦課題を選ぶ画面に移動します。




2. ゴール


devChallengesに課題を提出(Submit)し、完了の区切りをつける。


3. 提出する前に(Github)


devChallengesで課題に挑戦したり提出する際には「Github」アカウントでログインする必要があります。
右上の Login with Github からログイン可能です。



ログインすると Submit Solution というボタンが表示されます。
(まだ挑戦していない課題の場合は Start and download と表示されます)



4. 提出(Submit)


では早速 Submit ボタンをクリックしてみましょう。

こんな画面が表示されると思います。



提出するためには4項目のフィールドを埋める必要があります。

4.1 - Titleの入力


提出物にタイトルを付けます。
挑戦課題の名前でも良いですし、自分でタイトルを付けてもよいです。

Title 例:404 Not Fount page

4.2 - Descriptionの入力


ここには説明文を載せます。
課題に挑戦するにあたってどんな技を使ったか、どんなことを学べたか。
書くのが面倒であればスペースキー1個でOKです。

4.3 - Demo URLの入力


デモページのURLをここに貼ります。

デモページとは自分で作った成果物をウェブ上で見れる状態にしたものを指します。
devChallenges上では live app と呼ばれています。

こんな感じです 404_not_found


※アップロードするプラットフォームが無い方は下記を参考にしましょう。
(devChallenges推奨の無料ホスティングプラットフォームです)

5 Free Hosting Platform

4.4 - Repository URLの入力


リポジトリ(Repository)とは成果物のデータファイルを保管している場所のことです。
簡単にイメージするならパソコンのフォルダですね。

データファイルとは「.html」ファイルであったり、「.css」ファイルなど成果物を構成している材料を指します。

リポジトリはGithub上に作成することができ、そのURLをここに記入することになります。

自分のGithubページに行き、「Repositories」タブから「New」を選択してリポジトリを新規作成します。



リポジトリを新しく作る画面に移動しますので、
Repository name の箇所に好きな名前を付けましょう。
(フォルダに名前を付けるようなものです)



特にその他の部分は変更する必要ありません。
リポジトリ名を入力したら Create repository をクリックし、リポジトリを作成しましょう。

表示されたページがあなたのリポジトリです。



まだ何も入っていませんので、ここにデータファイルをアップロードしましょう。

アップロードには「Git」というソフトを使用します。
インストールされてない方は下記を参考に導入下さい。
インストール作業 - Git

Git CMDを起動し、データファイルが保存されている自分のパソコンのフォルダにcdします。
(cd:チェンジディレクトリ)

C:\Users> cd フォルダまでのパス #例 C:\Users\yourname\devchallenges\404_not_found
C:\Users\yourname\devchallenges\404_not_found> #入力待機


対象のフォルダにcdしたら、
Githubのリポジトリに書いてある通りに上から順番にコマンドを実行します。
少し変える箇所があります。下記コマンドを参考にして下さい)



C:\~\404_not_found> git init   #最初に実行
C:\~\404_not_found> git add --all . #ここは変更しています。最後のピリオドを忘れないように
C:\~\404_not_found> git commit -m "コメント入力" #例えば"Solution for devChallenges"とか
C:\~\404_not_found> git branch -M main #ここはそのまま
C:\~\404_not_found> git remote add origin URL #URL部分は各人で異なります
C:\~\404_not_found> git push -u origin main #これで最後です


Githubのリポジトリページを再読み込み(F5)してみて下さい。



データファイルがリポジトリにアップロードされていると思います。
このリポジトリのURLをコピーし、devChallengesのSubmitページに入力しましょう。

こんな感じになっていると思います。



Submit ボタンを押して提出しましょう!
提出に成功すると Submitted Successfully と表示されます。



これで提出完了です。


5. さいごに


参考に私のリポジトリへのリンクを貼ります。

Githubのリポジトリ

リポジトリにデータをアップロードする際に「README.md」というファイルを一緒にあげると、
リポジトリページにちょっとした説明を付けることができます。




提出完了後にdevChallengesのダッシュボードを確認すると、
Solutions の部分に提出した課題が表示されます。


この調子で成果物をどんどん提出しましょう!