読者です 読者をやめる 読者になる 読者になる

メヘンニミン

たくさんの言語に触れたい.走り書きで見る整理ブログです.

ラボ後輩に伝えたい開発の基礎ネタ集

はじめに

フロント系開発の話が中心になりますが, 研究の中でとくに開発ネタに限定し,ざっとまとめてみました. 考え方やサービスもいくつか示します. 自分のとこの研究室向けなので,ちょっと偏りがあるかも?

プログラミングを学ぶには

  • 研究開発とは検索力と後輩力
    • 実は検索方法がめちゃくちゃ大事.本当に大事
      • 9割は先駆者がいたりいなかったり
      • 根気よく,かつ柔軟に検索しましょう
    • 先輩をコキ使いましょう.ためらったらコールの場面
      • 先輩は全知全能ではない.だがその解決方法に注目してほしい!
    • 「自分で学びながら1から書く」「真似ながら応用する」
      • 少しずつ後者の書き方へ移行してください
    • 開発の「未知領域」と「作業領域」
      • 前者を攻略せよ!後者を短縮せよ!
      • 自分の「未知」は,先輩の「作業」だったりして?
      • 技術的課題は解決しにくいが,イデアものは大概うまくいく
  • 自分で学びながら1から書く
    • 何もわからない!という開発初心者は,入門にやや時間をかける
      • 学ぶ場所は必ず先輩に聞きましょう
    • 習熟度によるが,最低2つは異なるプロジェクトを作る
    • 入門書を最後までやる必要はない.学ぶ範囲は先輩に問い詰める
      • 浮気はダメ.まずは一貫して終わらせる.その後に必要なら別れて
    • 参照しやすい実行環境を利用して基礎的な動きを確かめてみる方法も
    • 学んだ手順はEvernoteなどにメモをとるとよい
      • 同じ開発にあたるとき,すぐに再現できますか?
      • これはレポートへの再利用にも使えますね
  • 真似ながら応用する
    • 入門を終えた次のステップは,類似コードを見つけること
    • 先輩と同じコードを書く必要はない.積極的に頂くこと
      • 完全コピペはせずとも,1つの参考先としてもらっておくべき
      • とくにノウハウやセキュリティ対応を繰り返すのは勿体ない
    • それからどう応用する?コピペからどこをいじればいい?
      • 知らん
      • 応用力こそ開発力の肝だが,これは総合的な理解力・統合力の話
      • 慣れしかないが…双方の環境を比較してよく勉強すること
        • つまり第2ステップは開発者の環境理解といえる
      • どうしても統合できない場合は,片方だけで動くか,部分的に動くかを網羅的にテスト
  • 公式リファレンスを読む
    • 公式の仕様書に慣れることは汎用的な開発力につながる
      • 「Document」「API」メニューなど
      • 「DEMO」のコードは最上級の優しさ.早速基盤にする
    • 共有されにくいマイナー機能を自分で発見できるようになろう
      • 意外にできること,手に届く便利は結構ある
    • 何を参照すれば使えるようになる?
    • 関数の仮引数や返り値は何?使って大丈夫?
      • 関数array_pushは1つ目に対象の配列,2つ目以降(mixed)は追加する値
      • よく読むと今回はarray[] = ...のほうがよさそうだ

エラー処理を少し

  • 無限の迂回方法を探せ
    • 手を変え品を変えてエラーをなくす努力を
    • 納得いかない書き方でも,試してみて初めて気づく間違いがある
    • 後回しであっさりいくことも
      • 朝日浴びろ朝日
  • 何事もデバッグ用の関数をまず確認
    • System.out.println console.log Console.Write Debug.Log ...
    • 色々あると思うけど,文字列にして確認する方法を先に掴んでおこう
  • テスト!ビルド!実行!を繰り返せ
    • 1行ずつ削除してテスト
    • 条件を限定してテスト
    • デバッグ用の関数で何でも確かめながらテスト
    • 他の変数やオブジェクトに適用してテスト
    • 動作に確証のある環境でテスト
    • 問題点に焦点を当てたシンプルな構造に絞ってテスト
  • 例外処理 を使いこなせ
    • 記述的には合っていても,コンパイラは通っても,予期せぬエラーはいっぱい
      • 外部通信,許可が必要な処理,コールバックものなど
    • エラーの種類を指定しながら,処理を中断しつつエラー情報を引っ張ってくるのが例外処理
      • 詳しくは,try catch文でぐぐって
  Error: could not find function `getNumber`
  • エラー文をコピペする
    • 上記のエラーは「(言語名) "could not find function"」でぐぐる
    • 変化する表現(getNumber)はひとまず外しましょう
  • 英語を恐れるな
    • StackOverFlowなどの質問サイトも臆さず見ましょう
      • 最初のうちはChromeのページ内全翻訳に頼るとか
    • 解決済み案件であること,解決日付や利用バージョンにも着目

いい検索って

  • ざっと見てみる
    • Google検索1ページ目,関与しそうなページを一度に開いてみる
    • 3ページ目からが怪しくなるので,さっさと検索キーワードを修正しよう
  • 検索キーワードの自由自在
    • 少し絞る,すごく緩める,類似語で探す,原点回帰する
    • その業界の専門用語があるのかもしれない?
      • 発見できたらその語を調査!
  • 効率のよいブラウザ上の検索を
  • マイノウハウとしての蓄積

ぐぐるだけで済ませてない?

GitHubを活用する

  • 簡単にいうとコードを共有する場所
    • 皆で開発するために公開されたプロジェクトがたくさん
      • も公開するほど
    • たくさんの人が公開している=たくさん参考にできる
  • Gitは勉強すべき?
    • 将来的には
    • ただ,個人開発の多いうちの研究室では,あんまり
    • バージョン管理は便利だが,やや取っつきにくい
  • 開発の参考にする
    • まずは参考先として.1番勉強になる場所…だと思う
    • まとまった動作環境で公開されていることが多い
    • スター数の多い人気のレポジトリから探そう
    • ディレクトリ構造を探りながら,レポジトリ内検索で動きを追おう
  • 開発の基盤にする
    • example template basic starter boilerplateなどのつくプロジェクト名を探そう
      • ライセンスを確認しつつ,自分の環境基盤に取り込もう
    • DLは右上の緑色のボタン => Download Zipから
    • Gitを入れている環境ではgit clone (git名)コマンドでコピー

コーディングの進め方

  • 1つの記述(更新・修正)に集中
    • 急に先輩に呼ばれる,急にトイレを催す,急にPCが吹っ飛ぶ…
    • 後から見ても,途中からすぐに始められるコーディングを!
  • インデントの話
    • Tabキーによるインデントの多数派は「半角空白2つ分」
    • エディタで設定できるので,今どきはわざわざ2回スペース打って…はしない
    • ただし,インデントの整形には常に気を配ること
      • 何か書いたらすぐ整形して実行!コピペしたらすぐ整形して実行!
      • これを後に回すからトンデモ収集つかないが起こる
  • コメントの話
    • <!-- --> // /* */ # {/* */} 各言語で様式をチェック
      • リファレンス風の書き方(Javadocなど)を学んでもよい
    • 開発が遅い自信があるなら,無理にビッシリ書く必要はない
      • つまり,繰り返しコメントをつける苦行はいらない
      • X 後からいつ見ても思い出せる簡単な関数とか
      • O 自作関数,全体的なプログラムの流れ,ややこしい処理とか
    • 後輩への引き継ぎにコメントは欲しいが,卒業前でも整理できる
for (var i = 0; array.length; i++) {
    if (flag || mode === 'debug') {
      value0 = 2*i + 1;
    } else {
      value1 = Integer.parseInt(array[i]);
    }
}
  • 空白と括弧の話
    • この話題は意見が分かれそうだけど僕のゆとり具合はこう(上記)
    • if文の中身value = ...が1行だけなら{}は省略できるが…
      • 後から追記することも考え,常につけるクセを
    int result; // 先に変数を準備
    for (int i = 0, length = array.length; i < length; i++) {
        int state = array.state;
        if (state === STATE0) {
            result += 2;
        } else if (state === STATE1){
            result *= 3;
        } else {
            result = 0;
        }
    }
    return result; // for文で繰り返し更新した結果を返す
  • 変数と関数の話
    • 名前衝突を避けるため,スコープの広さに気にかける
      • 例えばfor文の中でしか使わない変数は,for文の中で宣言すること
      • 上記は出力用の変数を先に準備しておく方法
      • この場合はfor文の外に置くことになりますね
    • 変数準備の基準は「2回以上使う
      • array[index][text]を2度使うなら変数化しちゃう
      • 条件式も以下のようにまとめるとわかりやすくなります
      • java Boolean judge = 0 < num && (num%2 == 1 || debug); // if (judge) { ...
    • 命名は英語の勉強を兼ねること
    • あとから見てもわかるように英語のスペルは省略しない
      • editCollapseedcollとかecとか.まじでわからんぞい!
      • countnumも,使用範囲が広いならmemberCountとわかりやすく

コーディング規約は色々とキリがなく好みも大きい・・・色々調べてみるといいかも

エディタだけど

  • 最初の設定
    • 文字コードを「UTF-8(BOMなし)」,改行コードを「LF」に
    • 行番号を表示させておく
  • 総合開発環境か?言語特化環境か?vim
    • 言語による.好きにして
    • 基準はたくさんあるが,以下の機能は贅沢に利用してほしい
    • オートコンプリート(自動補完)
      • Javaで「Integer.」まで打ったら色々な変換候補が出てくるなど
    • スニペット(変換ショートカット)
      • C#では「c s Tab Tab」で「Console.write」が入力されるなど
    • エラー出力&静的コード解析
      • PHPで何が原因だ???を事前にわかるようにするなど
    • 言語特化エディタは,このへんはなるべく備えているはず
    • 上記を自力で揃えられるなら,総合開発環境でもよい
      • とくに多様な言語を扱うWeb開発

僕はAtomを使っている

  • なのでこのへんの話しかできないが
    • GitHub提供の総合開発環境エディタ
    • 将来性ありそうでSublime Text 3から乗り換えた
    • Visual Studio Codeはパッケージ次第で様子見
  • プロジェクト単位で開発(検索)しやすい印象
    • 1番使うのはプロジェクト内全文検索Ctrl+Shift+F
    • 次点でプロジェクト内ファイル名検索Ctrl+P
    • あと全パッケージの操作を検索するCtrl+Shift+P
    • 設定はCtrl+,
  • パッケージを入れまくって強化する
    • Remote-FTP
      • 一度設定すれば保存後すぐにアップロード
    • Atom Beatify
      • 1ショートカットで言語特化の整形
      • Auto Indentによるインデント整理もオススメ
    • Emmet
    • Linter
      • 静的コード解析.npmパッケージとの連携が必要
    • Git Plus
      • Gitをショートカットで進めるならこれ
    • Color Picker
      • カラーコードを視覚的に決定できる
    • Atom Material
      • おすすめのテーマ
    • Activate Power Mode
      • 楽しい

そのほかの開発支援サービス

  • Rapture, SnapCrab
    • Raptureは気楽な画面キャプチャソフト.タスクバーにピン留めするといい
    • SnapCrabはもう少し多機能なほう.ウインドウ単位や色スポイトなど
  • Clibor
    • コピペ履歴や定型文を記録する常駐ソフト
    • メールやtexの定型文とかこれでいい
  • Optimizilla
    • いくつかある画像の圧縮サービス
    • 画質を変えずに容量を下げます
  • FLATICON, IcoMoon
    • フリーアイコン集.ライセンス関係はぐぐりつつ利用しましょう
  • jfxr
    • ゲームっぽい音を作成し,フリー音源としてDLできる
    • Randomボタン連打でも楽しい

おわりに

ざざっと勢いで書いてしまいましたが, まだまだ欠けているノウハウや知らない技術もたくさんあると思います. 思いつきで追記しよう.便利なものがあれば教えてください.

次回は「ラボ後輩に伝えたいWeb開発の基礎テク集」とか書きます.