ProgLearn

【Qiita】コードレビューを送り合うSNS, ProgLearnをひとり開発してみた【ひとり開発 Advent Calendar】

この記事はひとり開発 Advent Calendar 2019の14日目の記事です。

昨日はyakipuddingさんによるFirebase×Reactでプログラミングお題サイトをつくった話でした!今回私が開発したサイトもyakipuddingさんのサービスと親和性がありそうだなー、と思いながら読ませていただきました。こちらも要チェックです♪


こんにちは。どんぶラッコです。普段はNuxt.jsとLaravelを使って開発をしています。

今回はひとり開発 Advent Calendar ということで、8月にアルファ版を出したコードレビューSNS ProgLearn を取り上げたいと思います!

まだまだ開発途上ですが、暖かい目で見ていただけると幸いです。

コードレビューサイト “ProgLearn” とは?

サイトURL

https://proglearn.com

サービス概要

image.png


作成したプログラミングコードを投稿すると、そのコードに対してアドバイスをもらえるプラットフォームです。

image.png

自分が作ったプログラミングコードを投稿したり、コードレビューをしたりしてみよう!!

ProgLearnの使い方

  1. 会員登録をする
  2. ログインをする
  3. 投稿する
  4. コードレビューをする

1. 会員登録

https://proglearn.com にアクセスします。

image.png

画面右上の 新規登録 / ログイン ボタンをクリックしてください。

image.png

メールアドレスで登録 をクリックします。

image.png

フォームが表示されるので、必要事項を入力して新規登録する ボタンをクリックします。

2. ログインする

image.png

画面右上の 新規登録 / ログイン ボタンをクリックしてください。

image.png

メールアドレスでログインをクリックします。

image.png

先ほど作成したアカウントの メールアドレスパスワードを入力して ログインする ボタンをクリックします。

image.png

右上にユーザ名が表示されたら成功です。

3. プログラミングコードを投稿する

image.png

ホーム画面右上の 投稿する をクリックします。

コードレビューしてください! をクリックします。

image.png

❶タイトル(何を作ったか?)
❷プログラミングコード
❸コメント
を記入した後、
画面最下部の 投稿する をクリックします。

image.png

投稿完了!フィードバックが届くのを待ちましょう。

4.コードレビューをする

コードレビューをするには、個別ページ内でコードレビューしたい箇所をマウスでドラッグします。

ここでは sum(a, b) をハイライトしています。

image.png

するとポップアップが表示されるので、変更後のコードとコメントを記入し、”送信”ボタンを押します。

image.png

以上でフィードバックの投稿は完了です!


技術のお話

技術構成

フロント側をNuxt.js, バックエンドをLaravel, そしてAWSにデプロイしています。

Ace.js

また、コードエディタについてはAce.jsのライブラリを使っています。

https://ace.c9.io/

このライブラリをNuxt.jsで使えるようにするまでが苦労しました…

試行錯誤の結果、Pluginとして読み込むことで解決しました。

import ace from 'ace-builds/src-min-noconflict/ace'
import Vue from 'vue'

export default ({ app, store, next }) => {
  app.router.afterEach((to, from, next) => {
    if (to.path.match(/^\/works\/.*$/) !== null) {
      Vue.prototype.$mountAceEditor = (dom) => {
        ace.config.set('basePath', '/js/ace')
        const editor = ace.edit(dom)
        editor.setTheme('ace/theme/monokai')
        editor.session.setMode('ace/mode/javascript')
        return editor
      }
      Vue.prototype.$createAceRange = (startRow, startColumn, endRow, endColumn) => {
        return new Range(startRow, startColumn, endRow, endColumn)
      }
    }
  })
}

ひとりでフロントからサーバまでを開発するのは大変ですね…でも自分の好きなようにカスタマイズできるのがひとりの魅力でもありますね!

明日の担当はtetsuyaさんです!楽しみです〜〜

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です