コンテンツにスキップ

はじめに

開発者向けページについて

QUAINTの開発者向けのページです。



QUAINTとは何か

QUAINT(クエイント)とは、我々の開発している星陵祭オンライン整理券システムの名称です。

詳しくはこちら：1.システム概要

技術的な内容について詳しくは：QUAINTの構造



開発者向けページの読む順番

技術部(0から)

文章量が多く、また新しい概念を理解しなくてはならないので、とても大変だと思います。
今はよく分かっていなくても後々理解することがあるので、「そういうものがあるんだな」ぐらいに思って適宜読み飛ばしながら、概要をつかんでください。

  1. このページ(はじめに)
  2. QUAINTの構造
  3. GitHub

ここからは、具体的な技術が絡んだ話になります。
今は完璧に理解せずとも、実際に開発に携わる過程で少しずつ会得していくので大丈夫です。

(まだまだ発展途上で、【工事中】のページが多いです…申し訳ないです。)

これらのページで概要をつかんだら、「習うより慣れよ」の精神で、実際に開発に携わっていただければと思います。


総務部

  1. このページ(はじめに)の専門用語の項
  2. QUAINTの構造
  3. GitHub
  4. Nuxtについて詳しくのルーティングの項

具体的にソースコードに手を加えることがないので、そこに関わる部分は読み飛ばしてもらって結構です。



インストールするもの

開発には基本的に、77期生から生徒全員に配布されるPCであるSurfaceを使用します。
Surfaceは比較的容量の少ないモデルですが、開発に支障は出ないので安心してください。

開発には、VSCode というアプリケーションを使用します。

VSCode(VisualStudioCode)はMicrosoft社が提供する無償のコードエディタです。
VSCode(VisualStudioCode)の定番機能を一挙解説より

当然VSCode以外にもテキストエディタ・コードエディタは存在しますが、
開発に使用するGitHub CodespacesというサービスでVSCodeが必要となります。

インストール方法や使い方について、
詳しくはこちら：VSCode(VisualStudioCode)の定番機能を一挙解説

また、GitHubのスマホアプリも入れておくと便利です。
詳しくは：スマホアプリ



専門用語

とりあえず最低限の内容を追加しました。
追加してほしい用語や表現があれば連絡ください。

用語について、より詳しくは引用元サイトをご覧ください。

ソースコード

何かのプログラムを作る際に、そのプログラムに「どんな動作をさせたいか」という処理の内容を書いたテキストファイルのことです。
ソースコードとは何か？より

拡張子

ファイルには拡張子というものがあります。
例えば、写真は jpg、PDFファイルは pdf、Word文書は docx、音楽ファイルは mp3などです。
ファイル名と拡張子の間は .（ドット）で区切られています。
そのファイルが何のファイルであるのか判別し、ファイルをクリックすると対応したアプリケーションで開くことができるようになっています。
拡張子とはより

ハイパーテキスト・ハイパーリンク

ハイパーテキストは、文書データ上のテキストや画像などをクリックすることで別のページに移動する仕組みを指します。現在では、ハイパーリンクを略してリンクと呼ぶことが多いです。
ハイパーリンクとは？より

アドレスバー

Webブラウザに備わるツールバーで、ブラウザが現在表示しているWebページのURL（アドレス）を表示するもの。アドレスバーに直接URLを入力してWebページを開くこともできる。
アドレスバーより

クエリパラメータ

クエリパラメータとは、サーバーへ送りたいデータを指定するためにURLの最後に追加する文字列です。
クエリパラメータとは？より

団体一覧ページで活用されています。

リダイレクト

リダイレクトとは、Webページを自動転送することです。ページをリダイレクトさせるには、Webサイトの管理者が正しく「リダイレクト設定」をする必要があります。
WebサイトやページのURLを変更したときや、PC用サイトとスマートフォンサイトを出し分けするときなどに、この設定は欠かせないものです。
リダイレクトとは？より

リンク切れ

リンク切れとは、自ページに設置してあるリンクの遷移先がHTTPステータスコードで404 Not Found 等によりアクセスすることが出来なくなっている状態を指します。
リンク先のURLを間違えて設定していたり、リンク先のページが削除されてしまったりすることで生じます。
リンク切れとは？より

HTTPステータスコード

HTTPステータスコードとは、ウェブサイトにアクセスしたとき、正常な画面ではない場合に表示される3桁の数字のことです。
ウェブサイトにアクセスしたときに「404」や「503」といった数字が表示された経験はないでしょうか。HTTPステータスコードはたくさんの種類があり、それぞれ意味する内容が異なります。
HTTPステータスコードとは？より

UI

WebサイトでいうところのUIは、サイトの見た目や、使いやすさのことを指します。よくUI＝見た目、と勘違いをしている方もいるかと思いますが、レイアウトや使用されている画像はもちろん、文字のフォント、メニューやボタンの操作性などユーザーが目にするもの・操作するものすべてが含まれています
今さら聞けない！ UI（ユーザーインターフェース）とは？より

GUIとCLIについても調べておいてください。

SEO対策

SEO対策とは、Search Engine Optimization の略で〝検索エンジン最適化〟であり、自社サイトを検索エンジンで上位表示させるために行う施策というニュアンスで使われる言葉です。
正しいSEOとは？

詳しくは：【工事中】

HTML

HTML とは、WEBページを作成するための言語のことです。
例えば、見出しや段落・表・リンクなどを設定します。
詳しくはこちら：初心者向けHTML入門

CSS

CSS とは、Webページの文字の色や大きさ、背景、配置といったスタイル（見た目）を設定する言語です。
詳しくはこちら：初心者向けCSS（スタイルシート）入門

JavaScript

HTML や CSS がページの見た目を担当するのに対し、JavaScript は、ページを言わば「動かす」ための言語です。
JavaScript の書き方については、MozillaのJavaScriptガイドに代表されるように、かなり多くの情報がネット上にあります。

開発者ツール

開発者ツールとは、ウェブサイトのデバッグやパフォーマンスの最適化、アクセシビリティの向上など役立つ機能を提供するツールのことです。
主要なブラウザ（Google Chrome, Mozilla Firefox, Microsoft Edgeなど）は開発者ツールを標準搭載しています。
ブラウザの開発者ツールを使いこなそうより

検索すれば使い方が出ますが、非常に多機能なので、とりあえずは

  • ページの要素の選択方法(インスペクターや、ページの画面を右クリックすると出る「調査」というメニュー)
  • デバイスモード(表示デバイスの変更)
  • HTML仮編集

の機能を最低限理解していただくだけでよいと思います。

ディレクトリ

ディレクトリとは、コンピューター上でファイルを入れておくためのフォルダのことです。
ディレクトリは、複数のファイルを1つの場所に整理して保存でき、階層的な構造を持つことができます。
コンピュータのファイルシステムにおいて、ディレクトリは、ファイルの保存場所を管理するための重要な役割を担っています。
また、Webサイトの場合は、Webページやその他のコンテンツを適切に管理するためのディレクトリ構造が必要です。
ディレクトリとは？より

また、ファイルの位置を表すためにパス(path)についても知っておきましょう。
詳しくはこちら：もう迷わない相対パスの書き方をどこよりも丁寧にわかりやすく解説

リクエスト

ホームページを見るときに、ホームページを見るときに使うソフト（Webブラウザ）からホームページのファイルが置いてあるコンピュータ（Webサーバ）に対して出される「このページをちょうだい」なお願いのこと
HTTPリクエストとはより

エンドポイント

このエンドポイントとは、連携したいAPIにアクセスするための接続先のこと。
APIエンドポイントとはより

引数

引数（読：ヒキスウ　英：argument）とは プログラムや関数に渡す値のこと です。
引数とはより

余談ですが、戻り値は返り値とも言います。
参考：「戻り値」か「返り値」か

コメントアウト

コメントアウトとは「ソースコードの中にメモや解説をコメントとして残せること」です。例えば「ここのコードはログイン画面を作っている」「○月×日に△△が編集した」など、実際に動くコードではないコメントのことなので、書く内容は自由です。
コメントアウトは一体どう使うの？より

フレームワーク

簡単に説明すると「Webアプリケーションやシステムを開発するために必要な機能があらかじめ用意された枠組み」のことです。
フレームワークを使えば、ゼロから開発に必要な機能を用意する必要がありません。
プログラミングの「フレームワーク」を徹底解説！より

フロントエンドではVuetifyがわかりやすい例だと思います。
詳しくは：templateについて詳しく

ライブラリ

ライブラリとは、「よく使う機能などをパッケージ化して使用する部品」のことです。
プログラミングの「フレームワーク」を徹底解説！より

Markdown記法

Markdown（マークダウン）は文章を記述するための記法（マークアップ言語）の一つです。
メモ書きやドキュメント作成に便利な「Markdown記法」を使ってみようより

DiscordやGitHubでも使えます。このWikiもMarkdown記法で記述されています。
実際に装飾された状態はプレビューと呼ばれます。
VSCodeでは右上にプレビューを表示するボタンがあります。

詳しくはこちら：Qiita マークダウン記法 一覧表・チートシート



ソースコードの可読性について

ソースコードの可読性というのはつまり、ソースコードの見やすさ、読みやすさのことです。
多人数で開発をしますから、後に見て理解しやすいような書き方を心がけましょう。

基本的には、既存のソースコードの書き方の真似をするで大丈夫だと思います。
例えば正しくインデントするとか、いたずらに大文字を使用しないとか。

ただし、乱雑に書いても、ツールが読みやすいように修正してくれるので、実際のところ神経質になる必要はありません。
このことを Lintfix と言います。
詳しくは：Codespace

また、変数名や関数名には命名規則があり、どれが使われるべきかは慣習的に決まっています。
慣習についてはVueとは何かのページで記述しています。
命名規則について詳しくはこちら：命名規則まとめ
(UpperCamelCaseはPascalCaseとも言い、こちらの方が主流な呼び方。)



開発において大切なこと・心がけ

  • 試行錯誤！
    「これじゃどうかな、じゃあこれでは？」という精神が基本です。

  • こまめに動作を確認する
    詳細な原因が分からないバグやエラーが起きたときに、もし一気に変更を入れてしまっていたら、その変更のうちどれが原因なのか判りません。
    地点地点でうまくいっているかチェックするとよいと思います。
    「困難は分割せよ」のイメージです。

  • 既製品を複製・模倣する
    ソースコードは0から作るものではありません。基本的に既製品をコピーし、必要部分を削ったり追加したりして作ります。
    また、わからないことがあった時は、

    • 既存のソースコードを渉猟する
    • Wikiを見る、検索する
    • IT委員に聞く

    のどれかが良いと思います。
    また、デザイン面については既存のサイトやデザインが大いに参考になります。
    特に、東京大学の五月祭・駒場祭両サイトはかなり参考になりました。過年度のものも残っていて、それらも参考になります。

  • 開発を楽しむこと！！
    有志で一緒に議論し開発するということの楽しさを語れるようになりましょう！！