質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.91%

漠然とした質問…プログラムの書き方について

解決済

回答 5

投稿

  • 評価
  • クリップ 3
  • VIEW 1,792

score 168

利用言語
PHP Codeigniter(PHPフレームワーク) jQuery Bootstrap

初心者プログラマが必要にかられて断片的に断片的に勉強しているため、開発の規模が大きくなるにつれ、コードの書き方やもうちょっと大きな単位でのコードによって実現している機能に一貫させられない?

ハマっていること

(※流し読みしてください、日本語が苦手なので)
いわゆるスパゲティ状態になる
オブジェクト指向?で作っていく発想がないからなのか、必要とされ機能をその度追加していくのですが、気がついたら
1.それぞれのコードは包括した1つの関数プログラムでまとめるべきではなかったのか? 
2.違うコーディングでそれぞれを実現してるけど同一の手段で実現させられなかったのか?

車輪の再開発ばかりしていますし、その度、車輪のバグを検証して非常にコードの管理上も良くないと感じてます。

特に顕著だったのが、jQueryを利用した画面作成とajax
jQueryはHTMLに組み込まれてるため、分離しにくい?抽象化(←あってるのかな)しにくい?、単に技術不足っぽそうな気もします。
その度、違った車輪ばかり作ってしまいます。

逆に、一例と出すのは如何なものかとも考えたのですが、Bootstrapは良い
当たり前と言われそうですが、私にとってはCSSも同様なことが考えられ、自分でCSSを書いていくと冗長で使い回しの聞かないものを量産していきそうですが、Bootstrapの利用でパーツや画面を構造的に作りやすいです。

知りたいこと

上記に対する断片的なノウハウと言うより、プログラムを書いていく上で何が必要で、今なにをどのように学ぶべきなのでしょうか?
設計とか、オブジェクト指向とか、画面遷移図とか、UMLとか、既存のIDEを利用しな!とか(今はvim or プレーンatom)、オープンソースの◯◯を解析して参考にするといいよ!とか、そういう次元じゃねーよなど。

なんでも良いのでアドバイスください。
残念な質問でごめんなさい。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

+7

あなたに今必要なのはリファクタリングではないでしょうか。
リファクタリングを学ぶことで、自分のコードに対してどのようなリファクタリングができるかがわかります。そうすることでコードの良し悪しを判断できるようになります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/24 12:46

    いいものを見つけました。なるほど課題の1つはコードのメンテですね
    http://objectclub.jp/technicaldoc/refactoring/refact-smell#12

    キャンセル

  • 2016/08/24 13:10

    リファクタリングができるということはリファクタリングの量を最小限になるコードを最初から書けるということにつながります。
    また、リファクタリングの対象は自分のコードだけでなく人のコードを対象にすることもできるので、誰が良いコードを書くかを知ることもできます。

    キャンセル

  • 2016/08/24 13:40

    なるほど、それはそうですよね。リファクタリングを恐れずコードを多く書く。そしてやはりリファクタリングは繰り返していく。その中でリファクタリングを必要最小限のプログラムが書けるようになるということですね!
    ありがとうございました

    キャンセル

+1

適切なアドバイスになるかわからないですが
「リファクタリングを恐れない」
どんなに熟練の人でも、一度のコーディングで完璧に仕上げられる人はいないと思います
がんばってください

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/24 12:16

    おおおおおぉ…、
    なんかosmoc-1970様に通じる話しですね、プログラマとしての実感なのでしょうね。

    いずれにしてもリファクタリングがキーワードになりそうですね。
    理想的なリファクタリングを追求しても仕方ないから、その都度、臨機応変に対応しつつ熟練の中でベストリファクタリングを見出だせ。

    が、ぶつかっている壁はリファクタリングである…ということかもしれません

    キャンセル

  • 2016/08/24 13:44

    ちょっと文面を捉え違いしていたかもしれません。リファクタリングしない…ではなく、今後行うであろうリファクタリングを恐れずかけ!ってことですね。
    いずれにしても。多くコードを書いてリファクタリングする中で、リファクタリング最小限のコーディングを学んでいくということになりそうですね

    キャンセル

  • 2016/08/24 14:10 編集

    他の方と回答がかぶっちゃいましたね、、、
    リファクタリングとは、すでに動いていた部分にも手を加えることになるので、壊してしまうのではないか、新たなバグを埋め込むのではないか、という恐怖(リスク)との戦いが伴います
    しかし、非効率で冗長で保守性の低いコードを放置するより、後々のことを考えて勇気をもって書き直すことも重要です
    最初からすべてうまく書こうとするのではなく、うまくないところは書き直せばよいと思います

    キャンセル

  • 2016/08/24 14:11

    「今後行うであろうリファクタリングを恐れずかけ!ってことですね」
    ・・・です!

    キャンセル

0

プログラムを書いていく上で何が必要で、今なにをどのように学ぶべきなのでしょうか? 

まずはちゃんと堅牢に動くプログラムを作る!
「車輪の再開発」全然OKではないですか。開発できているのであれば。

ただ、他人と共同作業するとわかってきますが、プログラムの作り方は答えが一つではなく、人それぞれ違ってきます。
それがわかったときに初めて「抽象化」やら「オブジェクト思考」やらの恩恵をうけることになるでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/24 12:10

    ありがとうございます。
    まずはちゃんと堅牢に動くプログラムを作る! => そうなんですね!
    今の職場でも「理想をたどるより、目の前のものを確実に形にしていく」と言われて一年やって来まして、動くプログラムを作るという考え方の重要性を学ばせて頂きました。

    しかし、振り返ってみると車輪ばかりでこりゃマズイなぁぁって感じています。(書き直すにも膨大すぎるし)
    なので、少しでも効率的な設計?コードの書き方がわかればなー…と、思いまして質問させて頂きました。

    キャンセル

0

ココに書いていいのかな…?

どうやって綺麗なコードを書くか?
https://codeiq.jp/magazine/2014/02/5464/
も参考になりました。

  • とにかくコードを書く
  • 良書を読み、手を動かして身につける
  • 師匠を見つける
  • 弟子を持つ
  • オープンソースのコードを読む
  • コードレビュー
  • ペアプログラミング
  • TDD、BDDを学ぶ
  • オブジェクト指向エクササイズを実践する
  • 各種解析ツールを利用する
  • 可読性を重視した言語を選択する

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

まだJavaScript+jQueryで消耗しているの?

仰るとおりJavaScriptはWebサイト上でscriptタグから呼び出すという制約があるので、
PHP Codeigniterのように、指定のディレクトリにコントローラーやモデルのファイルを設置するだけで、
必要な時に必要なだけ勝手に呼び出してくれるというゴールには中々辿りつけません。

私もこの職場にジョインする前は同様の問題を抱えて居ましたが、
ガチのNode.js使いが側に居ることで非常に勉強になり、今ではすっかり解決しました。
その軌跡を下記にざっと書きだしたので参考にしてみてください。

  1. まずは Node.js と Gulp を覚えましょう。
    gulp-concatライブラリを使って、相関のあるファイルをデプロイ直前に1つのファイルに纏めて公開領域のjsフォルダに吐き出すという事を覚えれば、
    ページ依存のロジックと関数を自在に切り出せるようになります。
    分離出来るようになると言うことは、フォルダ分けして管理出来るということです。
    (とはいえ、まだまだScriptタグで管理することと大差ないですが…)

  2. 次に、 Browserify、もしくは Webpack を覚えましょう。
    これにより、gulp-concatで手動でやっていた事から開放されるようになります。
    webpack で始めるイマドキのフロントエンド開発←を読めばイメージし易いでしょう。

  3. 最後に jQuery から卒業してJSフレームワークを使いましょう
    jQueryではコード側からDOMを操作するので、HTMLとJSが密結合になり辛くなります。
    JavaScriptが値を所持し、HTML側がその値を勝手に参照して、あるべき姿に勝手に置き換わるのが理想です。
    (所謂オブザーバーパターンやデータバインディングと呼ばれる手法です)
    メジャーなJSフレームワークの多数は上記の手法で解決してくれますが、初心者にも使いやすいVue.jsをオススメします。


Bootstrapが綺麗と感じるのは、HTMLの問題がHTML上で完結しているからでしょう。
JSフレームワークの世界に慣れ、関数をファイル分割して管理することにも慣れたら自然とステップアップ出来ると思います。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
たかがボタン1個で何回buttonやbtnタイプさせるんだ氏ね
もう少し慣れてくると↑のような事を平然と口にしてる気がします
妥協するのか、終わりなきオレオレCSSフレームワークの旅に出るのかは人それぞれですが…

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/30 20:58

    たかがボタン1個で何回buttonやbtnタイプさせるんだ氏ね
    もう少し慣れてくると↑のような事を平然と口にしてる気がします
    wwwww

    ありがとうございます。う〜〜ん!実は経験ないのでベストアンサーに評価を変えることは出来ませんが、実は他の皆さんが対処療法の中で経験を積む、という提案に対し「それしかないのかなぁ」と学べた文、ちょっとがっかりでしてたところでした。

    設計の仕方の手法かなとも思ったのですが、そうか、今時のJSフレームワークとは必要あって出てきたのですね。新しいもので抵抗感がありますが、順序を示してくださったことはとてもハードルが下がります!

    気づくのが遅くなって申し訳ありませんでした。テキスト<ベストアンサー>です!
    ありがとうございました

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る