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

すごくモテたいフリーランスエンジニアの話

一見モテないエンジニア。そんな中でもモテるために試行錯誤をしてフリーランスという荒波を生きる男のブログです。

大学生からフリーランスになって感じた「案外なんとかなる」ということ

f:id:babashun1024:20170414112636j:plain

どうも。フリーランスです。

 

僕は大学生からフリーランスになりました。

 

フリーランスになるということは、人生においての一大決心というイメージがありますが

 

僕は「なんかかっこいいからなろ」くらいの軽い感じでなりました。

 

そしてフリーランスになって思ったのは「案外なんとかなるものだな」ということです。

 

続きを読む

ajaxを世界一簡単なサンプルとともに入門する

f:id:babashun1024:20170328145000j:plain
どうも。フリーランスです。


最近まで僕はAjaxを使ったことありませんでした。

「Ajaxって何か難しいイメージあるしちょっと.....」
と思っていました。


しかし案件の都合でどうしても書かなければいけなくなり、書いてみると


「これ超簡単で超便利やん!!」
「Ajax最高!!」


と、一瞬で手のひらを返ししました。


今回はそんな素晴らしい技術であるAjaxについて、今更ではありますが世界一簡単な例で解説を行っていきたいと思います。


Ajax童貞のみなさん。今がチャンスです。
この簡単なサンプルで卒業しちゃいましょう。

Ajaxとは

まずはAjaxとは何か理解していきましょう。

Ajax発祥の人によると

standards-based presentation using XHTML and CSS (XHTMLとCSSを使った標準規格のプレゼンテーション)

dynamic display and interaction using the Document Object Model (ドキュメント・オブジェクト・モデル(DOM)を使ったダイナミックな表示と相互のやりとり)

data interchange and manipulation using XML and XSLT (XMLとXSLTを使用してデータ変換と操作)

asynchronous data retrieval using XMLHttpRequest (XMLHttpRequestを利用した非同期なデータの検索)

and JavaScript binding everything together (そして、JavaScriptがそれらを一緒にしてしまう)



ちょっと何言ってるかわからないので簡単に解説していきます。


通常サーバーと通信を行うときは、サーバーからレスポンスが帰ってくるまでユーザーの操作を受け付けません。
ブラウザでウインドウの横の部分がクルクル回っている状態ですね。


しかしAjaxを使用するとこのクルクル回っている状態を作ることなく、サーバーと通信を行うことができます!
要するに「サーバーと通信していない風にサーバーと通信することができる技術」です。


なので、ユーザーを待たせることなく、ユーザビリティを下げることなくサーバー通信を行うことができます。

Ajaxを超絶簡単に使ってみる

それではAjaxを実際に使ってみましょう。


作るファイルはたった二つ、ajaxのリクエストを送るための「ajax.html」と、レスポンスを返す「res.html」です。


まずはajax.html

#ajax.html
<meta charset="utf-8">
<button class="ajax_button">ajax</button>
<p class="hoge"></p>
<script src="https://code.jquery.com/jquery-3.2.1.js" ></script>
<script>
  $(function(){
  $('.ajax_button').click(function(){
    console.log('aa'); 
    $.ajax({
      type: 'GET',
      url: 'res.html',
      dataType: 'html',
      success: function(data) {
        $('.hoge').append(data);
      },
      error:function() {
        console.log("何らかの理由で失敗しました");
      }
    });
  });
});
</script>

ajax内のコードを上から解説していきましょう。


まずtypeの部分はリクエストのタイプを指定します。
今回はデータを取得するだけなので、GETですが、データを送信したい時などはPOSTも使用することができます。


次にurl。
これはリクエストを送るurlを指定します。


次にdataType。
dataTypeは取得するデータの形式を書きます。
今回はhtmlを取得するのでhtml。
他に代表的なものとしてはJson形式が挙げられます。


最後にerrorとsucess。
この中にはそれぞれ失敗した時と成功した時の処理を記入します。
これでajaxを使用する準備は整いました。


次にres.htmlです。

#res.html
<p>hogeeeeeeee</p>

ajax.htmlを開くと
f:id:babashun1024:20170413161205p:plain
こんな感じで、ボタンが一つの簡素な画面が広がります。


次にボタンを押すと
f:id:babashun1024:20170413161216p:plain
このようにres.html内のデータが読み込まれ、出力されていることがわかります。

まとめ

今回はajaxの基礎について解説していきました。
ajaxは敬遠されがちですが、簡単にユーザビリティをあげることができる素晴らしい技術です。
ぜひ習得するようにしましょう!

ポジティブ思考の人とネガティブ思考の人のたった一つの違い

f:id:babashun1024:20170329231042j:plain

 

どうも。フリーランスです。

 

僕は昔とてもネガティブ思考でした。

 

一度できないと、「もう俺は無理だ」「何もできない人間なんだ」と思ってしまいひどく落ち込んでいました。

 

寝る前に昔の失敗を思い出して「うわああああ」ってなっていました。

 

しかし、たった一つ

ある考え方を変えるだけで、ポジティブ思考になることができました。

 

今回はそのたった一つの違いについて書きたいと思います。

 

続きを読む

読書家なりたきゃこれを読め「頭は本の読み方で磨かれる」

f:id:babashun1024:20170329231042j:plain

 

どうも。フリーランスです。

 

突然ですが皆さんは月に本をどれくらい読みますか?

 

ある調査によると20代、30代のビジネスマンは1ヶ月平均0.26冊の本を読むのに対し、30代で年収3000万円の人は平均9.88冊の本を読むと言われています。

 

本はこのようにとても巨大な力を持っているということが証明されています。

 

それにもかかわらず、本を読む人というのは驚くほど少ないです。

 

ではなぜ本を読まないのか?

 

それは本を読む理由がわかっていないからです。

 

続きを読む

早起きマスターの僕が、いとも簡単に早起きができるコツと目標設定の仕方を教える

どうも。フリーランスです。

 

「早起き」ってとても大事ですよね。

 

朝早く起きれた時は清々しい気持ちになりますし、成功者は早起きをしている人が多いと言われています。

 

ただ早起きはとても難しくて、続かないことも多いのではないでしょうか?

 

ただ早起きは目標設定をしっかりすることで、いとも簡単にすることができます。

 

今回はその方法を早起きマスターの僕が、みっちり書いていきたいと思います。

 

続きを読む

【完全網羅】現役フリーンランスが税金の種類について解説する

f:id:babashun1024:20170313115811j:plain

 

どうも。フリーランスです。

 

フリーランスになって気になることの一つに「税金」があります。

 

税金が自動的に計算される会社員の方と違って、フリーランスは自分の税金を管理し、支払いを行う必要があります。

 

僕も初めてフリーランスになる時は

 

脱税とかしたらどうしよ.....

と震えていました。

続きを読む