こんにちは。もんしょー（@sima199407）です。
という疑問があるかと思います。
そこを解説していきます。
キーワードは安心感
今回のキーワードは"安心感"です。
「エンジニアでもないのにサイト修正できるのか」
「プログラミングって英語がいっぱいで読める気がしない」
といったように色んな意見があると思います。
今回はざっくりとした部分に触れていこうと思います。
作業工程は考えよう
修正作業を始める前に、どういう風に進めていくのか考えましょう。
仕事の流れに指示がなかったりするので、ここを考えるのは難しいんですよね。
そのため、以下のポイントをやって行くのがいいと思います。
1.修正後の形の想定
2.ツールの導入
3.バックアップの作成
まずは修正箇所の確認
まず、どこを修正するのか確認しておかないといけません。
これを把握せずに作業を進めていくと、よくわからないところを修正してしまったり、間違えたところ修正してしまったというパターンもあるのできちんと把握しておきましょう。
例えば、文字の修正をするという時。
"どこの文字を修正するのか"
"どこから修正後の文章を持ってくるのか"
"何箇所修正をしたらいいのか"
という点を考えておく必要があると思います。
それで、完成のイメージを持ってから作業に移りましょう。
バックアップ専用ツールもありますが、アナログな方法としてファイルのコピーをして保存しておくというのが良いかと思います。
ファイルを修正していて、万が一データがなくなったとしてもそれで対応ができます。
用意したいツール
次にツールの導入についてなんですが、まず用意したいツールはすでにパソコンに入っている可能性もありますが、大きく分けて三つほど導入して欲しいツールがあります。
1つ目がテキストエディタ。
2つ目がテスト環境。
3つ目が FTP ソフト。
それでは、ひとつずつ解説していこうと思います。
1.テキストエディター
1つ目のテキストエディターですが、これはまず必要かなと思います。
これなしにメモ帳のアプリでやろうとすると大変です。
このテキストエディタが何をしてくれるかと言いますと、コードにどこからどこのタグとか、ハイライトをつけてくれたりとタグ修正の補助役をしてくれます。
そういったようにコードを書いたりする時に非常に便利なツールです。
テキストエディタのツールもいろんな種類があるのですが、僕のおすすめは使いやすくて多機能なVS Codeです。
もし、会社でサクラエディタやサブライムなどの指定のツールが使われていればそちらを使ってください。
2.テスト環境
これはツールというほどではないですが必要です。
これは会社で既に用意されている場合もありますし、自分のパソコンでテスト環境を作るという部分があると思います。
基本的にサイトの修正、HTML とか CSS、JavaScript が多いと思うので、それらの修正であれば特別な設定はいらないですね。
拡張子に注意
まず拡張子というのはファイルの「〇〇.jpeg」であれば画像ファイル。
「〇〇.html」であればHTMLファイルと色々と分けるところがあります。
その「.html」や「.css」、「.js」になっている事を確認してください。
他の拡張子だとデータが読み込まれなかったりします。
そうなるとまた環境に合うものを作らないといけなくなるので、「.html」や「.css」「.js」であれば、特に特別な環境はいらないのでいいと思います。
3.FTP ソフト
これはテキストエディタやテスト環境に比べると、少し分かりにくいツールだと思います。
このツールはファイルを転送するときに使うものです。
自分が修正したファイルを会社のサーバーとかにアップロードをする時に必要になります。
よく使われるものとしては、WinSCPやCyberduck、Filezila等があります。
もしかしたらすでに会社で使われている可能性がありますので確認が必要です。
基本的には全て同じような使い方のでどれを使っていても大丈夫です。
はたまた自分は修正をするだけで、アップロードは別の人がしてくれるのであれば、特に必要はないツールです。
そのため、担当の方に確認をして使うかどうか見極めてください。
注意しておきたいポイント
ここから話すのは修正する時に忘れやすい所、注意してほしい部分を解説していきます。
注意してほしいポイントは主に二つあります。
1.後のことを考える
修正してしばらく経った後にまた修正が入ることはありますよね。
文言や画像を変えたりと修正点が出てくると思います。
その時に自分以外の人が行動を修正する可能性はありますよね。
そうなると、誰が読んでもわかるような状態に保持しておくというのがポイントになってきます。
おそらく自分が修正をする前に誰かが作ってくれていると思います。
例えば、ID の付け方など規則性のようなものがあると思います。
その規則性に合わせておくのがポイントになります。
後は画像の拡張子。
今までの全てがjpegになっている所を自分だけpngにするといった事はせずに、なるべく統一感を出してあげるのが後の人を考えるということで必要な作業になってきます。
2.自分の環境以外で動作確認する
これは是非やってもらいたいポイントです。
というのも、僕がよくやらかしてしまうポイントなんです。
環境というのはWebサイトであれば、ブラウザの違いというのが一番のネックになると思っています。
僕は基本的に MacBook Pro で作業していて、ブラウザはGoogle Chrome で作業しています。
ただ、サイトを見てくれる人は同じ環境じゃない可能性の方が高いですよね。
さらに、Google Chrome でなく Firefox やIE などの色々なブラウザがあるので、それぞれでパターンが違うわけですね。
そうなると、レイアウトの崩れがないかなどの確認が必要になってきます。
IEは特に注意です
一つのブラウザで見たときには「これで完璧だな」と思っても、他のブラウザで見ると崩れたりしていることが割とあります。
特に IE が結構厄介なんです。
これは Microsoft が出しているブラウザになります。
Windows のデフォルトで入っている場合が多いので、それを使ってブラウジングする人が多いと思います。
しかし、これが Google Chrome と仕様が違ったりします。
Webサイトの改修はし始めると、 何でIEだけうまくいかないのだろうと思うことが結構あります。笑
だから、是非 Windows を使っているところが多いとか、あまりパソコンに関心がない人がそのサイトを見るという可能性があるんだったら、IE での確認も必須になってきます。
そのポイントは結構注意してほしいです。
まとめ
まとめ① バックアップは取るべき
何かしらあった時にバックアップがあることにより安心感がありますので、ある程度作業を進めるスピードとか、これ大丈夫かなと思ったことでも進めやすくなると思います。
まとめ② ツールはしっかりと使うべき
FTP ソフトを使ってみたり、テキストエディタで開発を効率よくしたり、テスト環境をちゃんと作ったり、とそういうことをやっておくのが良いのではと思います。
まとめ③ IEを確認にするべき
ブラウザの種類によってちゃんと確認しておかないと、あるブラウザで見ると少しレイアウトがずれていたり、全然反映されていないということがありますので、そこら辺は最終確認の時にきちんと見ておきましょう。
今回のまとめです。
・バックアップは取るべき
・ツールはしっかりと使うべき
・IEを確認にするべき